Set ripple effect on Image View

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"

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)

;

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():

@Overridepublic 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;}