[Android] Custom RadioButton 만들기

◇ Custom RadioButton 이란?

 

  기본 Default 라디오 버튼은 동그라미 2개 모양으로 표현이 됩니다. 기본적이고 간단한 UI를 원하면 기본 RadioButton을 사용하여도 되지만 요즘 대세인 좋아요 나빠요로 표현해야 할 일이 생겨서 Customizing 해본적이 있습니다. 확실히 기본 라디오 버튼보다는 이쁘며 라디오 버튼 설명 필요없이 버튼 하나로 어떤 상태인지 표현이 가능하여 효율적입니다. 부제목 그대로 나만의 라디오 버튼을 만드는 것을 RadioButton을 Customizing 하는것을 의미합니다.

 

 

  상단의 Default RadioButton을 아래 이미지 좋아요 버튼으로 바꿔서 표현해 보겠습니다. 준비해야할 것은 아무것도 눌리지 않았을때의 좋아요(검정) 나빠요(검정) 클릭이 되었을때의 좋아요(파랑) 나빠요(빨강) 네 가지의 이미지가 필요합니다.

  위젯을 이용한 기본 RadioButton만드는 방법을 모르신다면 http://yoo-hyeok.tistory.com/55 에서 사전지식을 습득한 이후에 진행하심이 훨씬 수월합니다.

 

 

◇ Custom RadioButton 만들기

 

 

 /res/drawable/ 내에 black_like.png, black_unlike.png(hate가 더 좋은표현이겠네요..), like.png, unlike.png 이미지 파일을 넣어줍니다.  같은 경로에 radio_button_like.xml 과 radio_button_unlike.xml을 만들어 줍니다.

 

 

 

radio_button_like.xml에 다음과 같이 적어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked= "false"
    android:drawable = "@drawable/black_like"></item>
<item android:state_checked= "true"
    android:drawable = "@drawable/like"></item>
</selector>

selector를 이용하여 상태가 false이면 black_like를 true면 like를 보여지도록 만든 xml입니다.

 

radio_button_unlike.xml 다음과 같이 적어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked= "false"
        android:drawable = "@drawable/black_unlike"></item>
    <item android:state_checked= "true"
        android:drawable = "@drawable/unlike"></item>
</selector>

위와 반대로 false면 black_unlike true면 unlike를 보여주도록 합니다.

 

마지막으로 라디오 버튼이 들어갈 xml을 작성해줍니다. 저는 activity_main.xml 입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <RadioGroup
            android:id="@+id/radioGroup"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RadioButton
                android:text="좋아요"
                android:id="@+id/rg_btn1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@drawable/radio_button_like" />

            <RadioButton
                android:text="나빠요"
                android:layout_weight="1"
                android:button="@drawable/radio_button_unlike"
                android:id="@+id/rg_btn2"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />

        </RadioGroup>

    </LinearLayout>

</LinearLayout>

25 : android:button="@drawable/radio_button_like"로 설정해주면

좋아요 라디오 버튼이 Customizing 하여 적용됩니다.

30 : 반대로 나빠요 버튼이 Customizing 하여 적용됩니다.

 

이제 빌드하시면 RadioButton이 바뀐것을 확인 할 수 있습니다.

 

◇ 결과

 

 

버튼 이벤트는 id값을 넣어줘서 사용하시면 됩니다.(기존 사용방법과 동일)

 

 

잘못된 점은 지적은 감사드리며

 

질문이나 궁금하신점 있으시면 댓글 남겨주세요