androidkotlinswitchcompat

How to adjust thumb size smaller than track size in SwitchCompat Android


How to adjust thumb size smaller than track size(or how to adjust the size of the Thumb) in SwitchCompat Android.

Design

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


Solution

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

    enter image description here

    If you want a smaller thumb size, just adjust the size of the thumb stroke.