Android – ImageButton onClick change color

androidimagebutton

I'm creating an ImageButton like so:

          <ImageButton
                android:id="@+id/one"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.333"
                android:adjustViewBounds="true"
                android:background="@null"
                android:contentDescription="@string/description_image_button_one"
                android:scaleType="fitEnd"
                android:src="@drawable/dialpad_1" />

I would like to implement a way to have the button flash or change color when clicked/pressed just to identify that it as been clicked. I know I can reference the background as a drawable with a selector of state_pressed to a certain color. I'm trying to avoid making a separate xml file for each button in the drawable. What's the best way of doing this without creating all those extra xml files?

Best Answer

You need to create custom drawable selectors for your button background.

This file will live in your XML folder, and look something like this (each element describes the button background when in different selected states):

File would be named: res/drawable/my_custom_selector.xml 

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/blue_button_on"
        android:state_focused="true"
        android:state_pressed="true"/>
    <item
        android:drawable="@drawable/blue_button_on"
        android:state_focused="false"
        android:state_pressed="true"/>
    <item
        android:drawable="@drawable/blue_button_off"
        android:state_focused="true"
        android:state_pressed="false"/>
    <item
        android:drawable="@drawable/blue_button_off"
        android:state_focused="false"
        android:state_pressed="false"/>
</selector>

Then to apply that background to your ImageView (or any View), just set it as the background:

 <ImageButton
                android:id="@+id/one"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.333"
                android:adjustViewBounds="true"
                android:background="@drawable/my_custom_selector"
                android:contentDescription="@string/description_image_button_one"
                android:scaleType="fitEnd"
                android:src="@drawable/dialpad_1" />
Related Topic