Android RadioButton allows us to select one option from a set of options. In radio button we show mutually exclusive options that means we can't select more than 1 option at the same time.
A Radio button can be defined in xml layout as follows:
But, radio button defiend in above example is still not mutually exclusive. A user can select both male and female option at the same time.
RadioGroup is used to group set of options to 1 group so that user can select only one option at a time.
In simple word, the radio buttons that we want to behave mutually exclusive way must be wraped inside a RadioGroup.
So, above example should be used as followed:
android:orientation attribute of the RadioGroup used to specify whether RadioButton will be displayed vertically or horizontally.
Android provides several text decorating attributes like Typeface, font family, text style, text size, text color, text shadow etc. that can be applied to RadioButton. To learn more on text styling visit below given link:
Here are some commonly used xml attributes which we use very frequently:
|android:background||We can use this attribute to set color or drawable background|
|android:paddingLeft||Can be used to assigned padding between radio button and text|
|android:onClick||This is the name of the method in this View's context to invoke when the view is clicked.|
|android:checked||If attribute has a value "true" then by default it will be displayed as checked. For "false" value it will be displayed as unchecked|
|android:visibility||it controls the initial visibility of the view|
|android:drawableLeft||Used to show a drawable at left side of RadioButton|
|android:drawableRight||Used to show a drawable at right side of RadioButton|
|android:drawableTop||Used to show a drawable at the top of RadioButton|
|android:drawableBottom||Used to show a drawable at the bottom of RadioButton|
Sometimes we need to check or uncheck a radio button on runtime. We can check or uncheck a radio button as follows:
Here are simple steps to create a button selector to customize a radio button:
Step 1: Add 2 images in drawable folder, one for checked state of radio button and second one is for uncheck state of button. I used 2 images for this purpose named radiobutton_checked.png and radiobutton_unchecked.png
Step 2: Create a file under res -> drawable and named it radiobutton_selector.xml
Step 3: Replace your res ->drawable ->radiobutton_selector.xml with below given code of my radiobutton_selector.xml
Step 3: Set the android:button attribute of radio button where you want this custom look & feel as follows:
Here are simple steps to create a color selector to customize a radio button:
Step 1: Define 2 colors that you want to use for checked and unchecked state of radio button
Step 2: Craete an xml file under res -> drawable and named it radiobutton_color_selector.xml
Step 3: Open your res -> drawable -> radiobutton_color_selector.xml and replace it's code with below given code:
Step 4: Assign android:textColor of radio button to this drawable color selector as given below:
There are 4 different way to handle click event of a view. In this example we are going to explain only one way to handle click event of radio button. To learn more, what are other ways to handle click event of a view you can visit below given link.
A simple way to handle click event of a button is to define onClick attribute of RadioButton as follows:
Now create a method named radioButtonClickHandler inside Activity class that hold the radio button layout. This method must be public, Return void and accept View as a parameter as follows:
Sometimes we need to know checked radio button on some event say on a button click. Here is a simple way to get RadioButton that is checked in a RadioGroup.
Let's quickly implement a sample for Android RadioButton, which demonstrate everything we discussed about Android RadioButton.
Step 1: Create a new project in Android Studio and name it Android RadioButton.
Step 2: Open res -> layout -> activity_main.xml and add following code
Step 3: Open res -> drawable and place 2 different images for different states of radio button. Images of my sample is radiobutton_checked.png, radiobutton_unchecked.png
Step 4: Create res -> drawable -> radiobutton_selector.xml and add following code
Step 5: Open res -> values -> styles.xml and replace its code with below given code of styles.xml
Step 6: Open res -> values -> colors.xml and replace its code with below given code of colors.xml
Step 7: Open res -> values -> strings.xml and replace its code with below given code of strings.xml
Step 8: Create a file radiobutton_color_selector.xml under res -> drawable, and add below given code to your newly created file:
Step 9: Add below given code to your MainActivity.java
Step 10: Clean and run the project to see the result.