How to adjust thumb size smaller than track size(or how to adjust the size of the Thumb) in SwitchCompat Android.
Specifically I want my SwitchCompat to look like this.
I have consulted many other questions on stackoverflow but got no result or undesirable results. How to achieve as shown in the image above
I found a way to work around this. Simply set the Thumb's stroke color to transparent to achieve that effect.
ic_track
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item>
<shape>
<gradient
android:startColor="@color/orange_fec017"
android:endColor="@color/orange_ff6200"
android:angle="-60" />
<corners android:radius="100dp" />
<size android:width="40dp" android:height="20dp" />
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="false">
<layer-list>
<item>
<shape>
<solid android:color="#E0E0E0" />
<corners android:radius="100dp" />
<size android:width="40dp" android:height="20dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
ic_thumb:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF" />
<size android:width="@dimen/dp20" android:height="@dimen/dp20"/>
<stroke android:width="@dimen/dp4" android:color="@color/transparent"/>
</shape>
Switch
<androidx.appcompat.widget.SwitchCompat
android:id="@+id/switch_customize_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/ic_thumb"
app:track="@drawable/ic_track"
android:checked="true"
android:gravity="center"
android:theme="@style/mySwitchTheme"
android:layout_marginEnd="@dimen/dp15"
app:layout_constraintBottom_toBottomOf="@+id/label_title"
app:layout_constraintEnd_toEndOf="@+id/counter_text"
app:layout_constraintTop_toTopOf="@id/label_title" />
If it doesn't work, add the theme section.
<style name="mySwitchStyle" parent="@style/Widget.AppCompat.CompoundButton.Switch">
</style>
<style name="mySwitchTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="switchStyle">@style/mySwitchStyle</item>
</style>
And here is the result:
If you want a smaller thumb size, just adjust the size of the thumb stroke.