Custom Button Android ( Button Styles)

<div class="separator" style="clear: both; text-align: center;"><span style="font-size: large;">Các thiết kế controls trong gio diện activity android như thế nào cho đẹp? Để có giao diện thân thiện đòi hỏi từng đối tuợng trên màng hình giao diện phải đuợc thiết kế thân thiện.</span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: large;">Trong  bài hứong dẫn này mình sẽ huớng dẫn các bạn thiết kế giao diện của 1 control thuờng dùng nhất trong lập trình viết app - Button.</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLt-2BBlKzNxkomaC0_-1bnSYeeL_vP9g3J-xMNu-VwCsy-fXB4cQxw4-ArJhti3iYMaP_0888IBL705KijzoacmNQDnN7NJmgWZw5HlJVk97unZ_BHIuCw9pdnxE7nBpyeUxD1B9M0Zh/s1600/android_custom_button_style_set-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLt-2BBlKzNxkomaC0_-1bnSYeeL_vP9g3J-xMNu-VwCsy-fXB4cQxw4-ArJhti3iYMaP_0888IBL705KijzoacmNQDnN7NJmgWZw5HlJVk97unZ_BHIuCw9pdnxE7nBpyeUxD1B9M0Zh/s1600/android_custom_button_style_set-1.jpg" width="320" /></a></div><h2 id="orange" style="background-color: white; border: 0px; clear: both; color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 21px; margin: 0px 0px 0.8125em; outline: 0px; padding: 15px 0px 0px; vertical-align: baseline;"></h2><div>Làm thế nào để tạo style cho Button?</div><div>1) Tạo file .XML trong thư mục <strong style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“res/drawable” </strong><span style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">định dạng style</span></div><div>2) Thêm thuộc tính ở thư mục <b>Valuse</b></div><div>3) Thêm thuộc tính ở code .xml của control </div><div><strong style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">style=”@style/btnStyleOrange”</strong></div><div><br /></div><div>Tham khảo một số mẫu Style Buton:<br /><br /><h2 id="orange" style="background-color: white; border: 0px; clear: both; color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 21px; margin: 0px 0px 0.8125em; outline: 0px; padding: 15px 0px 0px; vertical-align: baseline;">1. Orange</h2><h2 id="orange" style="background-color: white; border: 0px; clear: both; color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 21px; margin: 0px 0px 0.8125em; outline: 0px; padding: 15px 0px 0px; vertical-align: baseline;"><div style="background-image: url(http://www.mindfreakerstuff.com/wp-content/uploads/2012/09/android_custom_button_style_set-1.jpg); background-position: -16px -82px; background-repeat: no-repeat no-repeat; border: 0px; font-size: 14px; font-weight: normal; height: 36px; margin: 0px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline; width: 114px;"></div><div style="border: 0px; font-size: 14px; font-weight: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="syntaxhighlighter xml" id="highlighter_963502" style="border: 0px; font-family: inherit; font-size: 1em !important; font-style: inherit; margin: 1em 0px !important; outline: 0px; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px; position: relative !important; vertical-align: baseline; width: 659.3125px;"><div class="toolbar" style="background-color: rgb(108, 226, 108) !important; background-position: initial initial !important; background-repeat: initial initial !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border: none !important; bottom: auto !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: 11px !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: 11px !important; z-index: 10 !important;"><span style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span><span style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a class="toolbar_item command_help help" href="http://www.mindfreakerstuff.com/2012/09/50-useful-android-custom-button-style-set-1/#" style="background-image: none !important; background-position: initial initial !important; background-repeat: initial initial !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: white !important; direction: ltr !important; display: block !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 1px 0px 0px !important; position: static !important; right: auto !important; text-align: center !important; text-decoration: none !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">?</a></span><br /><div><br /></div></div></div></div></h2><br />Selector XML : custom_btn_orange.xml (Add XML to res/drawable folder)<br /><pre class='xml'><?xml version="1.0" encoding="utf-8"?><br /><selector xmlns:android="http://schemas.android.com/apk/res/android" ><br />     <item android:state_pressed="true" ><br />         <shape android:shape="rectangle"  ><br />             <corners android:radius="3dip" /><br />             <stroke android:width="1dip" android:color="#c53e2b" /><br />             <gradient  android:angle="-90"  android:startColor="#a11005" android:endColor="#d62608"  />           <br />         </shape><br />     </item><br />    <item android:state_focused="true"><br />         <shape android:shape="rectangle"  ><br />             <corners android:radius="3dip" /><br />             <stroke android:width="1dip" android:color="#c53e2b" /><br />             <solid  android:color="#e0341e"/>     <br />         </shape><br />     </item> <br />    <item ><br />        <shape android:shape="rectangle"  ><br />             <corners android:radius="3dip" /><br />             <stroke android:width="1dip" android:color="#c53e2b" /><br />             <gradient  android:angle="-90"  android:startColor="#ff6c52" android:endColor="#e0341e" />           <br />         </shape><br />     </item><br /></selector><br /> </pre>Button style : Add style code to values/styles.xml file<br /><pre class='xml'><style name="btnStyleOrange" parent="@android:style/Widget.Button"><br />       <item name="android:textSize">15sp</item><br />       <item name="android:textStyle">bold</item><br />       <item name="android:textColor">#FFFFFF</item><br />       <item name="android:gravity">center</item><br />       <item name="android:shadowColor">#000000</item><br />       <item name="android:shadowDx">1</item><br />       <item name="android:shadowDy">1</item><br />       <item name="android:shadowRadius">0.6</item><br />       <item name="android:background">@drawable/custom_btn_orange</item><br />       <item name="android:padding">10dip</item><br />   </style><br /> </pre><br /><br /><br /><a href="http://www.studycoding.net/search/label/Custom%20Button%20trong%20Android" rel="nofollow" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-large; line-height: 21px; text-align: center;" target="_blank">Xem thêm Custom Button Android </a></div>

Custom Button Android ( Button Styles)

Các thiết kế controls trong gio diện activity android như thế nào cho đẹp? Để có giao diện thân thiện đòi hỏi từng đối tuợng trên màng hình ...

Read more »

Custom Button trong Android

Trong android các control đều thuộc lớp View. Như TextView, Button, EditText, . . . .Các bạn có thể tùy chình hình dạng, trang trí giao diện cho các control này như ý muốn.<br />Hôm này Học Lập Trình sẽ huớng dẫn các bạn 1 cách tùy chỉnh giao diện cho các control 1 cách đơn giản là include file .xml vào cho background để điều chỉnh giao diện.<br />Đầu tiên các bạn tạo 1 file .xml trong thư mục draw để tùy chỉnh giao diện.<br />Chuột phải vào thư mục <span style="color: red;">Draw -> New -> File XML</span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ipRYJsXIqpSSLMBIgPf-hXNm8ebU2u_TB8TzH94UZ4c0xjHsuVOkElKz99rpfG4-7c6Ixhbb6d99CDXnlovzwMIE5yQRhcX7fmVgZA391-K9i_Rxa-IfSAIHdLkCPeSTzavxjr5QiLoL/s1600/Screenshot+from+2014-06-01+13:12:29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ipRYJsXIqpSSLMBIgPf-hXNm8ebU2u_TB8TzH94UZ4c0xjHsuVOkElKz99rpfG4-7c6Ixhbb6d99CDXnlovzwMIE5yQRhcX7fmVgZA391-K9i_Rxa-IfSAIHdLkCPeSTzavxjr5QiLoL/s1600/Screenshot+from+2014-06-01+13:12:29.png" width="307" /></a></div><div class="separator" style="clear: both; text-align: left;">Đặt tên <span style="color: red;">dinhdang.xml</span></div><div class="separator" style="clear: both; text-align: left;">Thêm code sau vào:</div><div class="separator" style="clear: both; text-align: left;"></div><pre class="php"><shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"><br /> <!-- Set màu nền --><br /> <solid android:color="#FACC2E"><br /> </solid><br /> <!-- đặt thuộc tính màu và độ rộng của đường viền --><br /> <stroke android:color="#0101DF" android:width="3dp"><br /> </stroke><br /> <!-- các thuộc tính căn chỉnh --><br /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"><br /> </padding><br /> <!-- và đây là bán kính đường tròn ở 4 góc --><br /> <corners android:radius="400dp"><br /> </corners><br /></shape><br /></pre><div class="separator" style="clear: both; text-align: left;">Ở màng hình chính bạn thêm thuộc tính <span style="color: red;">android:background="@drawable/duongvien"</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTfmkNzETgoOGsFmmH8Fx1fBUq4i2ZRrhx0XXsTqfhH9AdrG9sRR-djpN4sCG-bsvsTQoUWVvHBiGvuCMIuqK6Yt7hwxDwST3rs7vuSvHq-X80Mcxgedz-K8LPnW4IyvFlsyi7zVs90zVg/s1600/Screenshot+from+2014-06-01+15:11:16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTfmkNzETgoOGsFmmH8Fx1fBUq4i2ZRrhx0XXsTqfhH9AdrG9sRR-djpN4sCG-bsvsTQoUWVvHBiGvuCMIuqK6Yt7hwxDwST3rs7vuSvHq-X80Mcxgedz-K8LPnW4IyvFlsyi7zVs90zVg/s1600/Screenshot+from+2014-06-01+15:11:16.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Và xêm kết quả</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35tP4lwOsCUb9zhCfxyq7wvUve8HVymESBbuAY5W9aj5v6_gpKLSRA7pyXnNgumAVXxlOUdFHPIHKvGREea8De-HPPZOnlVD5BJfzuTV0APjtkCl0V0OtV5zugIVReQkulW3IKw4nh160/s1600/Screenshot+from+2014-06-01+15:12:15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35tP4lwOsCUb9zhCfxyq7wvUve8HVymESBbuAY5W9aj5v6_gpKLSRA7pyXnNgumAVXxlOUdFHPIHKvGREea8De-HPPZOnlVD5BJfzuTV0APjtkCl0V0OtV5zugIVReQkulW3IKw4nh160/s1600/Screenshot+from+2014-06-01+15:12:15.png" width="262" /></a></div><div class="separator" style="clear: both; text-align: center;"><span style="color: red; font-size: large;"><a href="https://drive.google.com/file/d/0B6aHy9Nd8VFiQzBkb3BFaHpfTXM/edit?usp=sharing" rel="nofollow" target="_blank">DownLoad Source Code</a></span></div><div class="separator" style="clear: both; text-align: left;"><br /></div>

Custom Button trong Android

Trong android các control đều thuộc lớp View. Như TextView, Button, EditText, . . . .Các bạn có thể tùy chình hình dạng, trang trí giao diện...

Read more »