Custom RadioGroup UI 변경

목표 : 위 그림처럼 생긴 라디오 버튼을 만들어보자

1. 라디오 그룹 백그라운드로 쓸 shape xml 파일 만들기

라디오 그룹 백그라운드로 적용할 shape 파일 작성

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#ECECEC"/>
    <stroke
        android:width="0.5dp"
        android:color="#9AA2AF"
        />
    <corners android:radius="30dp"/>
</shape>

---

2. 라디오 버튼이 선택될 때 쓸 백그라운드와 text color 바꿔주는 selector xml 파일 각각 만들기

라디오 버튼용 백그라운드 selector.xml

• 상위를 selector로 두고 라디오 버튼의 checked가 true일 때 적용 될 백그라운드

<?xml version="1.0" encoding="utf-8"?>
<!-- 라디오 버튼 선택하면 status=ture인 백그라운드 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</selector>

라디오 버튼 select시 적용할 text color 용 xml 파일

• 상위를 selector로 두고 true일때와 false일 때 변경될 색상 작성

<?xml version="1.0" encoding="utf-8"?>
<!-- 라디오 버튼 선택하면 보여질 텍스트 색 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#ffffff"/>
    <item android:state_checked="false" android:color="#9C9C9C"/>
</selector>

---

3. 위에서 만든 파일 화면에 적용

라디오 버튼 그룹과 라디오 버튼에 위에서 만든 백그라운드와 텍스트 적용

<RadioGroup
            android:id="@+id/radio_group"
            android:background="@drawable/drawable_radio_group_tab_background"
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RadioButton
                android:id="@+id/rb_metric_units"
                android:background="@drawable/drawable_units_tab_selector"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:text="metric Units"
                android:textAllCaps="true"
                android:textColor="@drawable/drawable_units_tab_text_color"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_weight="0.50"
                android:layout_width="0dp"
                android:layout_height="35dp"/>

            <RadioButton
                android:id="@+id/rb_us_units"
                android:background="@drawable/drawable_units_tab_selector"
                android:button="@null"
                android:checked="false"
                android:gravity="center"
                android:text="us Units"
                android:textAllCaps="true"
                android:textColor="@drawable/drawable_units_tab_text_color"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_weight="0.50"
                android:layout_width="0dp"
                android:layout_height="35dp"/>

        </RadioGroup>