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 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:
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:
When you click the X, the bottom constraint should disappear:
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):
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:
Before dragging a RadioGroup to your layout, make sure AutoConnect is turned on:
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:
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:
Instead of dragging a RadioButton on to the layout, you can drag and drop onto the RadioGroup in the Component Tree:
The Component Tree will then look like this:
Your layout will look like this:
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:
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:
Now hold down your left mouse button. Keep it held down and drag to the circle in the bottom middle of the TextView:
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:
This will create a little bit of space between the two controls:
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:
Press the enter key on your keyboard and examine the Component Tree. The RadioGroup will have a new name:
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:
And your layout will look like this:
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:
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:
Run your app. Select one of your new radio buttons. Notice that you can only select one button at a time:
OK, now let's get some coding done. We'll do that in the next lesson below.