SwitchCompat 스타일로 디자인 적용하기

SwitchCompat

SwitchCompat link

기본 디자인 입히기

뒷배경 track 과 스위치 아이콘 thumb 부분의 drawable 을 수정해서 커스텀 할 수 있다.

• Thumb Drawble

  state_checkd 를 통해서 checked 상태와 unchecked 상태를 설정한다.

 

• shape_switch_thumb_on

<shape android:shape="oval">
    <corners android:radius="10dp" />
    <size
        android:width="20dp"
        android:height="20dp" />
    <solid android:color="#ff00c6be" />
</shape>

• shape_switch_thumb_off

<shape android:shape="oval">
    <corners android:radius="10dp" />
    <size
        android:width="20dp"
        android:height="20dp" />
    <solid android:color="#80000000" />
</shape>

• Track Drwable

  state_checkd 를 통해서 checked 상태와 unchecked 상태를 설정한다.

<?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>

 

 

• shape_switch_track_on

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <corners android:radius="20dp" />
    <size
    	android:width="48dp"
        android:height="14dp" />
    <solid android:color="#bbbbbb" />
    <stroke
        android:width="1dp"
        android:color="@color/transparent" />
</shape>

• shape_switch_track_off

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <corners android:radius="20dp" />
    <size
            android:width="48dp"
            android:height="14dp" />
    <solid android:color="#f00c6be" />
    <stroke
            android:width="1dp"
            android:color="@color/transparent" />
</shape>

• 전체 코드

<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/setting_push_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/selector_switch_thumb"
    android:track="@drawable/selector_switch_track" />

원하는 디자인과 조금 다른 짜리몽땅한 모습이 보여진다. (약 34dp)

가로 길이를 조정하기 위해서는 app:switchMinWidth 값을 조정해준다.

<androidx.appcompat.widget.SwitchCompat app:switchMinWidth="48dp" />

 

---

Style 로 적용하기

• Switch Style 만들기

<style name="NoahSwitch" parent="Widget.AppCompat.CompoundButton.Switch">
      <item name="android:layout_width">wrap_content</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:thumb">@drawable/selector_switch_thumb_00c6be_eeeeee</item>
      <item name="android:track">@drawable/selector_switch_track_00c6be_bbbbbb</item>
      <item name="switchMinWidth">48dp</item>
  </style>

• 적용 코드

<androidx.appcompat.widget.SwitchCompat
	android:id="@+id/push_switch"
	style="@style/NoahSwitch"
/>

이벤트 연결하기

• Data Binding 을 이용하여 ViewModel 과 연동

<androidx.appcompat.widget.SwitchCompat android:checked="@{viewModel.pushOnOff}" android:onCheckedChanged="@{(_, isChecked)-> viewModel.setPushOnOff(isChecked)}" />

<androidx.appcompat.widget.SwitchCompat
	android:checked="@{viewModel.pushOnOff}"
    android:onCheckedChanged="@{(_, isChecked)-> viewModel.setPushOnOff(isChecked)}"
/>

• viewModel code

class SwitchViewModel :ViewModel{
	val pushOnOff : MutableLiveData<Boolean> = MutableLiveData()
	fun setPushOnOff( isTurnOn: Boolean) {
		// something
	}
}