将 Material Design Touch Ripple 应用于 ImageButton？

Question

我有一个图像按钮，当它被点击时不会响应触摸动画，因为它是一个静态图像，不像棒棒糖上的常规按钮，后者带有内置的波纹效果。我想为图像添加 material 设计波纹触摸效果，但似乎找不到实现它的方法。我可以在图像上设置滤色器，但这不是波纹效果。我正在尝试做的一个例子是，当您在 Google 播放音乐中拿着一张专辑封面图片时，阴影波纹会在图片上移动。

Answer 1

您可以像这样向 ImageButton 添加背景：

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />

Answer 2

为了更好的结果：

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

Answer 3

我从 i.shadrin () and Nicolars () 那里得到了很好的答案。

他们答案的区别在于?attr/selectableItemBackgroundBorderless可以给你一个android.view.InflateException，所以?android:attr/selectableItemBackground就是答案。

FWIW，我不知道为什么会出现异常，因为第一个答案在我所有的旧项目中都运行良好，但在我最近的项目中却没有（可能是因为应用程序主题 = android:Theme.Material？）。

发生的奇怪事情是，虽然显示了涟漪效应，但它超出了 ImageButton 的范围，所以解决方案是：

要使用 android:foreground="?android:attr/selectableItemBackgroundBorderless" 而不是 android:background="?android:attr/selectableItemBackgroundBorderless"

如果你遇到同样的情况，希望对你有所帮助。

Answer 4

如果您已有背景并且不想更改它，请使用前景；

<ImageButton
    android:layout_width="60dp"
    android:layout_height="match_parent"
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>

Answer 5

您可以使用具有此属性的 MaterialButton (com.google.android.material.button.MaterialButton) 而不是 ImageButton。 如果您使用 material 个组件。

 <style name="IconOnlyButton">
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>
 </style>

<com.google.android.material.button.MaterialButton
    style="@style/IconOnlyButton"
    app:icon="@drawable/ic_refresh"/>

Answer 6

对我来说，i.shadin 给出的解决方案由于图像原因无法正常工作，将可绘制对象设置为前景是有效的，但在 API 23 之后得到支持。

这是我的解决方案：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/men_img" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnMale"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        app:backgroundTint="@android:color/transparent"
        app:cornerRadius="0dp"
        app:elevation="0dp"
        app:strokeWidth="0dp" />
</FrameLayout>

将 Material Design Touch Ripple 应用于 ImageButton？

Apply Material Design Touch Ripple to ImageButton?

xml

android

imagebutton

material-design

android-5.0-lollipop