Set ripple effect on Image View

Question

Got the following Image View:

<ImageView
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" 
    android:clickable="true"
    android:focusable="true"
    android:background="?android:attr/selectableItemBackground"/>

Ripple works great if I don't set a bitmap to the image view. But once I set a bitmap like this, ripple effect is gone:

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);

This is my ripple.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

I guess that the bitmap hides the ripple effect, how can I make it visible? Already tried:

1. Changing android:background to android:foreground, which didn't work.
2. Configuring another transparent ImageView on top of this one, but since it was transparent ripple wasn't shown.

Any ideas? I've seen Lollipop Contacts made this as well.

Answer 1

For lazy people like me:

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

And customize the ripple color in your style.

in values/styles.xml

<style name="colorControlHighlight_blue">
   <item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>

Then, in your fragment before inflation in onCreateView():

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
   View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
   return view;
}

Answer 2

I have an image gallery (built with a RecyclerView and a GridLayoutManager). The image is set using Picasso. To add a ripple to the image I've wrapped the ImageView with a FrameLayout. The item layout is:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:foreground="@drawable/ripple"
    android:clickable="true"
    android:focusable="true"
    >
    <ImageView
        android:id="@+id/grid_item_imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        />
</FrameLayout>

Note the android:foreground. It's not the same as android:background. I've tried without android:clickable="true" and android:focusable="true" and it also works, but it doesn't hurt.

Then add a ripple.xml drawable into res/drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#7FF5AC8E" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

Note that this shows a semi-transparent color on top of the image when the item is selected (for devices with version older than Android 5.0). You can remove it if you don't want it.

Then add the ripple.xml drawable with ripple into res/drawable-v21:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/coral">
</ripple>

You can use the default ripple effect instead of the custom ripple.xml, but it's really difficult to see on top of an image because it's grey:

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

Answer 3

With a circular effect try this :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorTema3"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPurpleBarra" />
    </shape>
</item>
<item
    android:id="@android:id/background"
    android:drawable="@android:color/transparent" />

Answer 4

You can achieve it,wrapping the drawable in a RippleDrawable.

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.

RippleDrawable rippledImage = new   
         RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)

;