Android Radio Buttons and Radio Groups

Android Widgets: 1 2 3 4 5 6 7 8 9

In this tutorial, you will learn how to add Radio Buttons to a layout. Radio Buttons are used when you want to allow only one choice from a list of possible choices. For example, you might want to ask users how they are going to pay: Credit card, Debit card, or PayPal. Out of those three choices, the user can only select one.

Start a new project for this. Give it the Application name Choices. Accept the defaults on the dialogue box screens, making sure that Empty Activity is selected. When the project loads, click on the activity_main.xml tab at the top, and make sure you are in Design view rather than Text view.

Click on the default Hello World TextView to select it. In the properties area on the right, type in an ID of displayArea. Change the text from Hello World to Display Area. (We won't worry about setting up string resources. But you should in a real app.) Your layout and properties area should look like this:

Android Studio showing a TextView and Properrties area

We'll place the display area at the top, rather than in the middle as it is now. In the properties area at the top, delete the bottom constraint by clicking the X in the circle at the bottom of square:

Deleting a constraint in Android Studio

When you click the X, the bottom constraint should disappear:

Left, right, and top constraints

Now set a top margin by selecting 8 from the dropdown box (the dropdown box appears when you move your mouse to the top 0):

Setting a top margin

We can now add the radio buttons. However, radio buttons are held in a container called a RadioGroup. So we need to add one of these first.

In the Palette, click on the Containers category and select the RadioGroup:

Android Studio palette showing the RadioGroup widget

Before dragging a RadioGroup to your layout, make sure AutoConnect is turned on:

The AutoConnect icon

If AutoConnect is off, it will have a line through the magnet icon. Click the magnet again to turn it on.

Now drag a RadioGroup control below your display area TextView, somewhere near the top:

A RadioGroup widget dragged to the layout

Don't worry about the RadioGroup being rather small. It will expand when we add the radio buttons.

Now click on the Widgets category in the palette. Locate the RadioButton item:

The RadioButton widget in the  palette

Instead of dragging a RadioButton on to the layout, you can drag and drop onto the RadioGroup in the Component Tree:

Dragging a widget to the Component Tree

The Component Tree will then look like this:

The Component Tree showing a Radio Button

Your layout will look like this:

A Radio Button on an Android layout

The default text on the button is RadioButton. We can change that. With the button highlighted change the Text property of your radio button to Credit Card:

Changing the Text property of a widget

Before going any further, let's add a constraint from the top of the RadioGroup to the bottom of the TextView.

In the Component Tree, click on the RadioGroup to select it. On the layout, move your mouse to the top middle circle so that it turns green:

Adding a constraint to a widget

Now hold down your left mouse button. Keep it held down and drag to the circle in the bottom middle of the TextView:

Dragging from one widget to another to add a constraint

This will create a new constraint.

With the RadioGroup still selected, have a look at the properties area. Now set the top margin of the RadioGroup to 32 via the dropdown box:

Setting a top margin for a widget

This will create a little bit of space between the two controls:

Space added between two widgets

One thing we need to do, though, is to set an ID for the RadioGroup. With the RadioGroup selected, click inside the ID box in the properties area (it's blank at the moment). Type the name paymentMethod:

Setting an ID value for a widget

Press the enter key on your keyboard and examine the Component Tree. The RadioGroup will have a new name:

Component Tree showing a renamed widget

Now add two more radio button to the RadioGroup in the Component Tree. Set the text on the second one to Debit Card. Set the text on the third one to PayPal. Your Component Tree will then look like this:

The Component Tree showing three radio buttons

And your layout will look like this:

A layout with three radio buttons

Incidentally, if your radio buttons are in the wrong order, you can drag them about in the Component Tree. In the image below, we have radioButton3 at the top. However, we'd like it at the bottom:

Component Tree showing widgets in the wrong order

Hold down your left mouse button on a control in the Component Tree. Keep the left mouse button held down and drag it where you want it:

Reordering widgets via the Component Tree

Run your app. Select one of your new radio buttons. Notice that you can only select one button at a time:

A running Android app showing a radio button selected

OK, now let's get some coding done. We'll do that in the next lesson below.