How to tint the color of the shadow in Android Switch?-CodePudding

I'm using Material Switch, and I know how to change the colors of the track and the thumb, but how do you change the color of the radiant shadow?

I have changed the color to purple, but when I tap on it, there is still that green shadow. I've tried styles, appcompat switch, etc but nothing worked.

Here is my code:

    <com.google.android.material.switchmaterial.SwitchMaterial
    android:id="@ id/switch_compat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:trackTint="@color/purple_500"
    app:thumbTint="@color/purple_700"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Thanks!

CodePudding user response：

You can change the color of the ripple using

<item name="colorControlHighlight">@color/purple_700</item>

But you will need to define two styles for this either in styles.xml or themes.xml:

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

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

Then define style attribute for you switch:

 style="@style/SelectableItemBackgroundBorderless"

So your Switch will be:

<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@ id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:trackTint="@color/purple_500"
app:thumbTint="@color/purple_700"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="@style/SelectableItemBackgroundBorderless" />

EDIT:

You can change the color of ripple on OFF state and ON state. No need to use the first style. Just define theme, no need to define style:

android:theme="@style/SelectableItemTheme"

Define in styles:

<style name="SelectableItemTheme">
    <item name="colorControlHighlight">@color/purple_500</item>
    <item name="colorControlActivated">@color/purple_700</item>
</style>