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:
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:
When you click the X or cross, the bottom constraint should disappear:
Now set a top margin by selecting 8 from the dropdown box:
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:
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.
Also in the Buttons 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 (don't worry about the warnings):
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 attribute of your radio button to Credit Card (you can add it as a String Resource, just like you've done in previous lessons.):
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:
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. (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:
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 Attributes 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: (Screenshots from an earlier version of Android Studio. Don't worry that it says horizontal for the Radio Group.)
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.
< Image Buttons| Radio Button Code >
Back to the Android Contents Page