Custom Button pada Android Februari 2012 Tingkat: Oleh : Feri Djuandi Pemula Menengah Mahir Platform : Android 2.3, Eclipse Salah satu hal yang menyenangkan dalam membuat sebuah aplikasi Android adalah melakukan kustomisasi pada tampilan di layar. Dengan cara ini pengembang dapat membuat desain hasil karyanya yang unik dan kreatif daripada sekedar tampilan standar yang membosankan. Ada banyak sekali bagian dari tampilan aplikasi Android yang bisa dikustom mulai dari launcher icon, menu, tab, dialog, list view dan sebagainya. Pada artikel kali ini akan dijelaskan teknik untuk mengkustom tombol atau button pada Android dengan menggunakan warna atau gambar buatan sendiri sehingga tampilannya menjadi jauh lebih menarik daripada tombol yang biasa. Mempersiapkan Gambar Langkah pertama adalah mempersiapkan gambar untuk custom button tersebut. Gambar yang perlu dibuat untuk sebuah button harus berjumlah tiga untuk mewakili kondisi normal, mendapatkan focus dan saat ia tertekan. Sebagai contoh berikut ini diperlihatkan tiga buah gambar yang berbeda namun dengan ukuran yang sama untuk mewakili tiga kondisi tersebut. Pastikan ketiga gambar tersebut berformat PNG. CATATAN: Tidak ada aturan yang baku mengenai ukuran sebuah custom button, namun sebagai acuan ukuran tinggi sebuah standard button pada layar berkerapatan menengah (medium density screen) atau MDPI adalah sekitar 32 px. Silakan menggunakan ukuran ini sebagai acuan saat membuat sebuah gambar agar custom button tidak terlalu besar atau terlalu kecil. 1
Membuat Program Setelah ketiga gambar selesai dibuat, sekarang saatnya untuk menulis sebuah program. Program sederhana yang akan dibuat berikut ini akan menampilkan sebuah tombol dengan gambar yang telah dipersiapkan sebelumnya. 1. Jalankan Eclipse dan buat sebuah Android Project baru. 2. Dengan menggunakan Windows Explorer, cari folder res\drawable-mdpi di dalam folder projek tersebut kemudian copy-kan ketiga file gambar ke dalam folder ini. Lakukan hal yang sama untuk dua folder lainnya: res\drawable-ldpi dan res\drawablehdpi. LDPI mewakili layar berkerapatan rendah sedangkan HDPI mewakili layar berkerapatan tinggi. Gambar yang semula dibuat untuk MDPI bisa saja digunakan untuk LDPI dan HDPI, namun idealnya masing-masing layar ini memiliki gambar-gambar dengan ukuran yang disesuaikan. 2
CATATAN: Sebagai acuan, ukuran gambar HDPI adalah 1.5 kali ukuran gambar MDPI; sedangkan ukuran gambar LDPI adalah 0.75 kali ukuran gambar MDPI. MDPI (medium density screen) P = panjang L = lebar LDPI (low density screen) 0.75 * P 0.75 * L HDPI (high density screen) 1.5 * P 1.5 * L 3. Buat sebuah file XML untuk ditempatkan di dalam folder drawable-mdpi dan beri nama sebagai android_button.xml. 3
Ketikkan isi file XML itu sebagai berikut. <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/android_pressed1" android:state_pressed="true" /> <item android:drawable="@drawable/android_focused1" android:state_focused="true" /> <item android:drawable="@drawable/android_normal1" /> </selector> File XML ini mengatur gambar-gambar yang akan ditampilan pada tombol sesuai dengan tiga kondisi yang bersangkutan. 4. Salin file XML di atas ke dalam folder res\drawable-ldpi dan res\drawable-hdpi. 5. Bukan file main.xml dan tambahkan sebuah button. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffffff"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <Button android:id="@+id/mybutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/android_button" /> </LinearLayout> Perhatikan baris android:background="@drawable/android_button", dimana tampilan tombol akan merujuk ke file android_button.xml yang mengatur gambar-gambar yang akan ditampilkan. 4
6. Buka file MainActivity.java dan tambahkan event onclick yang menangani aksi penekanan tombol. Saat tombol ditekan, program akan menampilkan sebuah kotak pesan bertuliskan Beep Bop. package net.houseoflife.custombutton; import android.app.activity; import android.os.bundle; import android.view.view; import android.widget.button; import android.widget.toast; public class MainActivity extends Activity { /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); final Button button = (Button) findviewbyid(r.id.mybutton); button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { // Perform action on clicks Toast.makeText(MainActivity.this, "Beep Bop", Toast.LENGTH_SHORT).show(); } }); } } 7. Simpan semua perubahan dan jalankan program tersebut. Perhatikan bagaimana gambar tombol tersebut akan berubah saat ia ditekan. 5
Hal yang perlu diperhatikan saat mendesain sebuah tombol adalah kemungkinan tombol ini meregang oleh karena kondisi tertentu. Tombol harus mampu mempertahakan bentuknya agar tetap bagus walaupun panjang atau lebarnya ditarik memanjang. Untuk melihat bagaimana bentuk custom button saat ia diregangkan, silakan ikuti langkah berikut ini. 1. Buka file main.xml dan ubah bagian layout_width dari custom button tersebut dari wrap_content menjadi fill_parent.... <Button android:id="@+id/mybutton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/android_button" />... 2. Simpan perubahan dan jalankan kembali. Tampilannya akan tampak seperti berikut ini. Jelek sekali, bukan? Ini artinya custom button tersebut belum didesain dengan baik. Hal seperti ini sangat mungkin terjadi sehingga perlu dilakukan cara untuk menanggulanginya. 6
Mengantisipasi Peregangan Gambar Peregangan sebuah button (baik vertikal maupun horisontal) adalah sesuatu yang tidak bisa dihindari, namun yang bisa dilakukan adalah mengatur bagian mana yang bisa diregang dan bagian mana yang tidak. Sebagai ilustrasi diperlihatkan contoh gambar sebagai berikut. Harus diupayakan agar ada bagian yang bisa dipertahankan tidak berubah bentuknya saat ia diregang. Pada contoh ini area yang diwarnai gelap adalah bagian yang boleh diregangkan sedangkan bagian yang di tengah adalah area yang tidak boleh berubah. Dengan demikian saat gambar ini ditarik memanjang, bagian yang fleksibel akan berubah bentuknya mengikuti ukuran yang diinginkan namun bagian yang statis akan tetap bentuknya. Teknik inilah yang harus diterapkan pada gambar button tersebut agar ada bagian yang bisa tetap dipertahankan bentuknya pada saat ukuran panjang atau lebarnya berubah sehingga button akan tetap tampak bagus dalam berbagai ukuran. SDK Android telah menyediakan sebuah program yang membantu programmer untuk mengatur bagian-bagian gambar yang bisa diregangkan. Program ini bernama Draw 9-patch yang memungkinkan penggunanya membuat grafik NinePatch dengan mudah. 7
1. Dengan Windows Explorer, buka folder tools di dalam folder instalasi SDK Android. Jalankan file bernama draw9patch.bat dan tunggu beberapa saat sampai program tampil. 2. Dengan Windows Explorer, dapatkan salah satu dari tiga gambar custom button tadi kemudian klik dan geser ke dalam window Draw 9-patch tersebut. Silakan menggeser-gesert slider Patch scale untuk melihat efek dari peregangan terhadap gambar tersebut. 8
3. Klik opsi Show patches, kemudian dengan menggunakan penunjuk mouse klik pada tepi-tepi gambar untuk menandai bagian yang boleh direggangkan. Area yang tidak ditandai adalah bagian yang tidak berubah. Lihat preview-nya pada window di bagian kanan bagaimana efek dari pengaturan ini akan membuat gambar jauh lebih baik. SIlakan bandingkan dengan preview sebelumnya. 4. Simpan hasil pengaturan ini dengan nama file yang baru. Ekstensi nama file akan ditambah menjadi 9.PNG. Sebagai contoh jika semula nama file-nya bernama android_normal.png maka selanjutnya ia akan menjadi android_normal.9.png. 5. Silakan lakukan dengan file-file yang lain. 6. Salin file-file 9.PNG ke dalam folder-folder res\drawable-ldpi, res\drawable-mdpi dan res\drawable-hdpi seperti semula dan hapus (atau pindahkan) file-file.png sebelumnya dari folder tersebut. CATATAN: Pastikan file PNG dan 9.PNG untuk gambar yang sama tidak berada di dalam folder drawable karena hal itu akan mengakibatkan error saat dijalankan. 9
Saat program dijalankan kembali, kali ini custom button akan tampil lebih baik. Sumber: http://developer.android.com/resources/tutorials/views/hello-formstuff.html http://developer.android.com/guide/developing/tools/draw9patch.html 10