Mempercantik Tombol di Android

Tombol cantik 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
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

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

6 thoughts on “Mempercantik Tombol di Android”

Tinggalin komentar dong!