Search code examples
androidandroid-listviewmaterial-designlistviewitemrippledrawable

Ripple effect weird behavior in ListView


I have implemented the ripple effect for each item inside the ListView by using <ripple> element. I got the desired ripple effect when I touch (select) on each item in the ListView. But when I scroll the ListView and then select any item again the ripple disappears very fast (almost unnoticeable). I don't know why the ripple appears nicely on some ListView items and very weird on some.

My customized ripple layout is shown below (ripple_background.xml)

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/light_black_overlay">
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/background_light" />
        </shape>
    </item>
</ripple>

Layout for the item inside ListView

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="48dp"
    android:minHeight="?android:listPreferredItemHeight"
    android:orientation="horizontal"
    android:background="@drawable/ripple_background"> <!--My ripple layout-->

    <TextView
        android:id="@+id/someText
        android... />

    <ImageView
        android:id="@+id/someImage
        android... />

</RelativeLayout>

Has anyone faced this kind of weird ripple effect inside your ListView? Any idea if the ListView's recycling mechanism has to do something with this? Thank you.


Solution

  • Instead of passing ripple effect to each item of your list try this:

    <ListView
            android:id="@+id/yourListView"
            ...
            android:listSelector="@drawable/ripple_background" />