Binoy Babu Binoy Babu - 2 months ago 18
Android Question

Ripple effect over a RecyclerView item containing ImageView

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

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>
Comments