Android Tutorial: RadioButton

By:   –  Last updated:   –  #android ·  #java

Code Theme [Dark]

Content Overview [Hide]

Simple Android RadioButton example.

Radio button is used to make a single choice among optional items which are mutually exclusive. You must group radio buttons together inside a RadioGroup, thereby Android system will ensure that only one radio button in the group can be selected at a time.

Add two radio groups to Activity layout. One is for checking gender, the other is for selecting a pet. And one is horizontal, the other is vertical.

android-ui-radiobutton

You can achieve above UI layout either simply by dragging and dropping wigdets or by writing XML markups directly in Activity layout file: res/layout/activity_uicontrols_radiobutton.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.codevoila.androidtuts.uicontrols.RadioButtonActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Gender"/>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/radio_group_gender">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male"
            android:id="@+id/radio_gender_male"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Female"
            android:id="@+id/radio_gender_female"/>
    </RadioGroup>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Pet"/>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/radio_group_pet">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dog"
            android:id="@+id/radio_pet_dog"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cat"
            android:id="@+id/radio_pet_cat"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bird"
            android:id="@+id/radio_pet_bird"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Fish"
            android:id="@+id/radio_pet_fish"/>
    </RadioGroup>
</LinearLayout>

Implement the RadioGroup.OnCheckedChangeListener interface in app Activity. And set the Activity to be OnCheckedChangeListener of the two radio groups.

/* RadioButtonActivity.java */

public class RadioButtonActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_uicontrols_radiobutton);

        RadioGroup genderRadioGroup = (RadioGroup) this.findViewById(R.id.radio_group_gender);
        RadioGroup petRadioGroup = (RadioGroup) this.findViewById(R.id.radio_group_pet);

        genderRadioGroup.setOnCheckedChangeListener(this);
        petRadioGroup.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
        StringBuilder msg = null;
        RadioButton checkedRadioButton = null;

        int radioGroupId = radioGroup.getId();

        if (radioGroupId ==  R.id.radio_group_gender) {
            msg = new StringBuilder("Gender: ");
        } else if (radioGroupId == R.id.radio_group_pet) {
            msg = new StringBuilder("Pet: ");

            // Do sth separately
            switch (checkedId) {
                case R.id.radio_pet_dog:
                    msg.append("[bark] ");
                    break;
                case R.id.radio_pet_cat:
                    msg.append("[meow] ");
                    break;
                case R.id.radio_pet_bird:
                    msg.append("[twitter] ");
                    break;
                case R.id.radio_pet_fish:
                    break;
                default:
                    break;
            }
        }

        // Get the radio button currently checked
        checkedRadioButton = (RadioButton) this.findViewById(checkedId);

        if (msg != null && checkedRadioButton != null) {
            Toast.makeText(this,
                    msg.append(checkedRadioButton.getText()),
                    Toast.LENGTH_LONG).show();
        }
    }
}

Following is the screenshot of running results.

android-ui-radiobutton-example

Note that the onCheckedChanged() method has two arguments. The first argument is the reference of radio group instance currently clicked. The second argument is the resource id of the raido button currently checked in the clicked radio group.