안드로이드 스위치 버튼 커스텀

안드로이드 기본 스위치는

이렇게 생겼다.

커스텀 하기 위해서는 2개의 xml 파일이 필요하다.

하나는 selector와 관련된 파일, 다른 하나는 스위치에서 움직이는 스위치의 thumb를 위한 파일이다. 

 

1.switch_track_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="rectangle">
            <corners android:radius="15dp" />
            <size android:width="51dp" android:height="30dp" />
            <solid android:color="#D3D3D3" />
        </shape>

    </item>

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="15dp" />
            <size android:width="51dp" android:height="30dp" />
            <solid android:color="@color/grayBlue" />
        </shape>
    </item>
</selector>

위 파일로 만들어낸 모양이다. 

state_checked 를 통해 on/off 시 다른 형태를 보여 줄 수 있도록 했다. 

2. switch_track_thumb.xml

<?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:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
                <shape android:shape="oval">
                    <size android:width="24dp" android:height="24dp" />
                    <corners android:radius="45dp" />
                    <solid android:color="@color/white" />
                </shape>
            </item>
        </layer-list>
    </item>


    <item>
        <layer-list>
            <item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
                <shape android:shape="oval">
                    <size android:width="24dp" android:height="24dp" />
                    <corners android:radius="45dp" />
                    <solid android:color="@color/grayBlue" />
                </shape>
            </item>
        </layer-list>

    </item>
</selector>

위 파일로 만들어낸 모양이다.

마찬가지로 state_checked 를 추가 했다. 

 

그리고 나서 activity에서 

<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/switch1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="32dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    
    //여기부터 추가
    android:thumb="@drawable/switch_track_thumb"
    app:track="@drawable/switch_track_selector"
    app:thumbTextPadding="24dp"
    app:switchMinWidth="0dp"
    android:textOff=""
    android:textOn=""
    />

추가해주면 아래와 같은 결과물을 얻을 수 있다.