Apply Material Design Touch Ripple to ImageButton?

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

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

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

Solution 4:

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.