how to add color to the circle in the switch in android?

Question

I want to create a switch which looks like this

i have done that in this way

<LinearLayout
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Available"
        android:textColor="#82BCB4"
        android:textSize="20sp"
        />
    <Switch
        android:id="@+id/theSwitchId"
        android:textOn=""
        android:textOff=""
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:thumbTextPadding="5dp"
        android:switchMinWidth="90dp"
        android:layout_marginStart="40dp"
        android:minHeight="60dp"
        android:layout_gravity="center|center_vertical" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="UnAvailable"
        android:layout_marginStart="40dp"
        android:textColor="#224e6d"
        android:textSize="20sp"
        />
</LinearLayout>

i am not able to change the height of the switch and it doesnt look how its in this image. Please help me with this

You can try using a selector as described here: http://stackoverflow.com/a/11499595/1468093 — Kamran Ahmed, Dec 21 '16 at 09:26
I am a bit confused with this and completly new to this.. Is it not like this, when i click on the switch the toggle moves from left to right , without putting the images @KamranAhmed — yacky, Dec 21 '16 at 09:44

Subir Chakraborty · Accepted Answer · 2016-12-21T14:13:49.837

all you need to do is just use a custom drawable as track of switch

this is the code for custom drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="rectangle">
        <corners
            android:radius="@dimen/_40sdp" />
        <solid
            android:color="@android:color/darker_gray" />
        <padding
            android:bottom="@dimen/_5dp"
            android:left="@dimen/_5dp"
            android:right="@dimen/_5dp"
            android:top="@dimen/_5dp" />
    </shape>
</item>

Further make these modification to your existing layout add android:thumbTint="@android:color/holo_blue_dark" or any color that meets your requirement

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Available"
    android:textColor="#82BCB4"
    android:textSize="20sp" />

<Switch
    android:id="@+id/theSwitchId"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_gravity="center|center_vertical"
    android:layout_marginStart="40dp"
    android:minHeight="60dp"
    android:switchMinWidth="90dp"
    android:textOff=""
    android:textOn=""
    android:thumbTextPadding="5dp"
    android:thumbTint="@android:color/holo_blue_dark"
    android:track="@drawable/track_background" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:text="UnAvailable"
    android:textColor="#224e6d"
    android:textSize="20sp" />

hope this helps

click here to view the resulting screenshot

screenshot

score 0 · Answer 2 · answered Dec 21 '16 at 09:26

0

In style.xml

   <style name="switchCompatStyle">
        <item name="colorControlActivated">@color/colorPrimary</item>
    </style>

And code for switch is like

 <android.support.v7.widget.SwitchCompat
                android:id="@+id/switch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="@dimen/_10sdp"
                app:theme="@style/switchCompatStyle" />

answered Dec 21 '16 at 09:26

Rishabh Mahatha

1,251
9
19

switch itself is not visible if i add @Rishabh Mahatha – yacky Dec 21 '16 at 09:53
Have you added the dependency `compile 'com.android.support:appcompat-v7:25.0.0'` in your gradle file? – Rishabh Mahatha Dec 21 '16 at 09:56
Change your build version to 17 – Rishabh Mahatha Dec 21 '16 at 10:00
build is failing.. @Rishabh Mahatha – yacky Dec 21 '16 at 10:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131143/discussion-between-yacky-and-rishabh-mahatha). – yacky Dec 21 '16 at 10:10

score 0 · Answer 3 · edited Dec 21 '16 at 16:42

You create Thumb in drawable xml: thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/ic_thumbselecter"/>
    <item android:drawable="@drawable/ic_thumbselecter"/>
</selector>

And put into switch (in my case I was using that):

<Switch
    app:kswThumbDrawable="@drawable/thumb"/>

score 0 · Answer 4 · answered Jun 23 '20 at 13:05

0

Change the thumb (circle on the switch) color by using:

android:thumbTint="@color/thumbColor"

On your colors.xml:

<color name="thumbColor">#FFFFFF</color>

answered Jun 23 '20 at 13:05

Biswas Khayargoli

976
1
11
29

how to add color to the circle in the switch in android?

4 Answers4