Cara 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 s
aya sebagai seorang freelanceprogrammer 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

<?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

<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 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> </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

<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? .