SwitchCompat change color

Question

I need to change SwitchCompat's track color. I've tried this, but it didn't worked for me. This is code of my XML file

<android.support.v7.widget.SwitchCompat
    android:id="@+id/sc_push"
    style="@style/switchStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:theme="@style/switchStyle"
    app:theme="@style/switchStyle" />

and this is my style.xml file

<style name="switchStyle">
    <item name="colorControlActivated">@color/red</item>
    <item name="android:colorForeground">@color/gray</item>
</style>

What seems the problem?

In addition, I can't change the activity's color or base application's color. I have to change color for this single view.

Failure

why you use android:theme="@style/switchStyle" app:theme="@style/switchStyle" , use ONLY ONE at a time – Blossomblot

@bpA android:theme is for Lollipop+, and app:theme was for KitKat and lower version but only android:theme worked. – Failure

yes . for that use different version files like v-21 etc – Blossomblot

Answer 1

Try this code.

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

Libertarian

Please elaborate on how this code answers the question. – Hakon

added above code your values-style folder and also added your manifest file. – Libertarian

how to change only thumb color ? – Olethea

if I want to set the thumb color to green for example and the the track color to be white, is it possible ?? – Fiedler

Answer 2

The better way to do it would be,

1. Create new resource file as below, switch_track_color.xml, using selector tag.

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

    <item android:color="#15A215" android:state_checked="true"/>
    <item android:color="#BAC7CB" android:state_checked="false"/>

</selector>

2. Use this in style for SwitchCompat.

<style name="SwitchStyle">
   <item name="thumbTint">#ffffff</item>
   <item name="trackTint">@color/switch_track_color</item>
</style>

Eighty

With pleasure ! Thanks you for the good answer ! – Alunite

This is perfect answer – Feminine

Thank you so much! was stuck on the same problem, this helped! – Seto

Answer 3

Basing on the above answer, which I like, because it is the only one I found working 100% with androidx SwitchCompat, I would enhance it slightly. Above just changes track color. It is quite obvious that to have both elements' colors changed (track and thumb) you need to have it like this (here is orchid color as base):

1. Add in color resource directory 2 files

switch_thumb_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#BA55D3" android:state_checked="true"/>
<item android:color="#A9A9A9" android:state_checked="false"/>

switch_track_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#6FBA55D3" android:state_checked="true"/>
<item android:color="#4CFFFFFF" android:state_checked="false"/>

2. Add in themes.xml the style for the SwitchCompat

    <style name="SwitchStyle">
    <item name="thumbTint">@color/switch_thumb_color</item>
    <item name="trackTint">@color/switch_track_color</item>
   

Elaina