안드로이드 CheckBox padding between background and image

보통의 체크박스는 다음과 같다.

 

<CheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="#ff0000"
  android:text="체크박스"/>

일반적인 체크박스

 

보통 여기서 디자인을 넣게되면 다음과 같이 작업을 하곤한다.

 

<CheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="#ff0000"
  android:button="@drawable/custom_image"
  android:paddingStart="10dp"
  android:paddingEnd="5dp"
  android:text="체크박스"/>

 

이렇게 커스텀으로 이미지를 사용해야하는 경우 android:button="@drawable/custom_image" 를 통해 넣게되는데,

이 방식으로 체크박스 이미지를 변경하는 경우 문제점이 하나 있다.

이미지와 백그라운드 사이에 padding을 넣을 수 없다.

백그라운드도 또한 체크여부에 따라 디자인이 바뀌어야 되는경우, 정상적인 방법으로는 저 앞에 부분의 공간을 띄울 수가 없다.

 

이 경우엔 어떻게 해야할까?

 

 

이러한 경우를 위해서는 android:button 이 아니라 android:drawableStart에 이미지를 넣어주어야한다.

 

<CheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="#ff0000"
  android:button="@null"
  android:drawableStart="@drawable/surveycheck"
  android:drawablePadding="10dp"
  android:paddingStart="20dp"
  android:paddingEnd="5dp"
  android:text="체크박스"/>

기존의 button은 @null을 통해 제거한다.

background와 체크박스 이미지 사이의 공간은 paddingStart를 통해 조절이 가능하며,

체크박스 이미지와 text 사이의 공간은 drawablePadding을 통해 조절이 가능하다.

원하는 데로 조절이 가능한 체크박스가 완성되었다.

 

이런 디자인이 흔한 경우는 아니라서 방법을 찾는데 시간이 꽤 걸렸다.

 

이 글이 누군가의 시간을 아껴주길 바라면서 포스팅을 마친다.