CODEWITHSUNDEEP
androidmaterial-design
Ashish Ranjan
Ashish Ranjan

Reputation: 5543

Change ?selectableItemBackgroundBorderless ripple color

I'm trying to use ?selectableItemBackgroundBorderless to create borderless ripple for a LinearLayout, it works fine but is not clearly visible.

How can I change the default color for ?selectableItemBackgroundBorderless to make the ripple effect visible?

I've tried applying ThemeOverlay.AppCompat.Dark theme to the parent layout but it doesn't help.

Upvotes: 14

Views: 11396

Answers (4)

SerjantArbuz
SerjantArbuz

Reputation: 1244

If need to change the color programmatically - do it this way:

  1. In your xml set background:
<View
    android:id="@+id/click_view"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_gravity="center"
    android:background="?attr/selectableItemBackgroundBorderless" <!-- Set ripple this way -->
    android:contentDescription="@null" />
  1. And in your code change color of it:
// Take borderless ripple
val ripple = clickView.background as? RippleDrawable 

// Change color here
ripple?.setColor(ColorStateList.valueOf(Color.RED))

Don't know how it works for api lower 23.

Upvotes: 0

android developer
android developer

Reputation: 116402

An alternative would be to make your own selector. I know it's not the same nice solution, but it could be a solution anyway:

res/drawable/circular_item_background_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/your_color"/>
        </shape>
    </item>

    <item android:drawable="@android:color/transparent"/>

</selector>

res/drawable-v21/circular_item_background_selector.xml

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

    <item android:drawable="@android:color/transparent"/>

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

</ripple>

Upvotes: 5

Matteo Gariglio
Matteo Gariglio

Reputation: 522

Using the attribute foreground instead of background works well for me:

<Button
...    
android:foreground="?android:attr/selectableItemBackground"
android:backgroundTint="@color/blue"
android:textColor="@color/white"
.../>

Upvotes: 3

ianhanniballake
ianhanniballake

Reputation: 199870

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.

Upvotes: 25

Related Questions