Switch 커스텀

스위치를 원하는 모양으로 바꾸기 위해선 스위치의 백그라운드(track)와 버튼 모양(thumb)을 따로 다뤄줘야한다

drawable폴더에 각각 사용할 selector 파일을 만들어야한다

1. track : 스위치의 백그라운드

<?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:height="25dp" android:width="50dp"/>
            <solid android:color="@color/primary_color"/>
            <corners android:radius="46dp"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:height="25dp" android:width="50dp"/>
            <solid android:color="@color/grey_fna_color"/>
            <corners android:radius="46dp"/>
        </shape>
    </item>
</selector>

2. thumb : 스위치의 버튼 부분

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp">
                <shape android:shape="oval">
                    <size android:width="24dp" android:height="24dp"/>
                    <solid android:color="@color/white"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp">
                <shape android:shape="oval">
                    <size android:width="24dp" android:height="24dp"/>
                    <solid android:color="@color/grey_fna_color"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

3. style 파일에 커스텀 토글 명시하기

위에서 만든 파일을 사용하기 위해 스타일을 명시한다

<style name="category_toggle">
        <item name="track">@drawable/switch_selector</item>
        <item name="android:thumb">@drawable/switch_thumb</item>
        <item name="android:enabled">true</item>
</style>

4. 화면 파일에서 사용

스위치 style에 스타일 파일에 작성한 나만의 커스텀 스위치 이름을 써준다

<androidx.appcompat.widget.SwitchCompat
            android:id="@+id/swbtn_alarm"
            style="@style/category_toggle"
            android:switchMinWidth="0dp"
            android:textOff=""
            android:textOn=""
            android:background="@null"
            android:thumbTextPadding="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

미리보기로 보면 엥? 내가 설정한 색이 아닌데? 적용이 안되나? 싶어 삽질했다
근데 빌드해보니 잘됨;ㅎ
한방 먹엇다