Apply Touch Ripple Material Design to ImageButton?

Question

I have an image button that does not respond to animation when pressed, because it is a static image, unlike ordinary buttons on a lollipop, which have a built-in ripple effect. I would like to add the effect of creating the effect of contact of the material to the image, but it seems that I can not find a way to implement it. I can set the color filter according to the image, but this is not a ripple effect. An example of what I'm trying to do is when you hold the cover art of an album cover on Google Play Music and a shadow ripple moves around the image.

Answer 1

For even better results:

<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 simply add the background to your ImageButton as follows:

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

Answer 3

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

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

FWIW, I don’t know why the exception occurs because the first answer worked perfectly in all my old projects, but not in my recent project (maybe because of the application theme = android:Theme.Material ?).

The strange thing that was happening is that although the ripple effect was shown, it did not limit ImageButton, so the solution:

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

Hope it helps you if you come across the same.

Answer 4

Or, alternatively, if you are using API 21+, use backgroundTint :

 <ImageButton android:backgroundTint="@color/white" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_button" style="@style/Widget.AppCompat.ImageButton"/>