RadioButton in Android – Implementation and Overview

RadioButton in Android – Implementation and Overview

How many times have you seen a RadioButton in your android application (It is actively replaced by switches!!). If you have seen switches like below, these are Modified RadioButtons(They do the same work as that of a Radio Button).

Radio Buttons in particular lets user select an answer (Can be any number of answers for a question), you can select multiple options (If it is not grouped using a RadioGroup), however a switch is just a toggle button for one question.

We will see how Radio Buttons are created and Radio Groups can be used to create a MCQ question answer section.

RadioButtons – Declaration

<RadioButton android:id="@+id/button_radio1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Check here"
    android:onClick="onRadioButtonClicked"/>

This will create a simple radio button like below

Simple RadioButton
Simple RadioButton

RadioButtons – Frequently Used Properties

android:id – This is important to identify the

android:background – This is a drawable to use as the background.

android:onClick – Important to give a click listener to every radio button

android:text – Add the text you want to be associated with the RadioButton

android:contentDescription – One of the benifits on content description is to make your application compatible with the accessibility of the Android Phone. This is important to give a better reach for your application.

Additionally, the normal properties like android:margin, android:padding are used along with this as well.

RadioButtons – Using RadioGroups to wrap the Buttons

The key need for a RadioGroup is to bind all your RadioButtons in such a way that, you will be able to create a mutually exclusive set of Buttons (The rectangular button is different)(That is if one button is clicked, others will be un-clicked). The default behaviour of a RadioButton is to accept when pressed and un-clicked when pressed again. Using RadioGroups will create a mutually exclusive setup that will prevent this default behaviour.

You can create a RadioGroup using the declaration.

<RadioGroup
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:id="@+id/radio_group">
<RadioButton android:id="@+id/button_radio1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Check here"
    android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/buttons_radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check here"
        />
</RadioGroup>

If you have grouped the RadioButtons it is advisable to have a Submit button inorder to submit your answers like below.

The final XML looks like:

radio_button.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">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/radio_group">
    <RadioButton android:id="@+id/button_radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check here"
        android:onClick="onRadioButtonClicked"/>
        <RadioButton android:id="@+id/buttons_radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Check here"
            android:onClick="onRadioButtonClicked"/>
    </RadioGroup>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:id="@+id/button"/>
</LinearLayout>

Once you have created your XML, create the Activity file like below.

MainActivity.java

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

  
    RadioButton radioButton;
    RadioGroup radioGroup;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.radio_button);
        Button btnDisplay = (Button) findViewById(R.id.button);
         radioGroup = (RadioGroup) findViewById(R.id.radio_group);

        btnDisplay=(Button)findViewById(R.id.button);

        btnDisplay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int selectedId=radioGroup.getCheckedRadioButtonId();
                radioButton=(RadioButton)findViewById(selectedId);
                Toast.makeText(MainActivity.this,radioButton.getText(),Toast.LENGTH_SHORT).show();
            }
        });     
    }
}

This creates a simple UI like below

RadioButton Output Screen
RadioButton Output Screen

On clicking the RadioButton we get:

Output Sucess - RadioButton
Output Sucess – RadioButton

You can create similar RadioButtons, do drop in any comments or queries you have.

Check this place out for more inspiration. I keep the material design rules in mind and draw inspiration from there. It has got carefully curated content and it is owned by Google!! So why not!!

“Learn and Be Curious”

Leave a Comment