CODEWITHSUNDEEP
androidandroid-styles
Farbod Salamat-Zadeh
Farbod Salamat-Zadeh

Reputation: 20080

Using ?selectableItemBackground with a white background color

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).

enter image description here

enter image description here

How could I achieve the desired effect?

Upvotes: 51

Views: 33131

Answers (4)

Pierre
Pierre

Reputation: 9052

The other answers does work somewhat, but the following only works best for me:

In styles.xml add colorControlHighlight 

  <style name="ExampleTheme" parent="Theme.AppCompat">
    <item name="colorAccent">...</item>
    <item name="colorPrimary">...</item>
    <item name="colorPrimaryDark">...</item>
    ...
    <item name="colorControlHighlight">@color/purple_bg</item> <-- THIS LINE
    ...
  </style>

</resources>

In colors.xml add color of your choice with a bit of alpha #77632E8E

<?xml version="1.0" encoding="UTF-8" ?>
<resources>

  <color name="purple_bg">#77632E8E</color>

</resources>

In AndroidManifest.xml set the theme on your activity (all of them)

<activity android:name=".MainActivity"
      ...
      android:theme="@style/ExampleTheme"
      ... />

In the Activity's layout main_layout.xml set the android:background on the view you want the effect on:

<LinearLayout
    android:id="@+id/llBlock"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="?attr/selectableItemBackgroundBorderless">
    ....
</LinearLayout>

Both ?attr/selectableItemBackground and ?attr/selectableItemBackgroundBorderless works

Upvotes: 6

Teovald
Teovald

Reputation: 4389

Ripple drawable is a LayerDrawable . So the right way to do this is : 

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">

    <item>
        <shape>
            <solid
                android:color="#FFFFFF"/>
        </shape>
    </item>

    <item android:id="@android:id/mask">
        <shape>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

</ripple>

Upvotes: 5

Marcel50506
Marcel50506

Reputation: 1300

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>

Upvotes: 37

pdegand59
pdegand59

Reputation: 13029

You can use the foreground of your FrameLayout : 

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

Upvotes: 110

Related Questions