Change color of Switch in Android

Question

I'm trying to change the color of my switch in Android. I realize that I will need new 9patches. I went over to http://android-holo-colors.com/ and selected my color and selected (Switch Jelly Bean). To use Switch Jelly Bean I had to use: https://github.com/BoD/android-switch-backport. To import it into my project I had to add:

<item name="switchStyle">@style/Widget.Holo.CompoundButton.Switch</item>

to my styles, and then in xml I have to use the switch like so:

<org.jraf.android.backport.switchwidget.Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

Now everything with the switch works fine. Next, I took everything that was output from the android holo color generator and put it into the proper files:

drawable (2 selector files)
drawable-hdpi (9patch files)
drawable-xhdpi (9patch files)
drawable-xxhdpi (9patch files)

then I added to my xml:

<org.jraf.android.backport.switchwidget.Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/apptheme_switch_inner_holo_light"
android:track="@drawable/apptheme_switch_track_holo_light" />

but it is still the original blue color. I believe I'm doing everything correctly. Everything compiles (xml, java). Note: I AM importing org.jraf.android.backport.switchwidget.Switch in my java also. Any ideas?

take a look at this thread, explained very well [styling switch in android][1] [1]: http://stackoverflow.com/questions/10118050/how-can-i-style-an-android-switch — Muneeb Zulfiqar, Feb 12 '14 at 17:33
I have looked at that already. Android holo colors generates the proper 9 patch images and the 2 drawable selector files, and they are definitely in there, but not showing up. — EGHDK, Feb 12 '14 at 17:45

score 21 · Accepted Answer · edited Mar 01 '14 at 10:03

21

As per this, (direct answer by BoD copy-paste):

You must not use android:thumb and android:track, but instead, app:thumb and app:track And you must add the following to the root of your xml document:

xmlns:app="http://schemas.android.com/apk/res-auto"

edited Mar 01 '14 at 10:03

amalBit

12,041
6
77
94

answered Feb 25 '14 at 12:21

velis

8,747
4
44
64

i try app prefix before thumb and track but it gives error,still it doesn't support thumbtint and tracktint. can you please help. thanks – Ankur1994a Jan 20 '16 at 06:57

score 6 · Answer 2 · answered Jan 28 '16 at 10:26

6

Easiest way in Android Lollipop and above,

<style name="AppTheme" parent="MaterialTheme.Light">
    ...
    <item name="android:colorControlActivated">@color/color_switch</item>
</style>

answered Jan 28 '16 at 10:26

emen

6,050
11
57
94

score 3 · Answer 3 · answered Nov 30 '21 at 07:20

3

for androidx.swithcomapact use

                   app:thumbTint="@color/purple_700"
                    app:trackTint="@color/purple_700"

answered Nov 30 '21 at 07:20

Mazhar Iqbal

813
7
7

score 2 · Answer 4 · edited Mar 06 '15 at 20:13

2

to change the color of switch you can use two images

green - when switch is ON
red - when switch is OFF

now put this file in drawable folder

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

    <item android:drawable="@drawable/blue_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/blue_unchecked" android:state_checked="false"/>

</selector>

and in the layout XML file use it as below

<CheckBox
    android:id="@+id/user_checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/notif_checkbox_selector"
/>

edited Mar 06 '15 at 20:13

Gavin

8,204
3
32
42

answered Mar 03 '14 at 06:34

ROHIT PARMAR

901
15
26

nothing to do with the question, i dont give negative points just because i cant do it – xanexpt Mar 20 '15 at 18:06
1

Well, it answers the question that would be assumed from the title. – eimmer Sep 01 '15 at 02:58

score 2 · Answer 5 · answered Mar 03 '14 at 08:25

Try this:

switch_thumb.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_holo_light" />
        <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
        <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
        <item                               android:drawable="@drawable/switch_thumb_holo_light" />
    </selector>

In the layout of the switch:

android:thumb="@drawable/switch_thumb"

score 1 · Answer 6 · answered Mar 02 '14 at 08:53

1

It might be that you need to put

style="@style/switchStyle"

in your XML as well

answered Mar 02 '14 at 08:53

SDJMcHattie

1,690
1
15
21

Change color of Switch in Android

6 Answers6