Search code examples
androidxmlswitchcompat

How to customize switch in android


enter image description here

I need to implement this type of switch in my app


Solution

  • You can use below given code. You might need to adjust height and width in thumb_selector file

    <android.support.v7.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:thumb="@drawable/thumb_selector"
        app:track="@drawable/track_selector" />
    

    track_selector.xml

        <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
                <solid android:color="@color/light_pink" />
                <corners android:radius="50dp" />
                <size android:width="2dp" android:height="24dp" />
            </shape>
        </item>
        <item android:state_checked="false">
            <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
    
                <corners android:radius="50dp" />
                <size android:width="2dp" android:height="24dp" />
                <stroke
                    android:width="2dp"
                    android:color="@color/white" />
            </shape>
        </item>
    </selector>
    

    thumb_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="false">
            <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
                <solid android:color="#ffffff" />
                <corners android:radius="100dp" />
                <size android:width="18dp" android:height="18dp" />
                <stroke android:width="4dp" android:color="#0000ffff" />
            </shape>
        </item>
    </selector>