Skip to main content

Android : Toggle button like iOS

Please follow below steps to accomplish toggle button like iOS using xml only.


Step 1: Add switch control on your layout file.

<Switch  android:id="@+id/mySwitch"        
         android:layout_width="wrap_content"        
         android:layout_height="wrap_content"
         android:thumb="@drawable/selector"        
         android:track="@drawable/track"
/>

Step 2 : Create selector.xml in drawable folder


<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">        <shape                android:shape="oval">            <solid android:color="#838282"/>            <stroke                    android:width="@dimen/switch_stroke_width"                    android:color="#696969"/>            <size android:width="@dimen/switch_height" android:height="@dimen/switch_height"/>        </shape>    </item>
    <item android:state_checked="false">        <shape                android:shape="oval">            <solid android:color="#ffffff"/>            <stroke                    android:width="@dimen/switch_stroke_width"                    android:color="#696969"/>            <size android:width="@dimen/switch_height" android:height="@dimen/switch_height"/>        </shape>    </item>
    <item android:state_checked="true">        <shape                android:shape="oval">            <solid android:color="#ffffff"/>
            <stroke                    android:width="@dimen/switch_stroke_width"                    android:color="@color/colorPrimary"/>            <size android:width="@dimen/switch_height" android:height="@dimen/switch_height"/>        </shape>    </item>
</selector>

Step 2 : Create track.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">        <shape android:shape="rectangle"               android:visible="true"               android:dither="true"               android:useLevel="false">            <solid android:color="#838282"/>            <corners                    android:radius="@dimen/switch_height"/>            <size                    android:width="@dimen/switch_width"                    android:height="@dimen/switch_height"/>            <stroke                    android:width="@dimen/switch_stroke_width"                    android:color="#696969"/>        </shape>    </item>
    <item android:state_checked="false">        <shape android:shape="rectangle"               android:visible="true"               android:dither="true"               android:useLevel="false">            <solid android:color="#696969"/>            <corners                    android:radius="@dimen/switch_height"/>            <size                    android:width="@dimen/switch_width"                    android:height="@dimen/switch_height"/>            <stroke                    android:width="@dimen/switch_stroke_width"                    android:color="#696969"/>        </shape>    </item>
    <item android:state_checked="true">        <shape android:shape="rectangle"               android:visible="true"               android:dither="true"               android:useLevel="false">
            <solid android:color="@color/colorPrimary"/>            <corners                    android:radius="@dimen/switch_height"/>            <size                    android:width="@dimen/switch_width"                    android:height="@dimen/switch_height"/>
            <stroke                    android:width="@dimen/switch_stroke_width"                    android:color="@color/colorPrimary"/>        </shape>    </item>
</selector>

Step 2 : Add dimensions in dimen.xml file

<?xml version="1.0" encoding="utf-8"?><resources>    <dimen name="switch_width">80dp</dimen>    <dimen name="switch_stroke_width">1dp</dimen>    <dimen name="switch_height">40dp</dimen></resources>


Comments