Android Image Button Selector.

Normally, I have seen many blog showing how to add simple,nice and distinct image button selector i.e selection states for image button in android. But i am unable to find resources regarding image button selector which has selection states with background and image icon it self. I have recently implement such type of image button selector in my app

Basically, i use layer-list with in selector. First layer for the background and second layer for image button. here is how i did.
1. create xml file in res/color folder which should like the following.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"><layer-list>
<item><shape>
<solid android:color="#A9EFD5" />
</shape></item>
<item android:left="5dp" android:right="5dp"><bitmap android:gravity="center" android:src="@drawable/icon_message_list_hover" />
</item>
</layer-list></item>
<item><layer-list>
<item><shape>
<solid android:color="@android:color/transparent" />
</shape></item>
<item android:left="5dp" android:right="5dp"><bitmap android:gravity="center" android:paddingLeft="5dip" android:paddingRight="5dip" android:src="@drawable/icon_message_list" />
</item>
</layer-list></item>

</selector>

2. use this selector to the background of ImageButton like

<ImageButton
        android:id="@+id/imageBbtton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      
        android:layout_marginBottom="6dp"
        android:layout_marginTop="3dp"
        android:background="@color/message_icon_selector"
        android:padding="10dp"
         />

output will be
ImageButton in normal case

normal

ImageButton on pressed

Note background and image(lil bit dark in color in comparison to normal state ) has been changed.

pressed

You can Download the code from github


Advertisements

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