Radio Button in Android

In Android development, an app developer is lucky as he doesn’t have to worry when he wants to display multiple options to a user. This is because Android provides many tools this purpose. One such tool is the Radio Button.

Even though it is a blessing to have a number of solutions for this problem, it is known to create a lot of confusion for Android developers, especially the ones who are new to the field. For this reason, this article will start from the basics and eliminate all you’re confusions before showing you how to create a Radio Button for an application in Android.

Radio Button in Android

As mentioned earlier, a Radio Button in Android is used when a few options are there for a user to choose from. The Android Radio Button widget allows the user to select only one of the given choices at a time.

Basically, there are two states of a Radio Button—checked and unchecked. When a user clicks on an unchecked Radio Button, it obtains the checked state, making the previously checked Radio Button (if there is any) unchecked.

In an Android Radio Button widget, each option refers to a radio button. Also, all the presented options in this tool are collectively referred to as a Radio Group. In fact, there is a separate widget of Radio Group as well, i.e. android.widget.RadioGroup. To clarify it further, Radio Buttons are used inside a Radio Group, and those Radio Buttons are grouped together by android.widget.RadioGroup.

The name “Radio Button” tells a lot about the nature of this Android widget. The widget is named after actual buttons of older radios that were used to select present stations. After pressing one of the buttons, all the other buttons would pop out, so the pressed button would be the only option that was chosen by the user.

Traditionally, the default state of a set of Radio Buttons would have the first Radio Button already selected. However, websites, apps and forms these days would have no option selected in the default state.

A common example of a Radio Button pair is seen when you sign up on an app and it asks your gender by giving you two options (Male and Female) with their Radio Buttons.

Radio Button vs Spinner vs Check Box

Because the function of a Radio Button, Spinner and Check Box is quite similar, Android app developers mix them up very often. It is also important to use each of them appropriately as it affects the overall user experience.

A Check Box is just a small square box. Like Radio Button, it also has the two states, checked and unchecked. In the checked, the box is filled with a check mark. A set of Check Boxes presents a range of options, but—unlike a Radio Button set that makes you choose—any number of options can be selected in the case of Check Boxes. You can find a check box under the Terms and Conditions of an app.

On the other hand, a Spinner is basically a drop-down, scrollable list of items. From this list, a user has to choose only one item. The difference here is the number of options. Usually, app developers use a Spinner when the options are more than five. This is done to save space on the page. Whereas, Radio Button sets are used for fewer options because a drop-down list isn’t convenient in this case.

Radio Button in Android Steps

Because Radio Buttons serve a very important purpose, their implementation should be at an Android app developer’s fingertips. In this tutorial, we will show you how to implement the Radio Button widget to add Radio Buttons in your app.

In order to begin coding to implement a Radio Button in Android, open the Android Studio IDE (Integrated Development Environment) first of all. Then, create a new project as shown in our early tutorials.

While creating a new project, you must select a name for your project. To give you an idea, we have named our project “Radio.” Also, you must choose an appropriate package name for your project. For instance, “com.androidaura.radio” is the package name for our project.

After creating a new project property, open your project’s first file, i.e. the MainActivity.java class file, to add the following code it:

// MainActivity.java

package com.androidaura.radio;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 {

    private RadioGroup genderGroup;
    private RadioButton genderButton;
    private Button showSelected;

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

        genderGroup = (RadioGroup) findViewById(R.id.radioGender);
        showSelected = (Button) findViewById(R.id.button);

        showSelected.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int getId = genderGroup.getCheckedRadioButtonId();

                genderButton = (RadioButton) findViewById(getId);

                Toast.makeText(MainActivity.this,
                        genderButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });

    }
} 

After coding in the MainActivity file, open the second file of of your project. This is the strings.xml file where you will code to add some custom strings in your project, such as “Male” and “Female.” Now, enter the following code in the file:

// strings.xml

<resources>
    <string name="app_name">Radio</string>
    <string name="male">Male</string>
    <string name="female">Female</string>
    <string name="display">Show Selected</string>
</resources> 
// activity_main.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:layout_margin="20dp"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/radioGender"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp">

        <RadioButton
            android:id="@+id/radioMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/male"
            android:textStyle="bold"
            android:textSize="22sp"
            android:checked="true" />

        <RadioButton
            android:id="@+id/radioFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/female"
            android:layout_marginTop="10dp"
            android:textStyle="bold"
            android:textSize="22sp" />

    </RadioGroup>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/display" />

</LinearLayout>
 

Once you’re done with entering all the above-mentioned codes in the right files, you will be able to launch your project. After launching your project, your output would look like the following image:

Output

Radio Button in Android