www.tobuku.com

1

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.

www.tobuku.com

2

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\drawable-

hdpi. 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.

www.tobuku.com

3

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)

LDPI

(low density screen)

HDPI

(high density screen)

P = panjang

L = lebar

0.75 * P

0.75 * L

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.

www.tobuku.com

4

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.

www.tobuku.com

5

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.

www.tobuku.com

6

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.

www.tobuku.com

7

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.

www.tobuku.com

8

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.

www.tobuku.com

9

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.

www.tobuku.com

10

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