List view set a custom ripple selector

Question

I'm trying to use a list view control on Lollipop under the following conditions:

1. The theme type is the default Theme.Material (dark theme).
2. The list view is contained inside of larger layout which has a white background.
3. The list view should have a list selector that appears with the white background.

NOTE: I am forced to use a custom list selector color because if I use a white background, the dark material themed selector uses the theme's colorControlHighlight color for the ripple, which is 40ffffff, and does not show up.

I first tried the following:

layout xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@android:color/white" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:listSelector="@drawable/list_selector" />

</LinearLayout>

list_selector xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ff0000" >

</ripple>

And list view row xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    tools:ignore="UseCompoundDrawables" >

    <ImageView
        android:id="@+id/list_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/list_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

What I am expecting to see is when I select an item, the item is selected with a ripple colored as #ff0000. However, this is what I end up seeing:

What I am hoping for is somewhat close to this behavior - but confined within the selected list row! What am I doing wrong?

Thanks, Zach

Chaunceychaunt

Answer 1

You're using an unbounded ripple, e.g. a ripple with no content or mask layer, so the ripple is projecting onto the background of its parent ListView. You should set a mask layer to constrain the ripple bounds.

res/drawable/my_list_selector.xml:

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

Sunderland

Thanks Alanv! Another great response today (you helped me with another ripple question earlier!). Greatly appreciated. – Chaunceychaunt

What is @id/mask? Do I need to define it somewhere else? – Tetra

That should be @android:id/mask. Fixed the code sample. – Sunderland

join to grateful people) Thanks, alanv – Newman