How to customize switch in android

Solanki Zeel picture Solanki Zeel · Feb 26, 2019 · Viewed 9.5k times · Source

enter image description here

I need to implement this type of switch in my app

Answer

Rahul Khurana picture Rahul Khurana · Feb 26, 2019

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>