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:
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?