Ripple effect over imageview

Question

To describe my problem i created small example.

I have linearlayout with imageview and textview. For linearlayout i\'ve set ripple drawable as background. But when i

Answer 1

Simple use these two lines as attribute in that ImageView.

android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"

Answer 2

Add the ripple like this

android:foreground="?android:attr/selectableItemBackground"

based on this answer https://stackoverflow.com/a/35753159/2736039

Answer 3

If your app needs to run on API < 23, you won't be able to use the foreground attribute on views other than FrameLayout, which means adding another [useless] level in the view tree hierarchy.

Another solution is to wrap your image with a <ripple>, set it as your ImageView's background, and use tint and tintMode to "hide" the src image so the background image that has the ripple over it is visible.

<!-- In your layout file -->

<ImageView
    android:adjustViewBounds="true"
    android:background="@drawable/image_with_ripple"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/image"
    android:tint="@android:color/transparent"
    android:tintMode="src_in" />

<!-- drawable/image_with_ripple.xml -->

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight">

    <item android:drawable="@drawable/image" />

</ripple>

Not only this works on API 21+ but if your image has rounded corners – or is another type of non-rectangle shape, like a star or a heart icon – the ripple will remain in its bounds instead of filling the view's rectangle bounds, which gives a better look in some cases.

See this Medium article for an animated GIF to see how this technique compares to using a <FrameLayout> or the foreground attribute.

Answer 4

Resolve for API < 21

 <ImageView
            android:id="@+id/favorite_season"
            style="?android:attr/borderlessButtonStyle"
            android:background="?android:attr/selectableItemBackground"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_margin="22dp"
            android:clickable="true"
            android:focusable="true"
            android:src="@drawable/ic_star"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

Answer 5

Add android:background="@null" for the ImageView