Change color of Switch in Android
Asked Answered
K

6

16

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?

Keenankeene answered 12/2, 2014 at 16:54 Comment(2)
take a look at this thread, explained very well [styling switch in android][1] [1]: #10118550Contrayerva
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.Keenankeene
N
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"

Nolannolana answered 25/2, 2014 at 12:21 Comment(1)
i try app prefix before thumb and track but it gives error,still it doesn't support thumbtint and tracktint. can you please help. thanksWendish
A
6

Easiest way in Android Lollipop and above,

<style name="AppTheme" parent="MaterialTheme.Light">
    ...
    <item name="android:colorControlActivated">@color/color_switch</item>
</style>
Abert answered 28/1, 2016 at 10:26 Comment(0)
F
3

for androidx.swithcomapact use

                   app:thumbTint="@color/purple_700"
                    app:trackTint="@color/purple_700"
Forestation answered 30/11, 2021 at 7:20 Comment(0)
U
2

to change the color of switch you can use two images

  1. green - when switch is ON
  2. 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"
/>
Unni answered 3/3, 2014 at 6:34 Comment(2)
nothing to do with the question, i dont give negative points just because i cant do itHeretofore
Well, it answers the question that would be assumed from the title.Capable
D
2

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"
Daciadacie answered 3/3, 2014 at 8:25 Comment(0)
T
1

It might be that you need to put

style="@style/switchStyle"

in your XML as well

Turkey answered 2/3, 2014 at 8:53 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.