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
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
<?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
<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
<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? .
Download source code
Bagi yang ingin mencobanya sendiri, silahkand download project eclipsenya di sini
Sangat bermanfaat pak
Terimakasih, tutorialnya bermanfaat banget …
Kamu butuh tutorial yang menggunakan bahasa Indonesia? Pusing cari dimana? Kunjungi Kumpulan Tutorial Gratis Tutorial berbahasa Indonesia, yang bisa membantu kamu melakukan aktivitas sehari-hari
error gini gmn ya atasinnya ?
Error:(1) Invalid start tag style
linknya rusak bos
mas candra, bagaimana caranya membuat button yg bisa mengkonekan ke bluetooth. ?
bang buat nyari tau arti setiap codingnya gimana???
atau preferencinya di buku apa???
atau website mana???
pemula bang :D hehehhe