Tutorial – Custom Button Background

Android benar-benar mensuport customize pada widgetnya (view). Ini membuat tampilan aplikasi android sangat beragam. Namun begitu, saat kita mengcustom sebuah view, sebagai contoh mengganti background button, maka seluruh background untuk button state (selected, pressed dll) akan dioveride dengan gambar yang kita pakai sehingga kita harus menetapkan setiap background untuk setiap state ( ini untuk membuat button lebih manusiawi, karena jika tidak, maka user akan kebingungan apakah button itu dalam keadaan terklik atau tidak).

Sebenarnya bisa saja kita mensetting semua itu dari file java nya, tapi tentu akan menyita banyak usaha dan tenaga, apalagi jika kita banyak menggunakan button. Untungnya android dipersenjatai dengan keunggulan xml. Kita dapat mengatur semua state tersebut langsung dari file xml yang sudah kita siapkan sebelumnya. Untuk membuatnya, silahkan simak tutorial berikut.

Pertama, siapkan tiga buah gambar background button untuk mempresentasikan state dari button. Simpan gambar-gambar tersebut dalam folder res/drawable/ . Sebagai bahan contoh, silahkan gunakan gambar dibawah ini ( simpan nama sesuai caption).

default

default.png

press

press.png

select

select.png

Kemudian buat file xml baru di direktori res/drawable, simpan dengan nama custome_button.xml. Masukkan kode berikut.



    
    
    

File xml yang kita buat merepresentasikan sebuah drawable resource, yang akan merubah gambarnya sesuai dengan button state saat ini. <item> pertama yang kita definisikan dalam xml, press.png akan digunakan jika button dalam keadaan di klik. <item> kedua, select.png digunakan pada saat button menerima focus ( jika button dipilih dengan trackball atau dpad ). dan <item> terakhir, default.png digunakan saat button normal atau tidak mendapat event apa-apa. Xml ini sekarang merupakan representasi sebuah drawable dan jika direferensi oleh button sebagai background, maka gambarnya akan berubah sesuai ketiga state yang didefinisikan.

NB: urutan elemen sangat penting, buat seperti contoh.

Terakhir, buka xml layout yang dipakai (misal main.xml). Tambahkan sebuah Button dan definisikan backgroundnya sesuai nama xml drawable kita. Perhatikan contoh di bawah



		

Jalankan aplikasi, coba test pada button dengan mengkliknya. Jika gambar berubah, maka xml yang kita buat sudah sesuai.
:selamat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>