How to Modify Ripple Color When Using Attr/Selectableitembackground as Background

How can I modify ripple color when using ?attr/selectableItemBackground as background?

Finally I find the solution: instead of using android:colorControlHighlight directly in theme SelectableItemBackground, I should write another style:

<style name="SelectableItemTheme">
    <item name="colorControlHighlight">@color/ripple_color</item>
</style>

Then:

<style name="SelectableItemBackground">
    <item name="android:theme">@style/SelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

Finally add style="@style/SelectableItemBackground" to View in layout.xml.

UPDATED ON 2016/8/26
After N's release, I found that sometimes we cannot use this method to set ripple color for some kind of View(for example, the CardView). Now I highly recommend developers using RippleDrawable, which can also be declared in xml. Here is an example:

I want to show a ripple effect when user touches/clicks a CardView above API21, and of course there should be another kind of feedback before Lollipop. So I should write:

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/selectable_item_background"/>

and selectable_item_background in drawable folder:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:drawable="@color/color_clicked" />
</selector>

selectable_item_background in drawable-v21 folder:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ripple_black" />
</selector>

finally, the ripple_black in drawable(or drawable-v21) folder:

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/color_clicked"
    tools:ignore="NewApi" /> <!--you can remove this line if it's in v21 folder-->

That's it. For other views, maybe you should use android:background="@drawable/selectable_item_background". Don't forget to set an OnClickListener, OnTouchListener or something like those for them, otherwise ripple won't show.

Using ?selectableItemBackground with a white background color

You can use the foreground of your FrameLayout :

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

Change ?selectableItemBackgroundBorderless ripple color

As mentioned in the Theming with AppCompat blog post:

colorControlHighlight controls the ripple coloring

So creating a ThemeOverlay.AppCompat that sets that value to your chosen color will allow you to change the ripple color for that view and its children.

How to make a transparent button with borders and ripple effect?

If you use a Material Components theme, and apply the Material outlined button style to a button, it will appear as I think you're describing.

<Button
    android:id="@+id/button"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button" />

Change Ripple Color programmatically according to background

Solved setting this as background drawable:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/green" />
        </shape>
    </item>
    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

---

Related Topics