CODEWITHSUNDEEP
androidandroid-support-library
Alfred Woo
Alfred Woo

Reputation: 716

SwitchCompat change color

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.

Upvotes: 6

Views: 9050

Answers (3)

basileus
basileus

Reputation: 445

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

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

Upvotes: 0

Sumedha Kulkarni
Sumedha Kulkarni

Reputation: 31

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>
  1. Use this in style for SwitchCompat.
<style name="SwitchStyle">
   <item name="thumbTint">#ffffff</item>
   <item name="trackTint">@color/switch_track_color</item>
</style>

Upvotes: 3

Jiks
Jiks

Reputation: 1777

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>

Upvotes: 15

Related Questions