Ripple effect over a RecyclerView item containing ImageView

Question

I have a RecyclerView that expands the following grid item :

<RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_marginLeft="@dimen/children_tile_border"     android:layout_marginTop="@dimen/children_tile_border"     android:clickable="true"     android:focusable="true"     android:background="?selectableItemBackground"     tools:ignore="RtlHardcoded">          <com.example.app.ui.widget.SquareImageView             android:id="@+id/child_picture"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:visibility="visible"             android:layout_alignParentBottom="true"/>          <LinearLayout             android:orientation="vertical"             android:layout_width="match_parent"             android:layout_height="68dp"             android:background="@color/tile_text_background"             android:gravity="center_vertical"             android:layout_alignParentBottom="true">              ..............         </LinearLayout> </RelativeLayout> 

But the ripple effect doesn't appear unless I set the SquareImageView's visibility to invisible. It seems the ripple effect is drawn below the SquareImageView. How can I can I make it drawn over the SquareImageView?

Answer 1

add below code to your parent layout

android:clickable="true" android:focusable="true" android:background="?attr/selectableItemBackground"  

if you want custom ripple effect add this ripple_custom.xml in your drawable-v21

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"     android:color="@color/colorHighlight">      <item         android:id="@android:id/mask"         android:drawable="@color/windowBackground" /> </ripple> 

to support older version add ripple_custom.xml in drawable

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_pressed="true">         <shape android:shape="rectangle">             <solid android:color="@color/colorHighlight" />         </shape>     </item>     <item>         <shape android:shape="rectangle">             <solid android:color="@android:color/transparent" />         </shape>     </item> </selector> 

Answer 2

Change:

android:background="?selectableItemBackground" 

To:

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

And add this to your SquareImageView

android:clickable="false"