将材质设计触摸波纹应用于图像按钮? ？

我有一个图像按钮，它不响应触摸动画当它被点击，因为它是一个静态图像不像普通的棒棒糖按钮，来与内置的涟漪效果。我想添加材质设计涟漪触摸效果的图像，但似乎无法找到一种方式来实现它。我可以设置一个颜色过滤器的图像，但这不是涟漪效应。我正在尝试做的一个例子是，当你在谷歌播放音乐专辑封面图像和一个影子涟漪移动整个图像。

58337 次浏览
小开

You can just add a background to your ImageButton like this :

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/btn_dialog"
android:background="?android:attr/selectableItemBackground" />
小开
最佳答案

For even better result: 

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

I got good answers from i.shadrin (here) and Nicolars (here).

The difference between their answers is that ?attr/selectableItemBackgroundBorderless can give you an android.view.InflateException, so the ?android:attr/selectableItemBackground is the solution.

FWIW, I do not know why the exception happens, because the first answer worked fine in all my old projects, but in my recent project not (maybe because the app theme = android:Theme.Material?).

The strange thing that was happening is that though the ripple effect was shown it was out-bounding the ImageButton, so the solution is:

  • To use the android:foreground="?android:attr/selectableItemBackgroundBorderless" instead of android:background="?android:attr/selectableItemBackgroundBorderless"

Hope it help you if you are facing the same.

小开

If you already have a background and don't want to change it, use foreground;

<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"/>
小开

You can use MaterialButton (com.google.android.material.button.MaterialButton) instead of ImageButton with this properties. If you use material components.

 <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"/>
小开

For me solution given by i.shadin was not working because of image, setting the drawable as foreground was working but it's supported after API 23.

Here is My Solution:

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

提交答案