Mempercantik Tombol di Android

Dalam artikel ini, saya akan membahas teknik untuk mempercantik tombol android. Seperti yang kita tahu, tombol di android itu terasa hambar dan tidak hidup. Jika anda paham dengan teknik membuat style berbasis XML, tentunya membuat tombol custom yang cantik tidaklah jadi masalah, namun bagaimana dengan anda yang tidak punya hobi desain namun ingin membuat tombol cantik diandroid? ternyata diinternet masih banyak orang baik yang berbagi ilmu dan desain serta code yang membuat hidup saya sebagai seorang freelance programmer menjadi lebih mudah. Style yang ada disini bukan buatan saya namun buatan MindFreakerstuff.com. Semua style yang saya jelaskan disini bisa anda download di mindfreakerstuff.com. Disini saya hanya mengajarkan cara memakainya saja.

Berikut ini adalah contoh tombol yang sudah dipercantik

Tombol cantik android

ketiga tombol tersebut mempunyai style warna yang berbeda. Saya akan mencontohkan tombol Exit yang berwarna Orange. Copykan code dbawah ini lalu tempatkan filenya di folder res/drawable-hdpi berinama custom_btn_orange.xml

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" >      <item android:state_pressed="true" >          <shape android:shape="rectangle"  >              <corners android:radius="3dip" />              <stroke android:width="1dip" android:color="#c53e2b" />              <gradient  android:angle="-90"  android:startColor="#a11005" android:endColor="#d62608"  />                     </shape>      </item>     <item android:state_focused="true">          <shape android:shape="rectangle"  >              <corners android:radius="3dip" />              <stroke android:width="1dip" android:color="#c53e2b" />              <solid  android:color="#e0341e"/>                </shape>      </item>      <item >         <shape android:shape="rectangle"  >              <corners android:radius="3dip" />              <stroke android:width="1dip" android:color="#c53e2b" />              <gradient  android:angle="-90"  android:startColor="#ff6c52" android:endColor="#e0341e" />                     </shape>      </item> </selector>

Langkah selanjutnya, tambahkan style ke file res/values/styles.xml

?

source code

01 02 03 04 05 06 07 08 09 10 11 12

<style name="btnStyleOrange" parent="@android:style/Widget.Button">      <item name="android:textSize">15sp</item>      <item name="android:textStyle">bold</item>      <item name="android:textColor">#FFFFFF</item>      <item name="android:gravity">center</item>      <item name="android:shadowColor">#000000</item>      <item name="android:shadowDx">1</item>      <item name="android:shadowDy">1</item>      <item name="android:shadowRadius">0.6</item>      <item name="android:background">@drawable/custom_btn_orange</item>      <item name="android:padding">10dip</item>  </style>

perhatikan baris @drawable/custom_btn_orange, artinya backgroudn dari style ini didapat dari file yang telah kita buat sebelumnya yaitu custom_btn_orange.xml .
Langkah terakhir, terapkan style yang telah kita buat ke button. Dalam contoh ini, saya akan menempatkan di button exit

?

source code

01 02 03 04 05 06 07 08 09 10 11 12

<Button         android:id="@+id/btnExit"         style="@style/btnStyleOrange"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/btnHelp"         android:layout_alignRight="@+id/btnHelp"         android:layout_below="@+id/btnHelp"         android:layout_marginTop="40dp"         android:onClick="klikButton"         android:text="Exit"         android:textColor="#fff" />

Secara default , button menggunakan text warna hitam, agar tampilan text match dengan backround orange, saya ganti teksnya menjadi putih. Nah hasilnya seperti pada gambar. Gimana? seru kan? .