RadioButton UI control can be used when only one option is allowed to be selected out of multiple options presented to users for an input field in your application. RadioButton like CheckBox is a two state button with checked and unchecked states. The main difference between CheckBox and RadioButton is once radio button is checked it can’t be unchecked where as CheckBox can be checked and unchecked.
By reading this post, you can learn how to use android RadioButton, handling radio button click events, and radio button styles and radio button customizations.
RadioButtons are grouped using RadioGroup allowing user to check any one of the radio buttons within a radio group and also change the selection to check a different radio button within the group.
RadioButtons can be added to a layout manually or using android studio. Manually, first add RadioGroup element to a layout and then add RadioButton elements as children of RadioGroup. To add RadioButton to layout xml using android studio, open the layout xml, go to design tab, choose container in palette window, then drag and drop RadioGroup first and then RadioButton on RadioGroup in component tree window.
Below is an example of a layout with RadioButton and RadioGroup.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.radiobutton.MainActivity">
<TextView
android:id="@+id/choose_cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Choose category"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/choose_cat">
<RadioButton
android:id="@+id/coupons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Coupons" />
<RadioButton
android:id="@+id/deals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Deals" />
<RadioButton
android:id="@+id/cashback"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cashback" />
</RadioGroup>
</android.support.constraint.ConstraintLayout>
Below screen shot shows radio buttons with default styles when application themes is set to app compact material theme Theme.AppCompat.
Radio button color when it is in active or checked state can be customized by setting colorAccent property in custom app compact theme and applying it to application. Similarly, you can change radio button text color by setting textColorPrimaryDisableOnly attribute to desired color.
<style name="AppThemeMyLight" parent="Theme.AppCompat.Light">
<item name="colorAccent">#0091ea</item>
<item name="android:textColorPrimaryDisableOnly">#f44336</item>
</style>
To change individual radio button colors, you can define custom style by inheriting app compact radio button style Widget.AppCompat.CompoundButton.RadioButton and setting colorAccent and textColorPrimaryDisableOnly attributes to desired colors as shown below.
<style name="MyRaidoButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="colorAccent">#0091ea</item>
<item name="android:textColorPrimaryDisableOnly">#f44336</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>
Apply the custom theme to radio button by setting radio button theme.
<RadioButton
android:id="@+id/products"
. . .
android:theme="@style/MyRaidoButton"/>Radio button can be assigned different colors for three different states such as checked, highlighted, and unchecked states by setting colorControlActivated, colorControlHighlight, and colorControlNormal attributes respectively as shown below.
<style name="MyRaidoButtonTwo" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:colorControlNormal">#64dd17</item>
<item name="android:colorControlActivated">#460745</item>
<item name="android:colorControlHighlight">#c51162</item>
<item name="android:textColorPrimaryDisableOnly">#00838f</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>
Radio button background, shown when radio button is highlighted, can be customized by defining a drawable as xml in res/drawable folder, to increase or decrease the radius of the background.
Below is an example of custom drawable for radio button background
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffd600"
android:radius="40dp" />
Setting the background of radio button to custom drawable.
<RadioButton
android:id="@+id/cashback"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="90dp"
android:background="@drawable/radio_drawable"
android:layout_weight="1"
android:text="Cashback" />
Below is the output of custom background for radio button.
To handle onClick Event of RadioButton, you need to define a method in your activity or fragment and set onClick attribute of RadioButtons to the method as shown below. Handling radio button click events requires you to set onClick attribute of all radio buttons in a radio group.
<RadioButton
android:id="@+id/products"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="getProducts"
android:text="Products" /> public void getProducts(View v){
Toast.makeText(MainActivity.this, "Radio button clicked "+v.getId(), Toast.LENGTH_LONG).show();
}
Radio button click event can also be handled by setting OnCheckedChangeListener on radio group. This way, you don’t need to add on click listeners to individual radio buttons.
You can take different actions based on the radio button clicked, checked radio button id can be obtained by calling getCheckedRadioButtonId() on RadioButtonGroup object in onCheckedChanged method of RadioGroup.OnCheckedChangeListener.
To clear radio button selection in a radio button group, method clearCheck can be called on radio button group. To programmatically select a particular radio button, check() method of radio button group can be used.
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.cat_group);
radioGroup.setOnCheckedChangeListener( new RadioGroup.OnCheckedChangeListener(){
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
Toast.makeText(MainActivity.this, "Radio button clicked "+radioGroup.getCheckedRadioButtonId(),
Toast.LENGTH_LONG).show();
}
});
Radio button icon can be customized meaning instead of circle you can use different images for checked and unchecked state. To customize android radio button icon, you need to define drawable selector as shown below and save it in res/drawable folder. Example selector drawable uses radio_checked and radio_unchecked images for checked and unchecked states of radio button.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/radio_checked" />
<item android:drawable="@drawable/radio_unchecked" />
</selector>
Below is the output of android custom radio button icon example.
