Custom Button pada Android

www.tobuku.com
Custom Button pada Android
Tingkat:
Februari 2012
Oleh
: Feri Djuandi
Platform
√
Pemula
Menengah
Mahir
: 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
www.tobuku.com
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
www.tobuku.com
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
LDPI
HDPI
(medium density screen)
(low density screen)
(high density screen)
P = panjang
0.75 * P
1.5 * P
L = lebar
0.75 * L
1.5 * L
3. Buat sebuah file XML untuk ditempatkan di dalam folder drawable-mdpi dan beri nama
sebagai android_button.xml.
3
www.tobuku.com
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
www.tobuku.com
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
import
import
import
import
android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.Button;
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
www.tobuku.com
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
www.tobuku.com
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
www.tobuku.com
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
www.tobuku.com
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
www.tobuku.com
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