How to change Width of Android's Switch track?

Question

I'm going crazy with this tiny problem. I have a 'switch' Form widget, but no matter how much I try, I cannot make it narrower. Even if I have one character instead of 'ON' or 'OFF', the size of switch remains the same. The 'thumb' becomes small, but it has to be dragged over the same distance as before. Changing the 'layout_width' to a smaller value simply cuts off the remaining track. 'minWidth' doesnt seem to do anything.

Anybody knows how I can do this? Ideally I want just an empty thumb and I'll colour code both thumb to know which is which.

XML code:

<Switch
     android:id="@+id/switch3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Switch"
     android:textOff=" "
     android:textOn=" " />

I am gettin this: enter image description here

but I want something like this: enter image description here

then the left side is trimmed off. The gap between both sides is still the same. I want the gap in between to be narrower or even overlapping. — Snebhu, May 17 '13 at 00:15
Trimmed off? That's odd. Shrink your parent container and see what happens, or insert padding inside your parent container. It'd be helpful if you posted the XML that you're concerned about. — Justin Jasmann, May 17 '13 at 00:16
I even checked on a blank activity with relative layout containing only the switch widget from above. Still, it is being trimmed off. This stubborn gap between both sides doesnt seem to get narrower at all. :( — Snebhu, May 17 '13 at 00:26
@NeilDA please mark the answer below as Correct if it has solved your problem. It has solved mine. Request moderators to mark — Zen, Apr 22 '14 at 19:23
@alexsummers, I never got to test the answer below because I was done with the app long before. However, I had also used custom thumb and track without any alteration to the width etc to achieve the desired result. I would mark it as correct anyway. — Snebhu, Apr 23 '14 at 00:01
oh. Actually i'd been struggling with the same problem for a while, and had overlooked the answer below the first time cuz it wasnt marked, might be helpful for others looking for the solution. Thanks :) — Zen, Apr 23 '14 at 05:56
http://stackoverflow.com/questions/10173590/how-to-change-the-size-of-a-switch-widget — Shirish Herwade, Aug 21 '14 at 15:07

score 73 · Accepted Answer · edited Oct 26 '20 at 14:39

73

Set your desired width of switch in the attribute:

android:switchMinWidth

for example:

<Switch
    android:id="@+id/switchVisitAgain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_margin="1dp"
    android:checked="false"
    android:gravity="center_vertical"
    android:switchMinWidth="56dp"
    android:textOff=""
    android:textOn=""
    android:thumb="@drawable/round_button"
    android:track="@drawable/button_black" />

edited Oct 26 '20 at 14:39

Boken

4,825
10
32
42

answered Jun 24 '13 at 10:57

BSKANIA

1,317
15
27

2

this trims of the left part of the switch. Any suggestion on how to achieve a symmetric switch? – user2511882 Feb 05 '14 at 02:33
yes if you are using the default switch then it only trims right part. I had used this solution for the custom drawables of switch. – BSKANIA Feb 05 '14 at 09:54
7

spent almost two weeks figuring out a solution, always kept trying "setminWidth" you are a lifesaver! PS: switchMinWidth="0dp" is what I used. That way the switch scales according to the drawable – Zen Apr 22 '14 at 19:11
2

can't properly set a width smaller than 2x thumbs~ https://stackoverflow.com/questions/20762490/how-to-change-height-and-width-of-switch-in-android/54420782#54420782 – Zhming Jun 21 '21 at 13:58

score 3 · Answer 2 · edited Oct 26 '20 at 14:40

Here is my solution. I removed the texts, set the padding of the track and define the switchMinWidth properties. This is my xml:

<Switch
    android:id="@+id/theSwitchId"
    android:textOn=""
    android:textOff=""
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumbTextPadding="5dp"
    android:switchMinWidth="40dp"
    android:layout_gravity="right|center_vertical" />

score 1 · Answer 3 · answered Dec 16 '20 at 08:07

Who are using androidx.appcompat.widget.SwitchCompat need to use

app:switchMinWidth

Example:

<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:switchMinWidth="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:track="@drawable/custom_track"
    android:thumb="@drawable/custom_thumb"
   />

score -2 · Answer 4 · edited Sep 14 '17 at 02:17

You should use android:track instead of android:thumb.

All my code:

<Switch
    android:id="@+id/switch_security_tog"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="16dp"
    android:background="@color/transparent"
    android:button="@null"
    android:textOff=""
    android:textOn=""
    android:thumb="@null"
    android:switchMinWidth="56dp"
    android:track="@drawable/thumb" />

How to change Width of Android's Switch track?

4 Answers4

Linked