7

Is there any way to make the height of the thumb of a switch bigger than the track height in Android versions prior to Lollipop ?

I am essentially trying to create a material design-like switch widget in Kitkat (and older versions- the problem here is the thumb by default 'fits' inside the track). I have been working on this for quite some time now but I can't seem to arrive at the correct design.

I followed the solutions on this SO post: How to change the size of a Switch Widget.

Any suggestions or a solution would be most appreciated.

Community
  • 1
  • 1
user1841702
  • 2,683
  • 6
  • 35
  • 53

4 Answers4

32

I added a transparent stroke to my track drawable shape which results in a padding around the track:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@color/track_color"/>
    <size android:height="@dimen/track_height"  />
    <size android:width="@dimen/track_width"  />

    <!-- results in the track looking smaller than the thumb -->
    <stroke
        android:width="6dp"
        android:color="#00ffffff"/>
</shape>
stevenp
  • 441
  • 6
  • 5
5

Yup I solved this 

 <android.support.v7.widget.SwitchCompat
                   android:id="@+id/mySwitch"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:textOn="ON"
                   android:textOff="OFF"
                   style="@style/Color1SwitchStyle"
                   android:text="" />

This is My Color1SwitchStyle

 <style name="Color1SwitchStyle">
    <item name="android:thumb">@drawable/customswitchselector</item>
    <item name="android:track">@drawable/my_custom_track</item>
     //when use Switch in xml file 
    <item name="track">@drawable/my_custom_track</item>
    //when use android.support.v7.widget.SwitchCompat in xml

</style>

*Hear is my customswitchselector.xml

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
      <item android:state_checked="true"
        android:drawable="@drawable/on" >
       <shape
            android:shape="rectangle"
            android:dither="true"
            android:useLevel="false"
            android:visible="true">

            <gradient
                android:startColor="#66AAFF00"
                android:endColor="#6600FF00"
                android:angle="270"/>
            <corners
                android:radius="15dp"/>

            <size
                android:width="200dp"
                android:height="80dp" />
            <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
        </shape>
    </item>
    <item android:state_checked="false"
        android:drawable="@drawable/off">
        <shape
            android:shape="rectangle"
            android:dither="true"
            android:useLevel="false"
            android:visible="true">

            <gradient
                android:startColor="#66AAFF00"
                android:endColor="#6600FF00"
                android:angle="270"/>
            <corners
                android:radius="15dp"/>

            <size
                android:width="200dp"
                android:height="80dp" />
            <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
        </shape>
    </item>

</selector>

And hear is magic my my_custom_track.xml

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





switch_track_on.xml 
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle"
            android:dither="true"
            android:useLevel="false"
            android:visible="true">
            <gradient
                android:startColor="@color/profile_pic_bg"
                android:endColor="@color/profile_pic_bg"
                android:angle="270"/>
            <corners
                android:radius="0dp"/>
            <size
                android:width="100dp"
                android:height="10dp" />

            <stroke
                android:width="12dp"
                android:color="#00ffffff"/>
        </shape>
    </item>
</layer-list>



    switch_track_off.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle"
            android:dither="true"
            android:useLevel="false"
            android:visible="true">
            <gradient
                android:startColor="@color/gray"
                android:endColor="@color/gray"
                android:angle="270"/>
            <corners
                android:radius="0dp"/>
            <size
                android:width="100dp"
                android:height="10dp" />

            <stroke
                android:width="12dp"
                android:color="#00ffffff"/>
        </shape>
    </item>
</layer-list>

Thanks stevenp without your comment i cannot solve this

switch off

switchon

Sushant Gosavi
  • 3,647
  • 3
  • 35
  • 55
1

Adding top and bottom inset in the 'track' drawable works for me. android:bottom="5dp" android:top="5dp"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="5dp"
    android:top="5dp">
    <shape>
        <corners android:radius="15dp" />
        <solid android:color="@android:color/transparent" />
        <stroke
            android:width="2dp"
            android:color="#EEEEEE" />
    </shape>
</item>

<androidx.appcompat.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:track="@drawable/switch_track_drawable" />
Mehedi Hasan Shagor
  • 750
  • 1
  • 8
  • 14
0

The solution I came up with is just to use for the track a shape that is a line instead of a rectangle, and set the width explicitly in its stroke.

For example if the switch is defined as follows: 

        <android.support.v7.widget.SwitchCompat
            android:id="@+id/my_switch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:track="@drawable/switch_track"
            app:theme="@android:style/Theme.DeviceDefault.Light" />

The in the switch_track.xml drawable use a line shape with whatever width you desire:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" >
            <stroke android:color="#50bbb9bf" android:width="5dp"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
            <stroke android:color="#5000b6de" android:width="5dp"/>
        </shape>
    </item>
</selector>
drorsun
  • 881
  • 1
  • 8
  • 22
  • hi Drorsun, it doesn't seem to affect the width/thickness of the track. Even if I increase it to 400dp, the thickness of the track is still the same (I tried to make the track thicker). Any idea? – Sam Feb 20 '20 at 10:03
  • 1
    Ahh... found the problem. I was using `android:track="@drawable/switch_track"` instead of `app:track="@drawable/switch_track"`. However, `android:shape="line"` doesn't work. I need to use `android:shape="rectangle"` instead... – Sam Feb 20 '20 at 11:17