[Android, Custom Switch] 안드로이드 스위치 버튼 꾸미기

안녕하세요. 블랙진입니다.

오늘은 알림을 ON, OFF 할 때 많이 사용하는 Switch 를 Customizing 하는 법에 대해 포스팅 해보겠습니다.

아래는 기본 Switch 뷰와 코드입니다.

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

1. Switch Track 설정

스위치의 배경이라고 생각하시면 됩니다. 코드는 아래와 같습니다.

switch_track_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/switch_track_off"
        android:state_checked="false"/>

    <item
        android:drawable="@drawable/switch_track_on"
        android:state_checked="true"/>

</selector>

스위치 selector 입니다. switch_track_on, switch_track_off xml 을 체크 되었을 떄와 안되었을 때에 맞춰 보여줄 수 있습니다.

switch_track_on.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners
        android:radius="15dp" />

    <size
        android:width="51dp"
        android:height="30dp" />

    <solid
        android:color="#4cd964" />

    <!--stroke
        android:width="2dp"
        android:color="#000000" /-->

</shape>

switch 가 on 되었을 때 배경은 초록색으로 설정하였습니다.

switch_track_off.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners
        android:radius="15dp" />

    <size
        android:width="51dp"
        android:height="30dp" />

    <solid
        android:color="#9b9b9b" />

    <!--stroke
        android:width="2dp"
        android:color="#000000" /-->

</shape>

switch 가 off 되었을 때 배경은 회색으로 설정하였습니다.

2. Switch Thumb 설정

스위치 할 때 움직이는 동그란 아이콘 입니다.

switch_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="30dp"
        android:height="30dp" />

    <solid
        android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#FFFFFF" />

</shape>

3.  Switch 의 track 와 thumb 를 설정해 사용하시면 됩니다.

<Switch
    android:layout_width="wrap_content"
    android:layout_height="31dp"
    android:track="@drawable/switch_track_selector"
    android:thumb="@drawable/switch_thumb"/>

그러면 위와 같이 움직이는 Switch 가 완성됩니다.~!~!

참고로 Switch View 에 setOnCheckedChangeListener 을 설정하여 원하시는 코드를 실행 하시면 됩니다.

switchView.setOnCheckedChangeListener(object : CompoundButton.OnCheckedChangeListener{
    override fun onCheckedChanged(buttonView: CompoundButton, isChecked: Boolean) {
     
        if(isChecked) {
            //체크된 상태 취소 시 코드
        } else { 
            //체크된 상태로 만들 시 코드
        }
    }

})

ps) 위 Switch 를 보면 원(thumb)에 padding이 없고 배경이 흰색이여서 뭔가 어색함을 느낄 수 있습니다.
이때 원(thumb)에 padding 을 주는 법은 아래와 같습니다.

이렇게 하면 좀 더 자연스럽고 멋진 switch 가 됩니다.

switch_thumb.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp">

        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <size
                android:width="29dp"
                android:height="29dp" />

            <solid
                android:color="#FFFFFF" />

            <stroke
                android:width="1dp"
                android:color="#FFFFFF" />

        </shape>
    </item>
</layer-list>

<2019.03.27 추가>

API 21 하위 버전에서는 아래와 같이 스위치가 찌그러져 보입니다.

이에 대한 해결법을 Stackoverflow 에서 찾아 링크를 남깁니다.

해결법

track, thumb 를 추가한 Switch 에 아래 4가지 사항을 추가해줍니다.

android:switchMinWidth="0dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="15dp"