Using ?selectableItemBackground with a white background color

Question

I've always been using android:background="?selectableItemBackground" for a ripple effect when a view (a LinearLayout for example) is clicked. I think I read somewhere that this is backwards compatible to API 14.

However, I've found that I need to use this ripple effect but with a white background. Specifically, I have a layout for a list item that will be displayed on the default color background (I'm extending from Theme.AppCompat.Light.NoActionBar), so I want the list item to stand out from this background by coloring the list item plain white (#FFFFFF).

Here is the list item layout:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:background="?selectableItemBackground"     android:layout_width="match_parent"     android:layout_height="wrap_content">      ...      <LinearLayout         android:orientation="vertical"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:gravity="center_vertical"         android:paddingLeft="@dimen/mdu_keyline_1"         android:paddingRight="@dimen/mdu_keyline_1"         android:paddingTop="@dimen/mdu_padding_normal"         android:paddingBottom="@dimen/mdu_padding_normal">          ...      </LinearLayout>  </FrameLayout> 

The above produces the ripple effect without the white background.

If I try:

<FrameLayout ...     android:background="@color/white"> 

This obviously produces a white background but without the ripple effect.

I also tried something else - and this produced a result closest to what I am looking for:

<FrameLayout ...     android:background="@color/white">      ...      <LinearLayout ...         android:background="?selectableItemBackground"> 

The above gave me the white background with a ripple effect. However, the ripple always seems to start from the center regardless of which part of the item I click.

Here are some screenshots showing the current result (ignore the shadow at the top of the list items - this is the shadow from the AppBarLayout and Toolbar I am using).

How could I achieve the desired effect?

Answer 1

You can use the foreground of your FrameLayout :

<FrameLayout ...     android:background="@android:color/white"     android:foreground="?attr/selectableItemBackground"> 

Answer 2

You can create a layer-list in your drawables folder, and set this to your background:

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     <item android:drawable="@android:color/white"/>     <item android:drawable="?attr/selectableItemBackground"/> </layer-list>