How to change the track color of a SwitchCompat

Below is the AppCompat way of changing both the track and thumb color programmatically, for a specific SwitchCompat. For this example, I have hardcoded the thumbColor to red. Ideally, you would set the color through a second method parameter.

Please note that when the switch is checked, a ripple is displayed. The ripple color will not be changed by the code below.

public static void setSwitchColor(SwitchCompat v) {
    // thumb color of your choice
    int thumbColor = Color.RED;

    // trackColor is the thumbColor with 30% transparency (77)
    int trackColor = Color.argb(77, Color.red(thumbColor), Color.green(thumbColor), Color.blue(thumbColor));

    // setting the thumb color
    DrawableCompat.setTintList(v.getThumbDrawable(), new ColorStateList(
            new int[][]{
                    new int[]{android.R.attr.state_checked},
                    new int[]{}
            },
            new int[]{
                    thumbColor,
                    Color.WHITE
            }));

    // setting the track color
    DrawableCompat.setTintList(v.getTrackDrawable(), new ColorStateList(
            new int[][]{
                    new int[]{android.R.attr.state_checked},
                    new int[]{}
            },
            new int[]{
                    trackColor,
                    Color.parseColor("#4D000000") // full black with 30% transparency (4D)
            }));
}

if you want to costumize the color of track.you can use this solution.

track selector.xml

 <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/checked_color" android:state_checked="true" />
    <item android:color="@color/checked_color" android:state_selected="true" />
    <item android:color="@color/unchecked_color" android:state_checked="false" />
    <item android:color="@color/unchecked_color" android:state_selected="false" />

where checked_color and unchecked_color are color of your choices.

styles.xml

<style name="mySwitchStyle" parent="@style/Widget.AppCompat.CompoundButton.Switch">
       <!-- do here for additional costumization on thumb, track background,text appearance -->


    </style>


<style name="mySwitchTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="switchStyle">@style/mySwitchStyle</item>
        <item name="colorControlActivated">@color/red</item>
        <item name="colorControlNormal">@color/colorAccent</item>
        <item name="trackTint">@color/track_selector</item>
    </style>

layout file

<android.support.v7.widget.SwitchCompat
        android:theme="@style/mySwitchTheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

I had same probrem and solved it.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   ...
   <!-- Active thumb color & Active track color(30% transparency) -->
   <item name="colorControlActivated">@color/theme</item>
   <!-- Inactive thumb color -->
   <item name="colorSwitchThumbNormal">@color/grey300</item>
   <!-- Inactive track color(30% transparency) -->
   <item name="android:colorForeground">@color/grey600</item>
   ...
</style>

I read app compat code, and understand it.

android.support.v7.internal.widget.TintManager.java

private ColorStateList getSwitchTrackColorStateList() {
    if (mSwitchTrackStateList == null) {
        final int[][] states = new int[3][];
        final int[] colors = new int[3];
        int i = 0;

        // Disabled state
        states[i] = new int[] { -android.R.attr.state_enabled };
        colors[i] = getThemeAttrColor(android.R.attr.colorForeground, 0.1f);
        i++;

        states[i] = new int[] { android.R.attr.state_checked };
        colors[i] = getThemeAttrColor(R.attr.colorControlActivated, 0.3f);
        i++;

        // Default enabled state
        states[i] = new int[0];
        colors[i] = getThemeAttrColor(android.R.attr.colorForeground, 0.3f);
        i++;

        mSwitchTrackStateList = new ColorStateList(states, colors);
    }
    return mSwitchTrackStateList;
}

With the MaterialSwitch provided by the Material Components Library.

• Use the materialThemeOverlay attribute to override the app color for the Switch.

  <style name="CustomWidget.MaterialComponents.CompoundButton.Switch" parent="Widget.MaterialComponents.CompoundButton.Switch">
    <item name="materialThemeOverlay">@style/CustomCompoundButton_Switch</item>
  </style>
  <style name="CustomCompoundButton_Switch" >
    <item name="colorSurface">@color/yellow</item>
    <item name="colorOnSurface">@color/orange</item>
    <item name="colorControlActivated">@color/blue</item>
  </style>

And in the layout:

<com.google.android.material.switchmaterial.SwitchMaterial
    style="@style/Widget.MaterialComponents.CompoundButton.Switch"
    ../>

• Use the style attribute:

  <style name="CustomStyleWidget.MaterialComponents.CompoundButton.Switch"
         parent="Widget.MaterialComponents.CompoundButton.Switch">
    <item name="useMaterialThemeColors">false</item>
    <item name="trackTint">@color/track_selector</item>
    <item name="thumbTint">@color/thumb_selector</item>
  </style>

with thumb_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_enabled="false" android:color="@color/switchTrackDisable"/>
  <item android:state_checked="true" android:color="@color/switchThumbActive" />
  <item android:color="@color/switchThumbkNormal" />
</selector> 

and track_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_enabled="false" android:color="@color/switchTrackDisable"/>
  <item android:state_checked="true" android:color="@color/switchTrackActive" />
  <item android:color="@color/switchTrackNormal" />
</selector>

And in the layout:

<com.google.android.material.switchmaterial.SwitchMaterial
    style="@style/CustomStyleWidget.MaterialComponents.CompoundButton.Switch"
    ../>