Membuat Custom Button Android Eclipse, Android Studio

Postingan pertama kali ini akan di isi sedikit tutorial mengenai pemrograman android. Bagi kalian yang ingin membuat atau mungkin sedang dalam proyek menyelesaikan salah satu aplikasi android, maka tutorial "styling button" kali ini patut untuk anda simak. Kenapa perlu melakukan "styling button"? Pasti kalian pun sudah tau jawabannya, karena penampilan dari suatu aplikasi yang rapi dan elegan akan membuat si pengguna nantinya lebih betah dalam menggunakan aplikasi yang kita hasilkan. Jadi ketika membuat aplikasi pastikan anda memiliki daya kreatifitas untuk menyusun berbagai elemen agar proporsional dan pas di pandang. Ini akan menjadi sangat penting lagi apabila yang anda develop adalah sebuah game, maka tantangan untuk anda adalah membuat tampilan yang menawan di game anda. Kembali pada "styling button", sebenarnya dengan memberikan background pada button sudah menjadikan aplikasi anda menarik. Namun nampaknya akan masih kurang, karena gambar button yang anda miliki akan bersifat statis (tidak dapat berubah - ubah), tentunya itu akan membosankan dan terlihat buruk. Untuk itu maka anda dapat menbuat sebuah custom button berupa selector yang nantinya dapat memanggil gambar yang berbeda - beda di setiap kondisinya. Anda dapat membuat gambar yang berbeda - beda dan menampilkannya jika tombol aktif, tombol ditekan (press) atau tombol dalam keadaan mati (disable). Oke sekarang mari kita coba membuatnya.

Pertama yang harus anda lakukan adalah menyiapkan 3 gambar tombol, yang pertama adalah tombol untuk keadaan aktif, kedua adalah tombol untuk keadaan disable, dan yang terakhir adalah tombol dalam keadaan pressed. Semua button hendaknya bertype PNG, sebenarnya type JPG pun bisa, namun jika file JPG maka anda tidak bisa mengaturnya menjadi transparan. Sedikit trik di sini, jika anda ikin menyembunyikan tombol disable maka buatlah gambar button PNG kosong (transparant). Setelah menyiapkan 3 gambar tersebut, buatlah sebuah folder bernama "drawable" di folder "res". Kemudian letakkan (Paste) ketiga gambar yang sudah anda siapkan tadi di folder "drawable". Lalu klik kanan di folder drawable, Pilih NEW -> Android XML File. Akan muncul dialog, silahkan beri nama semisal "button_mulai" dan pilih root elemennya "selector", lalu klik "Finish".

Sekarang anda sudah mempunyai 3 gambar button dan 1 file xml bernama "button_mulai.xml", selanjunya adalah memanggil ketiga button tersebut dalam kondisi yang berbeda beda. Semua kode di button_mulai.xml akan menjadi seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<selector
 xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button_mulai_press" />
    <item android:state_enabled="false" android:drawable="@drawable/button_mulai_disable" />
    <item android:state_focused="true" android:drawable="@drawable/button_mulai_aktif" />
    <item android:drawable="@drawable/button_mulai_aktif" />
</selector>

Ada 4 item di atas, silahkan cermati. Untuk item yang pertama adalah button_mulai_press dengan kondisi 'android:state_pressed="true"', artinya jika tombol "button_mulai" ditekan maka akan menghasilkan result true, dan button_mulai_press.PNG akan ditampilkan. Mudah bukan? Sedangkan item yang kedua adalah button_mulai_disable yang akan dijalankan jika kondisi 'state_enabled="false"' terpenuhi. Nah, untuk item yang 3 dan 4 pasti kalian sudah mengetahuinya. Begitu mudahnya untuk membuat tombol di aplikasi anda menjadi menawan, tentunya ini masih merupakan tahap awal ketika anda berbicara mengenai styling android layout. Next, tutorial ini akan dibuat dalam versi video agar lebih mudah di ikuti. Terimakasih, keep learn and share!

baghuzx Wednesday, August 12, 2015 Android tutorial