ZOFTINO.COM android and web dev tutorials

Android Radio Button

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.

Adding Android RadioButton and RadioButtonGroup to Layout

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>

Radio Button Material Design

Below screen shot shows radio buttons with default styles when application themes is set to app compact material theme Theme.AppCompat.

android radio button default style when application is set to appcompact material theme

App Compact Themes Custom Color Radio Button

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>
 

android radio button custom color

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>
android radio button custom color

Radio Button Custom Background

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.

android radio button custom background drawable

Radio Button OnClick Event

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();
}
 

RadioGroup OnCheckedChangeListener

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 Custom Icon

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.

android radio button custom icon