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
Post a Comment