创建自定义单选按钮

Question

I am trying to create the attached image using radio button groups. After trying multiple combinations I am not able to achieve what is intended. The intention is to create a circular background around the solid circle whenever one radio button is selected.

Any help would be appreciated.

Answer 1

The radio button images are controlled by a StateListDrawable . When a radio button is check (state_checked="true"), the drawable assigned to the checked state is shown. When the state is "not checked" (state_checked="false"), the drawable assigned to the "not checked" state is shown. Here is an example StateListDrawable :

custom_radio_button.xml

<selector>
    <item android:state_checked="true" android:drawable="@drawable/ic_baseline_check_circle_24" />
    <item android:state_checked="false" android:drawable="@drawable/ic_baseline_check_circle_outline_24" />
</selector>

Here, I have just selected two vector graphic files from Android Studio. You will need to create the checked/unchecked images that you want.

Now, in the XML for the layout, specify the you want to use this StateListDrawable for the radio button.

...some XML...
<RadioButton
    android:id="@+id/radioButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/custom_radio_button"
    android:checked="true"
    android:text="RadioButton 1" />
...more XML...

You would need to place this radio button and its sisters into a radio group.

Putting it all together gives the following: