CODEWITHSUNDEEP
javaandroidxmlandroid-themeandroid-styles
EGHDK
EGHDK

Reputation: 18120

Change color of Switch in Android

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:

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?

Upvotes: 16

Views: 44981

Answers (6)

Mazhar Iqbal
Mazhar Iqbal

Reputation: 999

for androidx.swithcomapact use

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

Upvotes: 3

emen
emen

Reputation: 6308

Easiest way in Android Lollipop and above,

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

Upvotes: 6

ROHIT PARMAR
ROHIT PARMAR

Reputation: 931

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

Upvotes: 2

sb_269
sb_269

Reputation: 563

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"

Upvotes: 2

SDJMcHattie
SDJMcHattie

Reputation: 1699

It might be that you need to put

style="@style/switchStyle"

in your XML as well

Upvotes: 1

velis
velis

Reputation: 10025

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"

Upvotes: 21

Related Questions