Toggle button in Iphone Style

Praveenkumar picture Praveenkumar · Mar 30, 2012 · Viewed 28.9k times · Source

In android the Toggle buttons are looks like below -

Android

Can we modify this as Iphone style like below -

Iphone

And, Can we include the iphone functionality of toggle button like drag to toggle feature also.

How to complete this action? Thanks in Advance.

Answer

Thắng picture Thắng · Sep 27, 2019

Use SwitchCompat:

<!-- SwitchCompat -->
    <androidx.appcompat.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"/>


 <!-- 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:shape="oval">
                        <solid android:color="@android:color/white" />
                        <size android:width="20dp" android:height="20dp" />
                        <stroke android:width="2dp" android:color="#0000ffff" />
                    </shape> <!-- shape circle -->
                </item>
            </selector>

 <!-- track_selector.x -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/holo_orange_dark"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/darker_gray"/>
            <corners android:radius="50dp"/>
        </shape>  
    </item>

</selector>

toggle button screenshot