Apply Material Design Touch Ripple to ImageButton?

Question

I have an imagebutton that doesn't respond with a touch animation when it is clicked because it is a static image unlike regular buttons on lollipop which come with the built in ripple effect. I would like to add the material design ripple touch effect to the image but can't seem to find a way to implement it. I can set a color filter over the image but that is not the ripple effect. An example of what I'm trying to do is when you hold an album cover image in Google Play Music and a shadow ripple moves across the image.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

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

Answer 6

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.