www.tobuku.

com

Custom Button pada Android

Februari 2012 Oleh : Feri Djuandi Platform : Android 2. ! "#li$%e
Tingkat:

Pemula Menengah Mahir

&alah %atu hal 'ang men'enangkan dalam membuat %ebuah a$lika%i Android adalah melakukan ku%tomi%a%i $ada tam$ilan di la'ar. Dengan #ara ini $engembang da$at membuat de%ain ha%il kar'an'a 'ang unik dan kreatif dari$ada %ekedar tam$ilan %tandar 'ang membo%ankan. Ada ban'ak %ekali bagian dari tam$ilan a$lika%i Android 'ang bi%a diku%tom mulai dari launcher icon, menu, tab, dialog, list view dan %ebagain'a. Pada artikel kali ini akan dijela%kan teknik untuk mengku%tom tombol atau button $ada Android dengan menggunakan (arna atau gambar buatan %endiri %ehingga tam$ilann'a menjadi jauh lebih menarik dari$ada tombol 'ang bia%a.

Mempersiapkan Gambar
)angkah $ertama adalah mem$er%ia$kan gambar untuk #u%tom button ter%ebut. *ambar 'ang $erlu dibuat untuk %ebuah button haru% berjumlah tiga untuk me(akili kondi%i normal! menda$atkan fo#u% dan %aat ia tertekan. &ebagai #ontoh berikut ini di$erlihatkan tiga buah gambar 'ang berbeda namun dengan ukuran 'ang %ama untuk me(akili tiga kondi%i ter%ebut.

Pa%tikan ketiga gambar ter%ebut berformat PNG.

CATATAN: Tidak ada aturan 'ang baku mengenai ukuran %ebuah #u%tom button! namun %ebagai a#uan ukuran tinggi %ebuah %tandard button $ada la'ar berkera$atan menengah +medium density screen, atau MDP- adalah %ekitar 32 px. &ilakan menggunakan ukuran ini %ebagai a#uan %aat membuat %ebuah gambar agar #u%tom button tidak terlalu be%ar atau terlalu ke#il.

www.tobuku.com

Membuat Program
&etelah ketiga gambar %ele%ai dibuat! %ekarang %aatn'a untuk menuli% %ebuah $rogram. Program %ederhana 'ang akan dibuat berikut ini akan menam$ilkan %ebuah tombol dengan gambar 'ang telah di$er%ia$kan %ebelumn'a. 1. .alankan Eclipse dan buat %ebuah Android Project baru.

2. Dengan menggunakan /indo(% "0$lorer! #ari folder res\drawable-mdpi di dalam folder $rojek ter%ebut kemudian #o$'1kan ketiga file gambar ke dalam folder ini. )akukan hal 'ang %ama untuk dua folder lainn'a: res\drawable-ldpi dan res\drawablehdpi. )DP- me(akili la'ar berkera$atan rendah %edangkan 2DP- me(akili la'ar berkera$atan tinggi. *ambar 'ang %emula dibuat untuk MDP- bi%a %aja digunakan untuk )DP- dan 2DP-! namun idealn'a ma%ing1ma%ing la'ar ini memiliki gambar1gambar dengan ukuran 'ang di%e%uaikan.

www.tobuku.com

CATATAN: &ebagai a#uan! ukuran gambar 2DP- adalah !" kali ukuran gambar MDP-3 %edangkan ukuran gambar )DP- adalah #!$" %ali ukuran gambar MDP-. &'P( )medi*m densit+ screen, P 4 $anjang ) 4 lebar -'P( )low densit+ screen, 0.56 7 P 0.56 7 ) .'P( )hi/h densit+ screen, 1.6 7 P 1.6 7 )

. 8uat %ebuah file 9M) untuk ditem$atkan di dalam folder drawable-mdpi dan beri nama %ebagai android0b*tton!xml.

www.tobuku.com

;etikkan i%i file 9M) itu %ebagai 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 9M) ini mengatur gambar1gambar 'ang akan ditam$ilan $ada tombol %e%uai dengan tiga kondi%i 'ang ber%angkutan. :. &alin file 9M) di ata% ke dalam folder res\drawable-ldpi dan res\drawable-hdpi.

6. 8ukan file main!xml dan tambahkan %ebuah 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 bari% <android:ba#kground4=>dra(able?android@button=! dimana tam$ilan tombol akan merujuk ke file android@button.0ml 'ang mengatur gambar1gambar 'ang akan ditam$ilkan.

www.tobuku.com

A. 8uka file &ainActi1it+!ja1a dan tambahkan event onClic% 'ang menangani ak%i $enekanan tombol. &aat tombol ditekan! $rogram akan menam$ilkan %ebuah kotak $e%an bertuli%kan <8ee$ 8o$B.
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(); } }); } }

5. &im$an %emua $erubahan dan jalankan $rogram ter%ebut.

Perhatikan bagaimana gambar tombol ter%ebut akan berubah %aat ia ditekan.

www.tobuku.com 2al 'ang $erlu di$erhatikan %aat mende%ain %ebuah tombol adalah kemungkinan tombol ini meregang oleh karena kondi%i tertentu. Tombol haru% mam$u mem$ertahakan bentukn'a agar teta$ bagu% (alau$un $anjang atau lebarn'a ditarik memanjang. Cntuk melihat bagaimana bentuk #u%tom button %aat ia diregangkan! %ilakan ikuti langkah berikut ini. 1. 8uka file main!xml dan ubah bagian la+o*t0width dari #u%tom button ter%ebut dari (ra$@#ontent menjadi 2ill0parent.
... <Button android:id="@+id/mybutton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/android_button" /> ...

2. &im$an $erubahan dan jalankan kembali. Tam$ilann'a akan tam$ak %e$erti berikut ini.

.elek %ekali! bukanD -ni artin'a #u%tom button ter%ebut belum dide%ain dengan baik. 2al %e$erti ini %angat mungkin terjadi %ehingga $erlu dilakukan #ara untuk menanggulangin'a.

www.tobuku.com

Mengantisipasi Peregangan Gambar

Peregangan %ebuah button +baik Eertikal mau$un hori%ontal, adalah %e%uatu 'ang tidak bi%a dihindari! namun 'ang bi%a dilakukan adalah mengatur bagian mana 'ang bi%a diregang dan bagian mana 'ang tidak. &ebagai ilu%tra%i di$erlihatkan #ontoh gambar %ebagai berikut.

2aru% diu$a'akan agar ada bagian 'ang bi%a di$ertahankan tidak berubah bentukn'a %aat ia diregang. Pada #ontoh ini area 'ang di(arnai gela$ adalah bagian 'ang boleh diregangkan %edangkan bagian 'ang di tengah adalah area 'ang tidak boleh berubah.

Dengan demikian %aat gambar ini ditarik memanjang! bagian 'ang flek%ibel akan berubah bentukn'a mengikuti ukuran 'ang diinginkan namun bagian 'ang %tati% akan teta$ bentukn'a.

Teknik inilah 'ang haru% ditera$kan $ada gambar button ter%ebut agar ada bagian 'ang bi%a teta$ di$ertahankan bentukn'a $ada %aat ukuran $anjang atau lebarn'a berubah %ehingga button akan teta$ tam$ak bagu% dalam berbagai ukuran. SDK Android telah men'ediakan %ebuah $rogram 'ang membantu $rogrammer untuk mengatur bagian1bagian gambar 'ang bi%a diregangkan. Program ini bernama 'raw 3-patch 'ang memungkinkan $enggunan'a membuat grafik NinePatch dengan mudah.

www.tobuku.com 1. Dengan /indo(% "0$lorer! buka folder tools di dalam folder in%tala%i &D; Android. .alankan file bernama draw3patch!bat dan tunggu bebera$a %aat %am$ai $rogram tam$il.

2. Dengan /indo(% "0$lorer! da$atkan %alah %atu dari tiga gambar #u%tom button tadi kemudian klik dan ge%er ke dalam (indo( <Dra( G1$at#hB ter%ebut.

&ilakan mengge%er1ge%ert slider Patch scale untuk melihat efek dari $eregangan terhada$ gambar ter%ebut.

www.tobuku.com . ;lik o$%i 4how patches! kemudian dengan menggunakan $enunjuk mou%e klik $ada te$i1te$i gambar untuk menandai bagian 'ang boleh direggangkan. Area 'ang tidak ditandai adalah bagian 'ang tidak berubah. )ihat preview1n'a $ada (indo( di bagian kanan bagaimana efek dari $engaturan ini akan membuat gambar jauh lebih baik. &-lakan bandingkan dengan preview %ebelumn'a.

:. &im$an ha%il $engaturan ini dengan nama file 'ang baru. "k%ten%i nama file akan ditambah menjadi 3!PNG. &ebagai #ontoh jika %emula nama file1n'a bernama android@normal.$ng maka %elanjutn'a ia akan menjadi android@normal.G.$ng. 6. &ilakan lakukan dengan file1file 'ang lain. A. &alin file1file 3!PNG ke dalam folder1folder re%Hdra(able1ld$i! re%Hdra(able1md$i dan re%Hdra(able1hd$i %e$erti %emula dan ha$u% +atau $indahkan, file1file .PI* %ebelumn'a dari folder ter%ebut.

CATATAN: Pa%tikan file PI* dan G.PI* untuk gambar 'ang %ama tidak berada di dalam folder dra(able karena hal itu akan mengakibatkan error %aat dijalankan.

www.tobuku.com

&aat $rogram dijalankan kembali! kali ini #u%tom button akan tam$il lebih baik.

4*mber: htt$:??deEelo$er.android.#om?re%our#e%?tutorial%?Eie(%?hello1form%tuff.html htt$:??deEelo$er.android.#om?guide?deEelo$ing?tool%?dra(G$at#h.html

10