Radio Button Control

Radio button is also common control to build user interface. It allows user to select one option from a group. This group is always mutually exclusive and when user select one option from the group the other options automatically deselected.

On Layout file radio button uses <radiobutton> element and those radio buttons usually grouped <radiogroup> element. Radio Button has “checked” property to check/uncheck the option. By default checked is false and user can set “checked” using android:checked="true". Text property shows the read only content next to the radio button.

 <radiogroup android:id="@+id/radioGroupLanguage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
    <radiobutton android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Arabic"
                 android:checked="true"
                 android:id="@+id/radioButton1" />
    <radiobutton android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="English"
                 android:id="@+id/radioButton2" />
    <radiobutton android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Dutch"
                 android:id="@+id/radioButton3" />
    <radiobutton android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Danish"
                 android:id="@+id/radioButton4" />
 </radiogroup>

RadioButton exposes the isChecked() method to get the current state of the radio button and setChecked(boolean) method to select or deselect the radio button. Add the two buttons to show selected value and clearing the selected radio button.

 <linearlayout android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center">
     <button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Selected"
        android:layout_margin="4dp"
        android:layout_gravity="center_horizontal"
        android:onclick="showButtonHandler" />
     <button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clear All"
        android:layout_margin="4dp"
        android:layout_gravity="center_horizontal"
        android:onclick="clearAllButtonHandler" />
 </linearlayout>

Set the “android:onClick” property of the both buttons and write handler for them in code file.

 public void showButtonHandler(View v){
  
    RadioButton   button1 = (RadioButton)findViewById(R.id.radioButton1);
    RadioButton button2 = (RadioButton)findViewById(R.id.radioButton2);
    RadioButton button3 = (RadioButton)findViewById(R.id.radioButton3);
    RadioButton button4 = (RadioButton)findViewById(R.id.radioButton4);
        
    String selectedText = new String();
    
    if(button1.isChecked())
    {
        selectedText = (String)button1.getText();
    }
    else if(button2.isChecked())
    {
        selectedText = (String)button2.getText();
    }
    else if(button3.isChecked())
    {
        selectedText = (String)button3.getText();
    }
    else if(button4.isChecked())
    {
        selectedText = (String)button4.getText();
    }
    else
    {
        selectedText = "No item is selected.";
    }
   
 Toast.makeText(getApplicationContext(),selectedText, Toast.LENGTH_SHORT).show();
}

 public void clearAllButtonHandler(View v)
 {
    RadioButton   button1 = (RadioButton)findViewById(R.id.radioButton1);
    RadioButton button2 = (RadioButton)findViewById(R.id.radioButton2);
    RadioButton button3 = (RadioButton)findViewById(R.id.radioButton3);
    RadioButton button4 = (RadioButton)findViewById(R.id.radioButton4);
    button1.setChecked(false);
    button2.setChecked(false);
    button3.setChecked(false);
    button4.setChecked(false);
 }

Check the checked state of the radio button using isChecked() and if it is true then show message. setChecked() method is use to select or deselect radio button from code file.

But the better way to get the selected item is, get it from the RadioGroup. In above code every time the code will be change whenever user add or remove radio button in the group. Get the RadioGroup in the view and get the checked radio button id using the “getCheckedRadioButtonId()” method.

 RadioGroup group = (RadioGroup) findViewById(R.id.radioGroupLanguage);
 // get the checked radiobutton id
 int selectedId = group.getCheckedRadioButtonId();

Once you get the id of the selected radio button, find the radio button from view using that id. See the full code below

 public void showGroupButtonHandler(View v) {
    RadioGroup group = (RadioGroup) findViewById(R.id.radioGroupLanguage);
    
    // get the checked radiobutton id
    int selectedId = group.getCheckedRadioButtonId();
    
    // find the radiobutton by returned id	
    RadioButton checkedRadioButton = (RadioButton) findViewById(selectedId);
    
    if (checkedRadioButton != null) {
        Toast.makeText(getApplicationContext(),
                checkedRadioButton.getText(), Toast.LENGTH_SHORT).show();
    }
    else
    {
        Toast.makeText(getApplicationContext(),
                "No Element is Selected", Toast.LENGTH_SHORT).show();
    }
 }
 public void clearAllGroupButtonHandler(View v)
 {
    RadioGroup  group  = (RadioGroup)findViewById(R.id.radioGroupLanguage);
    group.clearCheck();
 }

Set RadioButton style for checked and Unchecked

Android also proved a way to change style or image for different states of the radio button. Put all the images for different states in the drawable folder. Add new xml selector file style_radio.xml in the drawable folder. See the image below

Add the following xml in the file.

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

Add the radio button in the layout and set xml drawable resource to the button property of the radio button android:button="@drawable/style_radio".

 <radiobutton android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Water"
                 android:button="@drawable/style_radio"
                 android:id="@+id/styleButton1" />

Handling event of the Radio Group

Handling of the click event for the radio button is same as the checkbox and button. Radio Group also exposes checked change event to notify application whenever the selection of the radio button within that group is changed.

RadioGroup radioFoodGroup = (RadioGroup)findViewById(R.id.radioFoodGroup);

radioFoodGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        
        // Get Radio by Id
        RadioButton radioButton = (RadioButton) findViewById(i);
        
        // If any selected Radio Button Found
        if(radioButton != null) {
            Toast.makeText(getApplicationContext(),
                    radioButton.getText(), Toast.LENGTH_SHORT).show();
        }
        else{
            Toast.makeText(getApplicationContext(),
                    "No item is Selected", Toast.LENGTH_SHORT).show();
        }
    }
});

Register the “setOnCheckedChangeListener” listerner and in the “onCheckedChanged” method there are two parameters one is the radio group and second is the id of the selected radio button. Find the radio by id and show its text.