How to decrease the size of thumb in switch java/kotlin? - android-layout

Question

Hye there, I have created 4 SVG files 2 of them represent the thumb and 2 others represent the track as ON/OFF, and when I implemented them on the Switch button, I had no problem with the track but the thumb cirlce is forcing the track to take it size, for example if the size of the thumb = 20 then the track high should = 20 as well, and that make 2 problems, one, it distruct the shape of the svg, two, it is not showing as I want it to be, I want the thumb to be smaller and to fit inside the track like that:the shape I want to show
and here is my result:
this is what it show
this is the switch code:
<Switch
android:id="#+id/nightLight"
android:layout_centerHorizontal="true"
android:track="#drawable/night_light_track"
android:thumb="#drawable/night_light_thumb"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
this is the drawables:
night_light_thumb:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="oval">
<solid android:color="#color/C"/>
<size android:height="32dp" android:width="32dp"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="#4E505F"/>
<size android:height="32dp" android:width="32dp"/>
</shape>
</item>
</selector>
night_light_track:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/light_track"/>
<item android:state_checked="true"
android:drawable="#drawable/night_track"/>
</selector>
night_track:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="32dp"
android:viewportWidth="72"
android:viewportHeight="32">
<group>
<clip-path
android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
<path
android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"
android:fillColor="#2E2F38"/>
</group>
<group>
<clip-path
android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
<path
android:pathData="M16.5,10.2c-1.8,1.3 -3,3.4 -3,5.8c0,3.9 3.1,7 7,7c2.4,0 4.5,-1.2 5.8,-3c-0.3,0 -0.5,0 -0.8,0c-5,0 -9,-4 -9,-9C16.5,10.7 16.5,10.5 16.5,10.2zM11.5,16c0,-4 2.6,-7.3 6.1,-8.5l1.3,1.3c-0.2,0.7 -0.4,1.5 -0.4,2.3c0,3.9 3.1,7 7,7c0.8,0 1.5,-0.1 2.3,-0.4l1.3,1.3c-1.2,3.5 -4.6,6.1 -8.5,6.1C15.5,25 11.5,21 11.5,16z"
android:strokeAlpha="0.7"
android:fillColor="#4B5EFC"
android:fillType="evenOdd"
android:fillAlpha="0.7"/>
</group>
</vector>
light_track:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="32dp"
android:viewportWidth="72"
android:viewportHeight="32">
<group>
<clip-path
android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
<path
android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"
android:fillColor="#FFFFFF"/>
</group>
<group>
<clip-path
android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
<path
android:pathData="M51,6v1v2v1h2V9V7V6H51zM62,15h-1h-2h-1v2h1h2h1V15zM45,15h1v2h-1h-2h-1v-2h1H45zM51,22v1v2v1h2v-1v-2v-1H51zM46.3,23.1l-0.7,0.7l-1.4,-1.4l0.7,-0.7l1.4,-1.4l0.7,-0.7l1.4,1.4l-0.7,0.7L46.3,23.1zM56.9,12.5l0.7,-0.7l1.4,-1.4l0.7,-0.7l-1.4,-1.4l-0.7,0.7l-1.4,1.4l-0.7,0.7L56.9,12.5zM44.9,10.3l-0.7,-0.7l1.4,-1.4l0.7,0.7l1.4,1.4l0.7,0.7l-1.4,1.4l-0.7,-0.7L44.9,10.3zM55.5,20.9l0.7,0.7l1.4,1.4l0.7,0.7l1.4,-1.4l-0.7,-0.7l-1.4,-1.4l-0.7,-0.7L55.5,20.9zM54,16c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2s0.9,2 2,2S54,17.1 54,16zM52,12c2.2,0 4,1.8 4,4s-1.8,4 -4,4s-4,-1.8 -4,-4S49.8,12 52,12z"
android:strokeAlpha="0.7"
android:fillColor="#4B5EFC"
android:fillType="evenOdd"
android:fillAlpha="0.7"/>
</group>
</vector>
What I did try is to change the size of the thumb same as the size of the track so it don't distruct the shape, so we don't stay having 2 problems, but still couldn't change the size of the thumb inside the track.

Answer 1

The switch size adjust as you have stated. To get around this, make a thumb that has two concentric circles inside a Layer List. The outer circle will be the size you want the track to be with a transparent color. The inner circle will be the same as the outer circle but will change color of the inner circle if that's what you want. This way, the thumb will appear to be inset inside the track but in actuality it will just have a transparent annular ring.
night_light_thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/transparent" />
<size android:width="32dp" android:height="32dp" />
</shape>
</item>
<item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
<shape android:shape="oval">
<solid android:color="#color/C" />
<size android:width="24dp" android:height="24dp" />
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/transparent" />
<size android:width="32dp" android:height="32dp" />
</shape>
</item>
<item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
<shape android:shape="oval">
<solid android:color="#4E505F" />
<size android:width="24dp" android:height="24dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
There are probably other ways to do this, but the idea is to build a transparent area around the visible thumb.
Update
Here is another way to do it using inset of the item attribute of layer list. This way involve less drawing and is shorter.
<selector>
<item android:state_checked="false">
<layer-list>
<item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
<shape android:shape="oval">
<solid android:color="#android:color/holo_red_light" />
<size android:width="34dp" android:height="34dp" />
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list>
<item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
<shape android:shape="oval">
<solid android:color="#4E505F" />
<size android:width="34dp" android:height="34dp" />
</shape>
</item>
</layer-list>
</item>
</selector>