[android] Switch 스타일 바꾸기

그 동안 단 한 번도 갑님이 기본 스위치 버튼을 쓰게 놔둔 적이 없다. 매번 구글링하기 귀찮아서 블로그에 남긴다.

먼저 단추에 해당하는 thumb 부터 만들어보자

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/bg_default_switch_thumb_checked" android:state_checked="true" />
  <item android:drawable="@drawable/bg_default_switch_thumb_normal" />
</selector>

checked=false 일 때 표시할 thumb

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid android:color="#999999" />
  <size
    android:width="20dp"
    android:height="20dp" />
</shape>

checked=true 일 때 표시할 thumb

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid android:color="#b60b03" />
  <size
    android:width="20dp"
    android:height="20dp" />
</shape>

그 다음은 track을 만들어보자.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/bg_default_switch_track_checked" android:state_checked="true" />
  <item android:drawable="@drawable/bg_default_switch_track_normal" />
</selector>

checked=false 일 때의 track

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#e5e5e5" />
  <corners android:radius="8.5dp" />
  <size
    android:width="28dp"
    android:height="16dp" />
</shape>

checked=true 일 때의 track

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#e2231a" />
  <corners android:radius="8.5dp" />
  <size
    android:width="28dp"
    android:height="16dp" />
</shape>

이제 사용해보자. 이렇게 하나씩 추가하면 된다.

<androidx.appcompat.widget.SwitchCompat
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:thumb="@drawable/bg_default_switch_thumb"
  android:track="@drawable/bg_default_switch_track" />

하지만 어차피 모든 화면에서 똑같이 사용할테니 이렇게 기본 스타일로 만드는게 편할 것이다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="switchStyle">@style/DefaultSwitch</item>
</style>
  
<style name="DefaultSwitch" parent="Widget.AppCompat.CompoundButton.Switch" >
  <item name="android:thumb">@drawable/bg_default_switch_thumb</item>
  <item name="android:track">@drawable/bg_default_switch_track</item>
</style>

[android] Switch 스타일 바꾸기

관련