ripple effect on recyclerview items

Question

I am using

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

to add ripple effect when items of a recyclerview are touched. I do display an action bar when an list item is long clicked. However the that item is not highlighted anymore. I used to have a selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
    <shape>
        <solid android:color="@color/selector"/>
    </shape>
</item>

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/selector"/>
    </shape>
</item>

<item>
    <shape>
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>
</selector>

as background in order to highlight the selected item but because I wanted to have the ripple animation I have gone for the selectableItemBackground stuff. There are some posts here showing how to write a ripple file save in a folder with a 21 file extensions. However the ripple tag is only available with API Level 21 and above. Since I would like to have a brighter device coverage than just api level 21 and above, I was wandering whether there is another to combine my selector with the ripple stuff.

Thanks

score 0 · Answer 1 · answered Apr 21 '16 at 07:32

I have found a nice trick to solve my problem using FrameLayout.

The layout for recyclerview items looks as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:background="@drawable/selector"
    android:orientation="vertical">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_marginLeft="@dimen/activity_horizontal_margin"
                  android:layout_weight="1"
                  android:gravity="center_vertical"
                  android:orientation="vertical">

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:singleLine="true"
            android:textColor="@color/modelTitelColor"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/objects"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:singleLine="true"
            android:textColor="@color/cardview_background"
            android:textStyle="normal"/>
    </LinearLayout>


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="?android:attr/listDivider"/>
</LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/selectableItemBackground"/>
</FrameLayout>

The trick is to set the selector as the background of the inner LinearLayout and to use the famous selectedItemBackground for the view within the FrameLayout.

ripple effect on recyclerview items

1 Answers1