Radio group, Radio button and Checkbox

By now we must be very much familiar with EditText and TextView and various layouts and let’s move on and learn more about other android views like RadioButton and CheckBox.

In this tutorial you are going to design a form where the user will have to select one of the options(values) using radio button and There will be some more suggestions and options that the user will have to select using check boxes, So we will show all the options selected by the user using a Toast on the display screen.

Let’s start with RadioButton and RadioGroup

So let’s begin. Create a new Android app Project and copy the below content of the XML layout file.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/tvRg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Rate This Lesson"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvRg"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:showDividers="beginning|middle|end"
        android:layout_marginTop="10dp"
        android:id="@+id/radioGroup" >


        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EXCELLENT"
            android:checked="false" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="GOOD"
            android:checked="true" />

        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OKAY"
            android:checked="false" />

        <RadioButton
            android:id="@+id/rb4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="POOR"
            android:checked="false" />

    </RadioGroup>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SUBMIT"
        android:id="@+id/btnSubmit"
        android:layout_below="@+id/radioGroup"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>
        
</RelativeLayout>

You will see the following output:

Once the android layout is done, you will now work on the background logic of the user interface which will fetch the user selection and display it on the screen using a toast.

So we will need the views that the user will interact with so that we can get the necessary information and then we need to implement click listener on the Submit button.

Inside the onClickListener() first you have to get the selected radio button id from the RadioGroup and Once we have the id of the selected Radio Button, we can easily fetch the text value of the selected radio button to display it on screen, so Let’s implement this and Below we have the MainActivity.java file with all the code.

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
   // These are the global variables
   RadioGroup radioGroup;
   RadioButton selectedRadioButton;
   Button buttonSubmit;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       // layout instances
       buttonSubmit = (Button) findViewById(R.id.btnSubmit);
       radioGroup = (RadioGroup) findViewById(R.id.radioGroup);

       /*
           Submit Button
       */
       buttonSubmit.setOnClickListener(new View.OnClickListener() {

           @Override
           public void onClick(View v) {
               // get the selected RadioButton of the group
               selectedRadioButton  = (RadioButton)findViewById(radioGroup.getCheckedRadioButtonId());
               //get RadioButton text
               String yourVote = selectedRadioButton.getText().toString();
               // display it as Toast to the user
               Toast.makeText(MainActivity.this, "Selected Radio Button is:" + yourVote , Toast.LENGTH_LONG).show();
           }
       });
   }

}

TogetCheckedRadioButtonId getting the selected radio button, we have used radioGroup.getCheckedRadioButtonId() function / method and which returns the id of the selected radio button.

Then to get the text of the selected radio button and we have used getText() method on that selected radio button. The text we receive from this method is converted to String type using the toString() method. Hence we have displayed the selected option value to the user using a Toast.

Add the above code in the MainActivity.java then run your Android Application Project and the output will be similar to the image shown below. So the user selects any option, it will be displayed to the user as a Toast.

It’s Time for CheckBox

Now, it’s time to work with some check boxes. Extend the User Interface (UI) design already mentioned by copy-pasting the following code after the Button view (with id as btnSubmit) in the layout XML file.


<TextView
    android:id="@+id/tvCb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/radioGroup"
    android:gravity="center"
    android:text="Give Your Suggestions Here."
    android:layout_marginTop="65dp"
    android:textAppearance="?android:attr/textAppearanceMedium"/>

<CheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text=" I really enjoy this lesson."
    android:id="@+id/cb1"
    android:layout_below="@+id/tvCb"
    android:layout_centerHorizontal="true"
    android:checked="false"/>

<CheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="I will prefer this lesson over any other."
    android:id="@+id/cb2"
    android:layout_below="@+id/cb1"
    android:layout_centerHorizontal="true"
    android:checked="false"/>

<CheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="I would like to hear more from you."
    android:id="@+id/cb3"
    android:layout_below="@+id/cb2"
    android:layout_centerHorizontal="true"
    android:checked="false"/>

<CheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="I am satisfied with the content and full description."
    android:id="@+id/cb4"
    android:layout_below="@+id/cb3"
    android:layout_centerHorizontal="true"
    android:checked="false"/>

Checkboxes are generally used to display multiple options to the user, and the user is allowed to select one or more out of those options. All check boxes have the checked property set to false by default.

To get user selected check box values from the UI when the user clicks on the SUBMIT button, we will use the isChecked() to check if the check box was selected or not selected.

So you will have to make a few changes in our MainActivity.java class file and As we have to create instances for the checkboxes by using findViewById() method. For this, we have to declare global variables CheckBox type.

To declare the global variable,


CheckBox cb1, cb2, cb3, cb4;

Then, inside the onCreate() function, we store the CheckBox view from the XML into Java using findViewById() method.


cb1 = (CheckBox) findViewById(R.id.cb1);
cb2 = (CheckBox) findViewById(R.id.cb2);
cb3 = (CheckBox) findViewById(R.id.cb3);
cb4 = (CheckBox) findViewById(R.id.cb4);

Once you have all the objects ready, then all we have to do is check which checkboxes are selected by the user when the user clicks on the SUBMIT button. This is done by using isChecked() method of the CheckBox view, as we already said.

isChecked() method returns true if a checkbox is checked otherwise it returns false. If Selected checkboxes values are retrieved and added to one string(checkBoxChoices) using getText() and toString() methods. Toast is used to display all the selected options.
So update the existing code inside the OnClick() function of the SUBMIT button with the following code:


/*
    Submit Button
*/
buttonSubmit.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        //Get the selected RadioButton
        selectedRadioButton  = (RadioButton) findViewById(radioGroup.getCheckedRadioButtonId());
        // get RadioButton text
        String yourVote = selectedRadioButton.getText().toString();
    
        String checkBoxChoices = "";
    
        if (cb1.isChecked()) {
            checkBoxChoices += cb1.getText().toString() + "\tYES";
        }
        else{
            checkBoxChoices += cb1.getText().toString() + "\tNO";
        }
        
        if (cb2.isChecked()) {
            checkBoxChoices += cb2.getText().toString() + "\tYES";
        }
        else{
            checkBoxChoices += cb2.getText().toString() + "\tNO";
        }
        
        if (cb3.isChecked()) {
            checkBoxChoices += cb3.getText().toString() + "\tYES";
        }
        else{
            checkBoxChoices += cb3.getText().toString() + "\tNO";
        }
        
        if (cb4.isChecked()) {
            checkBoxChoices += cb4.getText().toString() + "\tYES";
        }
        else{
            checkBoxChoices += cb4.getText().toString() + "\tNO";
        }
    
        // display it as Toast to the user
    
        Toast.makeText(MainActivity.this, "Selected Radio Button is:" + yourVote + "\n CheckBox Choices: \n "+ checkBoxChoices , Toast.LENGTH_LONG).show();
        
    }
});

When we run the app, we will see that out of all the radio buttons then you are able to select only one radio button while in case of check boxes, we can select any maximum number of them and that is how radio buttons and checkboxes work. Hence this is all about implementation of RadioButton and CheckBox in Android Application Development.

Subscribe Now