11

I'm trying to create a custom switch button that would have its thumb about 75% of its track (in width). I don't want to use images, just drawable shapes, styles etc. So far I've done the following:

activity_main.xml

<Switch
        android:id="@+id/onOffSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:track="@drawable/switch_custom_track"
        android:thumb="@drawable/switch_custom_thumb"
        android:showText="true"
        android:textOff="Off"
        android:textOn="On"/>

switch_custom_track.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/switch_custom_track_on" />
    <item android:state_checked="false" android:drawable="@drawable/switch_custom_track_off" />
</selector>

switch_custom_track_on.xml

<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <solid android:color="#00b800" />
    <size android:width="90dp" android:height="40dp" />
</shape>

switch_custom_track_off.xml

<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <solid android:color="#fd491d" />
    <size android:width="90dp" android:height="40dp" />
</shape>

switch_custom_thumb.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/switch_custom_thumb_on" />
    <item android:state_checked="false" android:drawable="@drawable/switch_custom_thumb_off" />
</selector>

switch_custom_thumb_on.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="#ffffff" />
    <size android:width="70dp" android:height="40dp" />
    <stroke android:width="2dp" android:color="#00b800" />
</shape>

switch_custom_thumb_off.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="#ffffff" />
    <size android:width="70dp" android:height="40dp" />
    <stroke android:width="2dp" android:color="#fd491d" />
</shape>

With the above code I'm getting this:

https://d1ro8r1rbfn3jf.cloudfront.net/ms_28780/buq3SAmnkEvOTUgRwZsQ7ZKGn5V7U8/switch.png?Expires=1423585499&Signature=GtuSi6G1WwUefvgsDfgPOWEmoe3I93Jm0R-Cyxkm~pgoQkJlf53UCxKJX~m7rs1KahuP9PMdr9N2ht0KjVL0P~rIzvbieEO0~2bjaITq2z2SnNu9TAlGaTJEy~InuS1EcCH~OAkoJPSuZ0IYjq0LwOQBxC9awdgypL~IKGF4GILUfknk~n0ZjC2TzW2ovdbyR8JjX48Pg7Xey82I8oBpwvlRfxGigiGfNDEw36Dqk~Q1dzK5k9IO0ERk~c2m7K~ZdZ78oXvGx8-EGruYCxfJIe5b0PeHqG~bV1fK9sv1cqRebXWIOJbZS6EZf6BUPIuZ0OO9xQbUXTLrARV55cD6nQ__&Key-Pair-Id=APKAJHEJJBIZWFB73RSA

So the thumb in width is 50% of the track. Please note the width of "90dp" in size element in "switch_custom_track_off.xml" and the width of "70dp" in the size element in "switch_custom_thumb_off.xml". I've expected that the relative size of the thumb (to the track) should be 70dp/90dp=77%. However it is clearly visible that the track expands to twice the size of the thumb.

So is it possible to make the thumb and the track of a "completely custom" size? If yes, could you please help me achieve the desired result?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Max
  • 179
  • 1
  • 13
  • Did you tried to set static width of the switch instead wrap_content? – Selvin Feb 09 '15 at 17:15
  • Yeah, forgot to mention that. When I try to set the width in the Switch element explicitly to "90dp" I get this: http://take.ms/zrlWX. It seems that the width of the track remains the same and it just cuts off the thumb... – Max Feb 09 '15 at 17:20
  • `I've expected that the relative size`... Well, **it's absolute**, not relative. I guess you have to use images. OR a custom control where you redraw it all the times (good luck). – Phantômaxx Feb 09 '15 at 17:31
  • 2
    I've just ended up using third party widget called [SwitchButton](https://github.com/kyleduo/SwitchButton) – Max Sep 20 '15 at 11:40

0 Answers0