[Android/Java] 라디오 버튼(Radio Button) 커스텀 하기

반응형

프로젝트를 진행하면서 상태를 선택하는 버튼을 어떻게 구성할까 고민이 많았다.

저번 프로젝트에서 라디오 버튼을 커스텀하면 다양하게 변화를 시킬 수 있다는 것을 배워서 이번에도 사용해보기로 했다.

기본 라디오 버튼 모양이 아닌, 커스텀을 통해 내가 원하는 대로 변형을 하여 구현하는 방법을 공부해보았다.

---

 

1. 원하는 형태로 xml 구성하기

Radio Button을 사용하려면 RadioGroup으로 감싸줘야 한다.

버튼은 2개만 필요해서 2개만 넣었지만, 원하는 대로 갯수를 늘려서 사용할 수도 있다.

background에 적혀있는 selector가 작동하게 하기 위해서는 추가로 xml 파일들이 필요하다.

 

 

 

2. selector.xml 생성하기

selector를 만들기 위해서는 '버튼을 체크했을 때 / 체크하지 않았을 때' 두 가지 상태를 넣어줘야 한다.

일단 먼저 drawable 폴더 우클릭 - New - Drawable Resource File 방법으로 xml 파일을 생성해준다.

 

 

왼쪽, 오른쪽 각각 selector를 만들어줘야 하기 때문에 총 6개의 xml 파일이 필요하다.

위의 방법대로 6개의 xml 파일을 생성해 주면 된다. (색상, 모서리 둥근 정도, 테두리 두께 등은 원하는 대로 설정해주면 된다.)

 

 

1) radio_button_left_checked.xml

 

2) radio_button_left_uncheck.xml

 

3) radio_button_left_selector.xml

버튼을 체크했을 때 - radio_button_left_checked / 체크하지 않았을 때 - radio_button_left_uncheck

이렇게 각각 상태에 맞게 넣어주면 selector가 완성된다. 오른쪽도 마찬가지로 설정해주면 된다.

 

4) radio_button_right_checked.xml

 

5) radio_button_right_uncheck.xml

 

6) radio_button_right_selector.xml

 

 

 

3. Java Class 생성하기

단순히 UI만 구성했다고 작동하는 것은 아니기 때문에, Java Class 파일을 생성하고 xml 파일을 연결시켜 작동되게 해야 한다.

java - package 폴더 우클릭 - New - Java Class 순으로 클릭하여 생성한다.

 

 

onRadioButtonClicked는 xml 파일에서 onClick 으로 주었던 값이다.

 

switch 문으로 하여 왼쪽, 오른쪽 각각 체크 되어있는지 if문으로 확인 후에 text 색상이 변하도록 설정하였다.

 

parseColor를 사용하지 않고 RED, GREEN 등 기본 색상을 사용할 수 있긴 하지만,

원하는 색상의 hex를 알고 있다면 parseColor를 사용하여 "" 안에 넣어주면 된다.

 

 

 

최종적으로 완성된 모습이다.