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

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

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

Categories: Android Dev

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

7 Comments

Nafisya · 27 February , 2018 at 9:35 pm

Sangat bermanfaat pak

sinta · 8 January , 2016 at 2:53 pm

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

bryan · 29 September , 2015 at 8:41 pm

error gini gmn ya atasinnya ?

    bryan · 29 September , 2015 at 8:41 pm

    Error:(1) Invalid start tag style

rahmat · 29 March , 2015 at 1:17 pm

linknya rusak bos

robet · 14 March , 2015 at 9:29 am

mas candra, bagaimana caranya membuat button yg bisa mengkonekan ke bluetooth. ?

januar aji nugroho · 12 January , 2015 at 10:11 am

bang buat nyari tau arti setiap codingnya gimana???
atau preferencinya di buku apa???
atau website mana???
pemula bang :D hehehhe

Comments are closed.