Home and Learn: Android Course


Android Radio Buttons and Radio Groups

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 Radio Button Choices. Make sure that Empty Views Activity is selected and that Java is the chosen language. When the project loads, click on the activity_main.xml tab at the top, and make sure you are in Design view rather than Code 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 3 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 Attributes area at the top, delete the bottom constraint by clicking the X in the circle at the bottom of square inthe Layout area. This will leave just a plus symbol:

Deleting a constraint in Android Studio 3

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

Left, right, and top constraints

Now set a top margin by selecting 8 from the dropdown box:

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 the Buttons category and find RadioGroup:

Android Studio 3 palette showing the RadioGroup widget

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

he AutoConnect icon in Android Studio.

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 onto an Android layout.

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

Also in the Buttons category in the palette, locate the RadioButton item:

The Radio Button widget in the Android Studio 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 in Android Studio.

The Component Tree will then look like this (don't worry about the warnings):

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 attribute of your radio button to Credit Card (you can add it as a String Resource, just like you've done in previous lessons.):

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:

Adding a constraint to an Android 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 in Android Studio.

This will create a new constraint. (If you can't add the contraint and only see a little hand, then it mean you have Pan enabled. Hover your mouse over the RadioGroup widget and you'll see the zoom control in the bottom right. Click the hand to switch Pan off.)

With the RadioGroup still selected, have a look at the Attributes 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 Android 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 Attributes area (it's blank at the moment). Type the name paymentMethod:

Setting an ID value for an Android widget.

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

Android Studio 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:

An Android 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: (Screenshots from an earlier version of Android Studio. Don't worry that it says horizontal for the Radio Group.)

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.

Back to the Android Contents Page

 


Email us: enquiry at homeandlearn.co.uk