RSS

Membuat Button Roll-over

04 May

Yak, hari ini gw bikin tutorial yang singkat aja, yaitu custom button dengan efek roll-over,
Button di Android pada default nya memang sudah rollover yaitu jika di-klik akan berganti warna. Akan tetapi, jika background button kita ganti dengan menggunakan <android:background=”@drawable…….”> biasa, maka tidak akan ada efek roll-over, jadi jika di klik ataupun difokus, button tidak akan berubah warna.

Nah, di tutorial ini bakal gw jelasin gimana caranya bikin background button berubah saat di klik.
Singkat aja, gw jadi bakal jelasin yang di bagian xml nya aja,,

oke, jadi pertama-tama kita bikin namanya selector, nantinya selector ini akan jadi pengganti drawable background kita nantinya,

button_selector.xml:

<?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/onclick" /> <!-- pressed -->
     <item android:drawable="@drawable/default" /> <!-- default -->
 </selector>

oke, gw jelasin dikit, pada android:state_pressed=’true’ adalah item dimana state sebuah button sedang di pressed, alias tangan pengguna sedang diatas button, sedangkan yang item biasa adalah icon default saat button sedang idle, jadi, kita perlu menyiapkan 2 gambar drawable yang digunakan sebagai background button,
jadi coding di layout xml nya jadi:

<LinearLayout
  	android:orientation="horizontal"
  	android:layout_width="fill_parent"
  	android:layout_height="wrap_content">
             <Button 
	  		android:id="@+id/login_btn_fb"
	  		android:layout_width="fill_parent"
	  		android:layout_height="wrap_content"
                	android:background="@drawable/button_selector"/>
</LinearLayout>

finish, gampang kan?? ^^
semoga berguna..

 
1 Comment

Posted by on May 4, 2011 in Tutorial Beginner

 

One response to “Membuat Button Roll-over

  1. teddy

    June 23, 2011 at 3:27 pm

    nice info gan!!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: