如何使带有自定义背景图像的按钮在 Android 中显示点击动画

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

提问by Pritam

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 like shown in google hello views example. Thanks.

如何使用 Android 中的自定义背景图像使按钮显示它被点击（通过设置它向下/一些更改）按钮。我不想包含更多图像并将不同的图像设置为不同的状态，如 google hello views 示例中所示。谢谢。

采纳答案by Steve Haley

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:

使用 ColorFilter 方法可以只处理一个图像文件。但是，ColorFilter 期望使用 ImageViews 而不是 Buttons，因此您必须将按钮转换为 ImageViews。无论如何，如果您使用图像作为按钮，这不是问题，但是如果您有文本，那就更烦人了……无论如何，假设您找到解决文本问题的方法，以下是要使用的代码：

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.).

这将红色覆盖应用于按钮（颜色代码是完全不透明红色的十六进制代码 - 前两位数字是透明的，然后是 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.

您可以通过从您的 sdkfolder/platforms/(android version/data/res/drawable 到您自己的项目中复制 btn_default_normal.9.png 文件来使您的 ImageViews 看起来像普通按钮。然后在您的 ImageView 中使用android:background="@drawable/btn_normal_default"并android:src="..."在按钮。

回答by Praveen

you have to use two images to do this.

你必须使用两个图像来做到这一点。

1. button_normal
2. button_pressed

1. button_normal
2. button_pressed

then create a xml resource in drawable folder

然后在drawable文件夹中创建一个xml资源

<?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.

然后，将此文件设置为 imageview 的背景。这里我们使用 imageview 作为按钮。不要忘记在 drawable 文件夹中包含这两个按钮。就是这样。

回答by Santosh

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>

回答by arianoo

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 保持其背景并且您没有将其设置为 null，它将像普通按钮一样工作，并且将在单击时与其他按钮完全一样显示单击动画。隐藏的方法背景还在的时候：

<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.

填充不会让背景可见并使按钮像其他按钮一样工作。

回答by yaugenka

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

如果你想要默认的按钮点击效果，你可以把你的背景 drawable 放在像下面这样的“涟漪”中。

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

创建 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

添加 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

将 drawable 设置为图像按钮的背景

<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 itemwhich is marked with android:id="@android:id/mask"is used by rippleto transition color from @android:color/background_lightto ?attr/colorControlHighlightwhen the button is pressed.
2. The second itemis the actual background we want for button in normal (unpressed) state.
3. android:inset*sets background margins.

1. 第一item标有android:id="@android:id/mask"用于通过ripple从过渡颜色@android:color/background_light到?attr/colorControlHighlight当按压按钮。
2. 第二个item是我们想要的按钮在正常（未按下）状态下的实际背景。
3. android:inset*设置背景边距。