How to make button with custom background image show click animation in Android

How to make button show it is clicked (by setting it go down/some change) for buttons using custom background image in Android. I do not want to include more images and set different one to different states lik开发者_如何学Goe shown in google hello views example. Thanks.

---

you have to use two images to do this.

1. button_normal
2. button_pressed

then create a xml resource in drawable folder

<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="false"
    android:drawable="@drawable/button_normal" />

<item android:state_pressed="true"
    android:drawable="@drawable/button_pressed" />

</selector>

then, set this file as a background for the imageview. here we are using imageview as button. dont forget to include those two buttons in the drawable folder. thats it.

---

It's possible to do with just one image file using the ColorFilter method. However, ColorFilter expects to work with ImageViews and not Buttons, so you have to transform your buttons into ImageViews. This isn't a problem if you're using images as your buttons anyway, but it's more annoying if you had text... Anyway, assuming you find a way around the problem with text, here's the code to use:

ImageView button = (ImageView) findViewById(R.id.button);
button.setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

That applies a red overlay to the button (the color code is the hex code for fully opaque red - first two digits are transparency, then it's RR GG BB.).

You can make your ImageViews look like normal buttons by copying the btn_default_normal.9.png file from your sdkfolder/platforms/(android version/data/res/drawable to your own project. Then in your ImageView use android:background="@drawable/btn_normal_default" and android:src="..." to set an image inside the button.

---

You can create a simple transparent black image, and create a level-list drawable by which u can place the transparent image over the actual image. This gives an effect of pushing it down. You can further use this as an onclick image as shown below.

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/image">
        </item>
        <item android:drawable="@drawable/transparent_image">
        </item>
    </layer-list>
</item>
<item android:drawable="@drawable/image"></item>
</selector>

---

just wanna add another easy way to do this: If your ImageButton remains its background and you don't set it to null, it will work like a normal button and will show the click animation while clicking exactly like other buttons.The way to hide the background while it is still there:

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="1dp"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingTop="1dp"
    android:src="@drawable/squareicon" />

the paddings won't let the background be visible and make the button act like other buttons.

---

If you want the default button click effect, you can put your background drawable inside a `ripple' like below.

The example will produce a button with a border, transparent background and the button default click animation like this

create res/drawable/image_btn_border.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <inset
            android:insetLeft="@dimen/image_btn_insert"
            android:insetTop="@dimen/image_btn_insert"
            android:insetRight="@dimen/image_btn_insert"
            android:insetBottom="@dimen/image_btn_insert">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/background_light" />
                <corners android:radius="@dimen/image_btn_corner_radius" />
            </shape>
        </inset>
    </item>
    <item>
        <inset
            android:insetLeft="@dimen/image_btn_insert"
            android:insetTop="@dimen/image_btn_insert"
            android:insetRight="@dimen/image_btn_insert"
            android:insetBottom="@dimen/image_btn_insert">
            <shape android:shape="rectangle">
                <stroke
                    android:color="?attr/colorButtonNormal"
                    android:width="1dp"/>
                <corners android:radius="@dimen/image_btn_corner_radius" />
            </shape>
        </inset>
    </item>
</ripple>

add to res/values/dimens.xml

<resources>
    <dimen name="image_btn_corner_radius">4dp</dimen>
    <dimen name="image_btn_insert">5dp</dimen>
</resources>

set the drawable as the background of an imagebutton

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/image_btn_border"
    android:contentDescription="@string/action_add_photo"
    app:srcCompat="@android:drawable/ic_menu_camera" />

Details

1. The first item which is marked with android:id="@android:id/mask" is used by ripple to transition color from @android:color/background_light to ?attr/colorControlHighlight when the button is pressed.
2. The second item is the actual background we want for button in normal (unpressed) state.
3. android:inset* sets background margins.