Switch Track Color

Question

I want to use a Switch and change its Track Color. So in my opinion nothing spectacular.

My Switch layout:

<Switch
    android:id="@+id/Switch1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:track="@color/gray"
    android:textOn="@string/on"
    android:textOff="@string/off"     
    android:text="@string/musiconoff" />

and my color "grey":

<color name="gray">#666666</color>

My Problem is that the Switch is shown as a 1-pixel Switch. It's just a small line. If I delete the "color"-line, the Switch is correct (without grey of course).

Where is my fault?

use my answer on android:track="@android:color/darker_gray"i think there is problem in your @color/gray — Spry Techies, Oct 01 '14 at 10:15
Can you accept answer of @Sector11 as it is only answer worked in every situation. — TapanHP, Jan 09 '17 at 07:53

score 17 · Accepted Answer · answered Apr 20 '16 at 11:33

17

Nothing worked for me except this

if (isChecked) {
                    mSwtPrivacyView.getTrackDrawable().setColorFilter(ContextCompat.getColor(this, R.color.switch_track_checked_true_color), PorterDuff.Mode.SRC_IN);
                } else {
                    mSwtPrivacyView.getTrackDrawable().setColorFilter(ContextCompat.getColor(this, R.color.switch_track_checked_false_color), PorterDuff.Mode.SRC_IN);
                }

answered Apr 20 '16 at 11:33

silentsudo

6,730
6
39
81

1

This is very helpful for me.. Thanks @sector11 – TapanHP Jan 09 '17 at 07:52

score 16 · Answer 2 · answered Nov 26 '18 at 10:29

Following code solves the problem:

In you Activity/Fragment (XML):

<Switch
    android:id="@+id/sMuteNotifications"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_margin="1dp"
    android:checked="true"
    android:gravity="center_vertical"
    android:switchMinWidth="56dp"
    android:thumb="@drawable/bg_thumb"       //  Create this drawable
    android:track="@drawable/bg_switch_states"/>       //  and this one too

bg_thumb :(Use this or any image you want)

Create this in your drawables folder

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@android:color/white"/>

    <size android:width="28dp" android:height="28dp"/>

</shape>

bg_switch_states:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/bg_on_switch"/>
    <item android:state_checked="false" android:drawable="@drawable/bg_off_switch"/>

</selector>

bg_on_switch :

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="18dip" />
    <solid android:color="@color/colorPrimaryLight"/>  // <---What ever color you want to use here
</shape>

bg_off_switch :

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="18dip" />
    <solid android:color="@color/colorPrimaryDark"/>  // <---What ever color you want to use here
</shape>

There you go...

Hope this will help someone

thanks dude this is working perfectly ,we can customize track color and thumb also — Venkatesh, Mar 04 '19 at 06:58
Huge thanks, you saved my day! A well-explained example with the ability to customise colours and styles — Mo Zaatar, May 22 '19 at 05:33
instead of using android:track="@drawable/bg_switch_states", use app:track="@drawable/bg_switch_states" — Abhinav Saxena, Sep 28 '22 at 15:46

score 9 · Answer 3 · answered Dec 17 '20 at 08:14

Here is a very simple solution, that worked for me. Just setup the xml attributes thumbTint and trackTint with color selectors. Track is the background component, thumb is the round component.

<com.google.android.material.switchmaterial.SwitchMaterial
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:thumbTint="@color/switch_thumb"
        app:trackTint="@color/switch_track" />

or even better add these items to your app theme to apply to all switches:

<item name="thumbTint">@color/switch_thumb</item>
<item name="trackTint">@color/switch_track</item>

switch_thumb.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/[your desired color]" android:state_checked="true" />
     <item android:color="@color/[your desired color]" android:state_checked="false" />
</selector>

switch_track.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/[your desired color]" android:state_checked="true" />
     <item android:color="@color/[your desired color]" android:state_checked="false" />
</selector>

Mike · Answer 4 · 2014-10-17T22:17:43.273

2

You might want to build a drawable with your grey color, like and place it in the res/drawable folder:

track.xml:

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

     <size android:width="48dp" android:height="22dp" />
     <solid
         android:color="#666666" />
     <stroke
        android:width="2dp"
        android:color="#666666"
        android:dashWidth="2dp"
        android:dashGap="1dp" />
</shape>

Add whatever size you want to have your stroke(if needed) and add this drawable as the track property.

Does this help?

edited Oct 17 '14 at 22:17

answered Oct 01 '14 at 10:21

Mike

4,550
4
33
47

I just updated my answer. I tried it and it works. It should work for you as well. Sorry for the delay. – Mike Oct 17 '14 at 22:18

score 1 · Answer 5 · answered May 11 '17 at 06:32

1

Try this to change the track color of switch

 android:track="@null"
 android:background="@drawable/img_setings_toggle_on"

answered May 11 '17 at 06:32

zohaib khaliq

697
10
17

Spry Techies · Answer 6 · 2014-10-01T10:21:16.010

-4

android:track="@android:color/darker_gray"

Try this in your code

edited Oct 01 '14 at 10:21

answered Oct 01 '14 at 10:13

Spry Techies

896
6
21

your color name and accessing color is not same – Spry Techies Oct 01 '14 at 10:20
This makes the track a rectangle :( – Mo Zaatar May 22 '19 at 05:12

Switch Track Color

6 Answers6

Linked