[Android] Switch 버튼 customizing

Switch는 Thumb를 앞 뒤로 움직여서 On / Off 2가지 상태를 선택할 수 있는 위젯입니다.

요청하는 Switch 버튼 디자인

스위치 버튼을 넣어달라는 요청이 들어와서 UI를 확인해보니 아래와 같은 버튼이 생겼습니다.
많이 봤던 디자인이니 쉽게 끝낼 수 있을거라고 생각하고 xml에 들어가봅니다..

Switch vs SwitchCompat

Xml에 switch라고 쳐보면 기본 switch와 androidx.appcompat.widget.SwitchCompat이 보입니다.
어떤 것을 써야할까 고민을 해보다가 먼저 검색을 해봤습니다.

• Switch는 안드로이드 앱 버전에 따라 다른 UI를 보여주게 됩니다.
• 반면, AppCompat을 상속받은 SwitchCompat은 버전과 상관없이 똑같은 위젯을 보여줍니다.

Switch로 UI를 작성하면, 노란 형광색으로 영역이 표시되며 SwitchCompat으로 대체하라는 경고가 뜹니다.

기본 SwitchCompat UI

그런데 막상 SwitchCompat을 사용해서 버튼을 만들고 나니 Thumb의 색상과 뒤에 배경색, Thumb의 사이즈가 맨 위의 UI와 다르다는 것을 알게됩니다. 커스터마이징이 필요합니다.

커스터마이징 하기 위해서 우리는 우선 각 부분의 영역 이름을 알아야 합니다.

• thumb: 진한 초록색 동그라미
• track: thumb가 이동하는 길 (연한 초록색)

커스터마이징

UI에서 확인해보면 Thumb는 on / off 모든 상황에서 변하지 않습니다. 그대로 흰색입니다.
바뀌는건 track의 색이고, 이를 위한 selector를 만들어줘야 합니다.

1. selector_switch.xml

• state_checked="false" 일 때에는 회색을 가진 리소스를 가져옵니다.
• state_checked="true" 일 때에는 파란색을 가진 리소스를 가져옵니다.

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

2. 상태에 따라 다른 Track의 drawable 파일 생성

• state_checked="true" 일 때 사용될 'shape_switch_track_on.xml'

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <-- 양쪽 라운드 처리 -->
    <corners android:radius= "30dp" />
    
    <-- 트랙의 width / height 
    사실 width는 위젯 속성 중 'app:switchMinWidth'에 의해 설정되므로 크게 상관은 없습니다.-->
    <size
        android:width="51dp"
        android:height="43dp" />
        
    <-- 배경색 -->
    <solid android:color="#2d9cdb" />
</shape>

• state_checked="false" 일 때 사용될 'shape_switch_track_off.xml'

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <-- 양쪽 라운드 처리 -->
    <corners android:radius= "30dp" />
    
    <-- 트랙의 width / height 
    사실 width는 위젯 속성 중 'app:switchMinWidth'에 의해 설정되므로 크게 상관은 없습니다.-->
    <size
        android:width="51dp"
        android:height="43dp" />
        
    <-- 배경색 -->
    <solid android:color="#2d9cdb" />
</shape>

3. Thumb drawable 리소스 만들기

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="43dp"
        android:height="43dp" />
    <solid android:color="#FFFFFF" />

    <stroke
        android:width="6dp"
        android:color="#00ffffff"/>
</shape>

Switch 버튼 만들기

준비는 끝났습니다!
이제 액티비티의 xml로 돌아가 각 속성에 맞는 값과 리소스를 입력해주면 됩니다.
위에서 언급했듯 스위치의 height는 drawable의 크기를 따라가지만, width는 따로 설정해주어야 합니다.
이 때, app:switchMinWidth="숫자dp" 를 입력하시면 원하는 크기로 조절 할 수 있습니다.

 <androidx.appcompat.widget.SwitchCompat
                android:id="@+id/switchBtn"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:checked="true"
                android:gravity="center"
                android:thumb="@drawable/shape_switch_thumb"
                app:switchMinWidth="102dp"
                app:track="@drawable/selector_switch" />

디자인팀에서 요청한 스위치 버튼이 완성되었습니다. :)