Android RadioGroup with simple example

Android-RadioGroup-with-simple-example.png

21st February, 2023

Hello developers! We have learned earlier about Android Radio Button. Let’s take a quick look at Android RadioGroup.

1. What is RadioGroup?

In Android, RadioGroup is a widget used to group one or more radio buttons. If the user checks a radio button from a RadioGroup, the RadioGroup will automatically uncheck all other radio buttons. All radio buttons in a radio group are unchecked by default.

2. How to Create RadioGroup In Android?

2.1 Create RadioGroup in XML layout file

Just add a RadioGroup to the xml layout from the palette. Get reference of RadioGroup and perform operations based on the requirements.

XML
content_copy light_mode remove 
<?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:orientation="vertical"
    android:padding="10dp">


    <!--Radio Group-->
    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--Radio Button-->
        <RadioButton
            ...

            ... />


        <!--Radio Button-->
        <RadioButton
            ...

            ... />


        <!--Radio Button-->
        <RadioButton
            ...

            ... />


        <!--Radio Button-->
        <RadioButton
            ...

            ... />

    </RadioGroup>
</LinearLayout>

2.2 Create RadioGroup Programmatically in Android

In other ways, we can create a RadioGroup programmatically. We have to create an object of Android’s RadioGroup class. After that we can set attributes as required. We can add other views to it. See example below.

KotlinJava
content_copy light_mode remove 
package com.androidchunk.radiogrouptest

import android.os.Bundle
import android.widget.RadioGroup
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //create a radio group
        val radioGroup = RadioGroup(this@MainActivity)

        //add radio buttons to the radio group
        radioGroup.addView(radioButton1)
        radioGroup.addView(radioButton2)
        radioGroup.addView(radioButton3)
        radioGroup.addView(radioButton4)
        radioGroup.addView(radioButton5)
    }
}

package com.androidchunk.radiogrouptest;

import android.os.Bundle;
import android.widget.RadioGroup;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //create a radio group
        RadioGroup radioGroup = new RadioGroup(MainActivity.this);

        //add radio buttons to the radio group
        radioGroup.addView(radioButton1);
        radioGroup.addView(radioButton2);
        radioGroup.addView(radioButton3);
        radioGroup.addView(radioButton4);
        radioGroup.addView(radioButton5);
    }
}

3. Attributes of Android RadioGroup

Attribute Description
android:checkedButton The id of the child radio button. The radio button should be checked.

4. Simple Android RadioGroup Example

Hey, we have taken a simple example which explains how Android RadioGroup works. Ready?

Step 4.1: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

Step 4.2: Enable View Binding

In this example we are using Android Jetpack’s feature view binding.

Groovy
content_copy light_mode remove 
plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    ...
    ...

    buildFeatures {
        viewBinding = true
    }
    ...
    ...
}

dependencies {
    ...
    ...
    ...
}

Step 4.3: Add RadioGroup to the XML Layout (UI)

Add a RadioGroup to the xml layout from the palette. Add some radio buttons inside RadioGroup.

XML
content_copy light_mode remove 
<?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:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Which is the capital of Japan?"
        android:textColor="@color/black"
        android:textSize="18sp" />

    <!--Radio Group-->
    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New York" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="London" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Tokyo" />

        <RadioButton
            android:id="@+id/radioButton4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Dubai" />

    </RadioGroup>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/submitButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:layout_weight="1"
            android:backgroundTint="#7B1FA2"
            android:text="SUBMIT" />

        <Button
            android:id="@+id/clearButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_weight="1"
            android:backgroundTint="#7B1FA2"
            android:text="CLEAR" />
    </LinearLayout>
</LinearLayout>

Step 4.4: Modify Activity

Open the relative activity and get RadioGroup reference. Add click listener for submit and clear buttons. Additionally we are using setOnCheckedChangeListener which will display a toast on click of any radio button.

KotlinJava
content_copy light_mode remove 
package com.androidchunk.radiogrouptest

import android.os.Bundle
import android.view.View
import android.widget.RadioButton
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.androidchunk.radiogrouptest.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    //view binding
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //the answer key
        val answerKey = 2

        //check change listener for the radio group
        binding.radioGroup1.setOnCheckedChangeListener { radioGroup, checkedViewId ->
            if (checkedViewId != View.NO_ID) {
                val radioButton = findViewById<RadioButton>(checkedViewId)
                if (radioButton.isChecked) {
                    Toast.makeText(this@MainActivity,radioButton.text.toString() + " selected",Toast.LENGTH_SHORT).show()
                }
            }
        }

        //handle click event of the submit button
        binding.submitButton.setOnClickListener {
            val checkedViewId = binding.radioGroup1.checkedRadioButtonId
            if (checkedViewId != View.NO_ID) {
                val selectedRadioButton: RadioButton =
                    findViewById(binding.radioGroup1.checkedRadioButtonId)
                val indexOfSelectedRadioButton =
                    binding.radioGroup1.indexOfChild(selectedRadioButton)
                if (indexOfSelectedRadioButton == answerKey) {
                    Toast.makeText(this@MainActivity, "You are correct!", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this@MainActivity, "You are wrong!", Toast.LENGTH_SHORT).show()
                }
            } else {
                Toast.makeText(this@MainActivity,"Please select an option first",Toast.LENGTH_SHORT).show()
            }
        }

        //handle click event of the clear button
        binding.clearButton.setOnClickListener(View.OnClickListener { binding.radioGroup1.clearCheck() })
    }
}

package com.androidchunk.radiogrouptest;

import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.androidchunk.radiogrouptest.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {
    //view binding
    ActivityMainBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        //the answer key
        int answerKey = 2;

        //check change listener for the radio group
        binding.radioGroup1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedViewId) {
                if (checkedViewId != View.NO_ID) {
                    RadioButton radioButton = findViewById(checkedViewId);
                    if (radioButton.isChecked()) {
                        Toast.makeText(MainActivity.this, radioButton.getText() + " selected", Toast.LENGTH_SHORT).show();
                    }
                }
            }
        });

        //handle click event of the submit button
        binding.submitButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int checkedViewId = binding.radioGroup1.getCheckedRadioButtonId();
                if (checkedViewId != View.NO_ID) {
                    RadioButton selectedRadioButton = findViewById(binding.radioGroup1.getCheckedRadioButtonId());
                    int indexOfSelectedRadioButton = binding.radioGroup1.indexOfChild(selectedRadioButton);

                    if (indexOfSelectedRadioButton == answerKey) {
                        Toast.makeText(MainActivity.this, "You are correct!", Toast.LENGTH_SHORT).show();
                    } else {
                        Toast.makeText(MainActivity.this, "You are wrong!", Toast.LENGTH_SHORT).show();
                    }
                } else {
                    Toast.makeText(MainActivity.this, "Please select an option first", Toast.LENGTH_SHORT).show();
                }
            }
        });

        //handle click event of the clear button
        binding.clearButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                binding.radioGroup1.clearCheck();
            }
        });
    }
}

Step 4.5: Output

Happy coding!

Leave a Reply