Radio Button in Android: Learn Basics and Customization

Here is a simple tutorial to understand Radio Button in Android. I have also included mostly used customization for Android.

Radio button is a type of View that allows user to select one option from a set. Normally the available options are the ones user must see to decide.

Here is a sample code for RadioButton, place it in your .xml layout file.

<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Your Text Here" />Code language: HTML, XML (xml)

Before we move any further let us first understand the RadioGroup class in Android.

And later we will also look at how we can customize RadioButton. Customization will include changing the color of RadioButton.

Understanding Radio Group for Radio Buttons

RadioGroup in Android is a class that acts as a wrapper for RadioButton. If you are using radio buttons then you have more one value to deal with.

And if you use multiple radio button without RadioGroup. You will have a bunch of radio buttons that will allow multiple selections.

But we do not want that. We want our radio button to be checked one at a time. For this purpose we will use a RadioGroup.

Sample code for radio group is given below.

<RadioGroup 
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

        <!-- your radio buttons will go here -->

</RadioGroup>Code language: HTML, XML (xml)

Now the above code might make no sense to you. Let us use it on a real layout.

Also, note the android:orientation="horizontal" attribute I have for RadioGroup. We can use it because the class RadioGroup extends LinearLayout.

Android View Introduction: What is Android View, Using Views

TECHENUM

Using RadioButton with RadioGroup

Here is a sample code for you we will continue our further code based on this.

First let us create a simple layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".radio.RadioButtonActivity">

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/option_one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="Option 1" />

        <RadioButton
            android:id="@+id/option_two"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="Option 2" />

    </RadioGroup>

</LinearLayout>Code language: HTML, XML (xml)

Now let us map everything in our activity like below.

class RadioButtonActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_radio_button)

        val radioGroup: RadioGroup = findViewById(R.id.radio_group)

        val optionOne: RadioButton = findViewById(R.id.option_one)
        val optionTwo: RadioButton = findViewById(R.id.option_two)

    }

}

We will add interaction for the radio buttons below.

Java List Data Structure: Learn Real Use Case Of List

TECHENUM

Handling RadioButton events

Now that we have multiple radio buttons in our Android application. Let us finally interact with them in this section.

We will breakup this section into two parts.

RadioButton click event

We obviously want to do something when a radio button is clicked. We can do exactly this by adding the code below in our activity like below.

// check which button was pressed
radioGroup.setOnCheckedChangeListener { _, checkedId ->
    when (checkedId) {
        R.id.option_one -> {
            // option one was clicked
        }
        R.id.option_two -> {
            // option two was clicked
        }
    }
}Code language: Kotlin (kotlin)

Now let us look at how we can programatically click on any of the radio button.

Clicking on RadioButton through code

It’s really simple to click any of the radio button through code. All you have to dois know the id of the button.

For this example let us click on option_two. Which can be done like below.

// select option two
radioGroup.check(R.id.option_two)Code language: Kotlin (kotlin)

Now that we have looked into handling click events. Let us look at customizing the radio button.

ShapableImageView in Android: Make Circular Image Border

TECHENUM

Styling radio button in Android

Let us look at how we can customize the radio button.

Change radio button color

Let us see how we can change the color of our radio button. And by colors of radio button, I mean the text color and the button color itself.

Let us see how we can change the text color. We use the attribute named android:textColor for this.

Also, to change the radio button’s color we use android:buttonTint. If you’re on AndroidX this should work for all API levels.

Now let us extract the code to our styles.xml or themes.xml file.

<style name="CustomizedRadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">

    <!-- to change the radio checkbox color -->
    <item name="android:buttonTint">@color/black</item>

    <!-- to change the radio checkbox color -->
    <item name="android:textColor">@color/black</item>

</style>Code language: HTML, XML (xml)

And use it in your radio buttons as

style="@style/CustomizedRadioButtonStyle"Code language: HTML, XML (xml)

The above style is going to change the color to black. Let us look at more customization.

Change radio button background

We can also change background like in other views. Let us look at this sample drawable file.

<!-- file name: rb_stateful.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- the active color when the radio button is being pressed -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="2dp" />
            <stroke android:width="2dp" android:color="#333333" />
            <solid android:color="#ff0000" />
        </shape>
    </item>

    <!-- the color when the radio button is selected -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="2dp" />
            <stroke android:width="2dp" android:color="@color/purple_700" />
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <!-- the color when the radio button is not selected -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="2dp" />
            <stroke android:width="2dp" android:color="@android:color/darker_gray" />
            <solid android:color="@color/white" />
        </shape>
    </item>

</selector>Code language: HTML, XML (xml)

You have to use it like any other drawable file in your andorid:background attribute.

That is all you have to know as a beginner. If you have any queries feel free to comment below.

Keep learning.

Suggested:

Android Get Screen Width & Density in Pixels

Using Android Handler Thread in Android for Multi-threading

Android Handler: Learn Everything About Handler

Push Notifications in Android Using One Signal

Show or Hide Soft Keyboard in Android Application And More