android:Thumb disables Switch

Question

I am trying to change the color of the Switch Thumb, I have created following drawable file.

<item android:state_enabled="false" android:drawable="@color/backgroundTheme" />
<item android:state_pressed="true"  android:drawable="@color/backgroundTheme" />
<item android:state_checked="true"  android:drawable="@color/backgroundTheme" />
<item                               android:drawable="@color/backgroundTheme" />

When i add the above drawable in my switch, it disables the switch from the layout preview. Although the switch is still there, but its not visible after adding drawable as Thumb.

If i add an image instead of drawable-resourse-file, it works and display image instead of round circle.

<Switch
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:id="@+id/switchNotifications"
    android:layout_centerHorizontal="true"
    android:paddingTop="150dp"
    android:text="@string/notification_settings"
    android:textColor="@color/white"
    android:checked="true"
   android:thumb="@drawable/switch_thumb"
   />

Update

Switch_thumb.xml

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

Following image illustrate result i am getting in my layout I am using android:thumb, because app:thumb gives me following error message.

Update 2

I am getting following error message, when using app:thumbTint`

Error:(31) No resource identifier found for attribute 'thumbTint' in package 'com.' Error:Execution failed for task ':app:processArmeabi-v7aDebugResources'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\Users\Kirmani\AppData\Local\Android\Sdk\build-tools\23.0.2\aapt.exe'' finished with non-zero exit value 1

I tried it out and it looks like you are correct, android doesn't support setting the track or the thumb of the switch as a selector list. If you do it doesnt show anything for the switch. I was however able to set the thumb as a normal drawable (same as you). The odd thing is that I couldn't find anything in the docs about this. All that aside, what are you trying to accomplish? We may be able to find a solution that doesn't involve putting an xml drawable as the thumb. — Dr. Nitpick, Jul 03 '16 at 05:14
Thanks @Dr.Nitpick I am getting `pink color` Thumb, I need to change it to `green Color` — dev90, Jul 03 '16 at 07:53

score 0 · Answer 1 · edited May 23 '17 at 12:16

The pink color you are getting is the default color accent color for the app. There are a couple ways to meet your needs based on whether you just want to change the appearance of this switch, all switches/radio buttons/checkboxes, or all your UI components.

Method 1: Just the Switch If you just want to change the appearance of one switch you will have to instead use SwitchCompat from the support-v7 library (appcompat) and then set the thumbTint and trackTint of the Switch to be a colorStateList.

If you haven't already, you will need to add appcompat as a dependency in your build.gradle. At the dependencies closure of your app build.gradle file you will need to do the following:

dependencies {
  com.android.support:appcompat-v7:23.3.0 // <--- this number should match your compile sdk
}

Note that the version of appcompat you use will have to match your compile sdk. So if compileSdkVersion is 22 you will have to replace 23.3.0 with 22.2.1 (full version list here).

your switch will look like:

<android.support.v7.widget.SwitchCompat
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_below="@id/text"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:id="@+id/switchNotifications"
    android:layout_centerHorizontal="true"
    android:paddingTop="150dp"
    android:text="@string/notification_settings"
    android:textColor="@color/colorAccent"
    android:checked="true"
    app:thumbTint="@drawable/switch_thumb"
    app:trackTint="@drawable/switch_thumb"
    />

drawable/switch_thumb.xml will look like:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="@color/<<<INSERT DISABLED COLOR>>>" />
    <item android:state_pressed="true"  android:color="@color/<<<INSERT PRESSED COLOR>>>" />
    <item android:state_checked="true"  android:color="@color/<<<INSERT CHECKED COLOR>>>" />
    <item                               android:color="@color/<<<INSERT UNCHECKED COLOR>>>" />
</selector>

Method 2: All the Checkboxes, Switches and Radio buttons If you want to change the appearance of toggleable components you can instead modify your theme for the app. For this approach you will also need to use SwitchCompat in place of Switch in your xml, but you wont need the color state list.

you will have to add 4 tags to your app theme of your styles.xml

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       ....        


        <!-- Add these to style toggelable components. -->
        <item name="colorControlActivated">#7777FF</item>
        <item name="colorControlNormal">#770000</item>
        <item name="colorSwitchThumbNormal">#770000</item>
        <item name="colorControlHighlight">#007700</item>
    </style>

    ...

</resources>

Method 3: All the Components If you want your green color to be applied to all of your UI components as an accent you can change the value of colorAccent in colors.xml to your green value. Read through this SO post for more info on what accent colors are in android. This will only change the appearance of your switch when it is in the active state. Note, you don't need to use SwitchCompat for this to work.

...
<color name="colorAccent"><<<INSERT NEW ACCENT /CHECKED COLOR>>>></color>
...

Thanks for the Help..I tried the first method, but it disables switch after adding this code..Although still functions — dev90, Jul 06 '16 at 04:25
what do you mean it disables the switch but still functions? The app still works but the switch is always disabled? — Dr. Nitpick, Jul 06 '16 at 04:28
Im going to hit the sack in a few. Add your updated code in the question below what you already have and I can respond tomorrow with a helpful answer. An image would be helpful too (if you have the time). — Dr. Nitpick, Jul 06 '16 at 04:33
Okay, it looks like you aren't using `app:thumbTint` and `app:trackTint` in your SwitchCompat. You should be using these in place of `android:thumb`. Could you try that, and if it fails explain what the error is when you try to set these attributes like I do in my answer? — Dr. Nitpick, Jul 06 '16 at 11:07
I have updated my question kindly check, and Thank you so much for your help :) — dev90, Jul 06 '16 at 15:50
It looks like finding the solution is going to be a bit more involved. I will be available at 9:30pm EST tonight to chat with you on SO. Get on then if you can, if not please also share the contents of your app/build.gradle. — Dr. Nitpick, Jul 06 '16 at 20:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116633/discussion-between-dr-nitpick-and-kirmani88). — Dr. Nitpick, Jul 07 '16 at 01:35

android:Thumb disables Switch

1 Answers1