Android Checkbox에 Custom 이미지 사용하기

안드로이드 UI작업을 하다보면,

Checkbox를 Custom 이미지를 사용해야할 경우가 정말 많습니다.

오늘은 어떻게 해야하는지 정리해 보도록 하겠습니다.

1. Checkbox의 HierArchy

Custom 이미지의 구현에 대해 보기 전에, CheckBox의 HierArchy를 보도록 하겠습니다.

아래 이미지에서, Button 클래스를 상속받고 있는 부분이 보이시나요?

커스텀하게 CheckBox를 사용하기 위해서는 이 Button 속성을 이용하는 것이 핵심인데요.

CheckBox가 Button을 상속하기 때문에 가능한 것 입니다.

 

핵심을 알았으니, 구현만 해주면 되겠네요.

구현에 필요한 Selector부터 만들어 보겠습니다.

 

2. Selector 생성

checkbox의 핵심은 checked의 state(상태)인데요.

이를 위해서 아래와 같이 Selector를 만들어 주면 됩니다.

state_checked에 대한 true, false값과 drawable을 지정해 줍니다.

 

 

3. XML에서 CheckBox

이제 layout에 checkbox를 넣어주면 될 텐데요.

Button의 자식이므로, button에 위에서 생성한 selector를 넣어주면 됩니다.

 

 

 

이것을 빌드해서 요즘 폰들에 넣어보면, 정상적으로 잘 보이는데요.

API17(젤리빈)에서 빌드를 해보면 그렇지 않다는 것을 알 수 있습니다.

아래와 같은 모습을 볼 수 있는데요.

이렇게 해서는 프로덕트 레벨로 나갈수가 없지요.

 

아래와 같이 Programming적으로 buttonDrawable을 설정해주니 해결 되었는데요.

setButtonDrawable메소드를 이용해 주면 됩니다.

 

빌드를 돌려보면 아래와 같이 정상적으로 나오는 것을 확인할 수 있습니다.

 

참고로, Checkbox의 background에는 위와 같은 원형이미지가 오고,

위에는 어떤 아이콘이 오도록 하고 싶다면,

아이콘을 button으로 하고, 위의 원형 이미지를 background로 적용해 주면 됩니다.

다만 이 경우에도, 하위버전에서는 setButtonDrawable메소드로 button으로 들어갈 drawable을 정해 주지 않으면,

위에서 보았던 것 처럼, native한 check박스이미지가 겹쳐 보이게 되므로 주의해야 합니다.

(다행히도, background의 경우는 동적으로 Java파일에서 setBackground할 필요는 없습니다.)

 

CheckBox의 커스텀 이미지 적용과 관련하여,

더 좋은 방법이 발견되면 이 글을 통해서 업데이트 하도록 하겠습니다.