[Android][kotlin] switch 버튼 색상 색상 바꾸기(custom) / 토글버튼(Toggle Button)

안녕하세요 챠니입니다!

 

이번에는 Switch버튼을 자신의 마음대로 커스텀(Custom)하는 방법에 대해서 알아보겠습니다.

먼저 Switch가 어떻게 구성이 되어있는지를 알아보겠습니다.

 

아래 그림을 보면서 설명하겠습니다.

 

이미지 출처: https://machine-woong.tistory.com/104

 

동그라미 버튼을 thumb, 동그라미 버튼이 움직이는 긴바가 track이라고 합니다.

 

자 그럼 switch버튼을 내 마음대로 변경을 하려면 thumb, track 이 두개를 작업해야함을 알 수 있습니다.

swtich버튼은 2가지의 상태값을 가지고 있습니다. "state_checked"가 true 또는 false 2가지 상태값을 가지게 됩니다.

 

아래 코드를 보면서 자세히 설명하겠습니다.

 

0. Drawable Resource File 만드는 방법

파일을 만드는 방법은 아래의 그림과 같습니다.

Drawable Resource File 만드는 방법

1. Track

 

*setting_switch_track_on.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="15dp" />
    <size
        android:width="75dp"
        android:height="25dp" />
    <solid android:color="#611c9095" />

<!--테두리 사용X, 코드 백업-->
<!--    <stroke-->
<!--        android:width="0dp"-->
<!--        android:color="#61000000" />-->
</shape>

 

*setting_switch_track_off.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="15dp" />
    <size
        android:width="75dp"
        android:height="25dp" />
    <solid android:color="#61000000" />


<!--테두리 사용X, 코드 백업-->
<!--    <stroke-->
<!--        android:width="0dp"-->
<!--        android:color="#61000000" />-->
</shape>

*setting_switch_track.xml

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

 

 

2. Thumb

*setting_switch_thumb_on.xml

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

<!--테두리 사용X, 코드 백업-->
<!--    <stroke-->
<!--        android:width="1dp"-->
<!--        android:color="#FFFFFF" />-->

</shape>

*setting_switch_thumb_off.xml

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

<!--테두리 사용X, 코드 백업-->
<!--    <stroke-->
<!--        android:width="1dp"-->
<!--        android:color="#FFFFFF" />-->
</shape>

*setting_switch_thumb.xml

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

 

 

 

3. Switch버튼 설정

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="false"
    android:track="@drawable/setting_switch_track"
    android:thumb="@drawable/setting_switch_thumb"/>

layout파일에서 track, thumb를 설정해줍니다.

 

 

switch버튼 클릭을 통하여 다음과 같은 Custom된 Switch를 사용할 수 있습니다.

swtich_off

 

switch_on

 

 

4. Tip

추가 팁을 드리자며 Switch 길이를 늘릴 수 있습니다.

android:swtichMinWidth = "***dp" 설정을 통하여 길이를 조절하면 되겠습니다.