Halo teman-teman, kali ini kita akan membahas mengenai switch punya Android. Dimana switch ini biasanya digunakan untuk menangani ui opsi on atau off, misalnya kamu ingin membuat aplikasi pengaturan seperti pengaturan audio enable atau disable.

Default DesignModifikasi Design
table design switch

Menarik ya? untuk defaultnya, Kamu hanya cukup memiliki codenya seperti ini :

<androidx.appcompat.widget.SwitchCompat
     android:id="@+id/tv_status"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

Namun untuk memodifikasi, kamu harus punya code sperti ini :

<androidx.appcompat.widget.SwitchCompat
     app:track="@drawable/selector_switch_track_blue"
     android:thumb="@drawable/selector_switch_thumb"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

Dari sini, teman-teman bisa membedakannya akrena track dan thumb. Jadi apa itu? track adalah bagian lonjongnya dan thumb adalah lingkarannya. Masih bingung? nih kita kasih detailnya (ini isi track dan thumb) :

<?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="rectangle">
            <corners android:radius="24dp" />
            <solid android:color="@color/white" />
            <stroke android:color="@color/grey_300" android:width="1dp"/>
            <size android:height="20dp" />
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="24dp" />
            <solid android:color="@color/blue_500" />
            <stroke android:color="@color/grey_300" android:width="1dp"/>
            <size android:height="20dp" />
        </shape>
    </item>
</selector>
<?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="@color/white"/>
            <size android:width="24dp"
                android:height="24dp"/>
            <stroke android:width="1dp"
                android:color="@color/grey_300"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
            <size android:width="24dp"
                android:height="24dp"/>
            <stroke android:width="1dp"
                android:color="@color/grey_300"/>
        </shape>
    </item>
</selector>

Sekarang, kamu bisa cobain. Jika saat preview tidak ada designnya, kamu bisa coba gonta ganti pada bagian tema atau kalau pusing langsung run saja.

Semoga bermanfaat

Categorized in:

Programmer

Tagged in:

,