Material Design Radio Button in Android App

Material Design Radio Button in Android App

In this tutorial, we will learn about how to create a Radio Button in Android App.

Official Documentation of Radio Button

Material Design Radio Button in Android App

Use Material design library in app-level build.gradle

  implementation 'com.google.android.material:material:1.5.0'  

style.xml (App theme)

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">  
     <!-- Customize your theme here. -->  
     <item name="colorPrimary">@color/colorPrimary</item>  
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
     <item name="colorAccent">@color/colorAccent</item>  
   </style>  

Create a XML file an create a Radio button in XML. Make sure to put radio button in Radio Group because if you didn't use group for radio buttons you can't unselect a radio button.

XML

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout 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"  
   android:orientation="vertical"  
   tools:context=".MaterialDesign.RadioButton">  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:textStyle="bold"  
     android:textSize="18sp"  
     android:text="Gender"/>  
   <RadioGroup  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_margin="10dp"  
     android:id="@+id/gender_group">  
     <com.google.android.material.radiobutton.MaterialRadioButton  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Male"  
       android:id="@+id/male_button"/>  
     <com.google.android.material.radiobutton.MaterialRadioButton  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Female"  
       android:id="@+id/female_button"/>  
   </RadioGroup>  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:textStyle="bold"  
     android:textSize="18sp"  
     android:text="Address"/>  
   <RadioGroup  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_margin="10dp"  
     android:id="@+id/address_group">  
     <com.google.android.material.radiobutton.MaterialRadioButton  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Home"  
       android:id="@+id/home_button"/>  
     <com.google.android.material.radiobutton.MaterialRadioButton  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Work"  
       android:id="@+id/work_button"/>  
   </RadioGroup>  
 </LinearLayout>  

Then create a Java File and cast radio group and radio button.

Use on checked change listener on radio group and check which value is checked or unchecked. We will show a Toast Message on button click, you can perform any type of actions.

Java 

 public class RadioButton extends AppCompatActivity {  
   //because of same name error (class name and radio button widget)..  
   RadioGroup gendergroup,addressgroup;  
   android.widget.RadioButton male_button,female_button,home_button,work_button;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_radio_button);  
     gendergroup = findViewById(R.id.gender_group);  
     addressgroup = findViewById(R.id.address_group);  
     male_button = findViewById(R.id.male_button);  
     female_button = findViewById(R.id.female_button);  
     home_button = findViewById(R.id.home_button);  
     work_button = findViewById(R.id.work_button);  
     gendergroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(RadioGroup radioGroup, int i) {  
         if(male_button.isChecked())  
         {  
           Toast.makeText(RadioButton.this, "Male", Toast.LENGTH_SHORT).show();  
         }  
         if(female_button.isChecked())  
         {  
           Toast.makeText(RadioButton.this, "Female", Toast.LENGTH_SHORT).show();  
         }  
       }  
     });  
     addressgroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(RadioGroup radioGroup, int i) {  
         if(home_button.isChecked())  
         {  
           Toast.makeText(RadioButton.this, "Home", Toast.LENGTH_SHORT).show();  
         }  
         if(work_button.isChecked())  
         {  
           Toast.makeText(RadioButton.this, "Work", Toast.LENGTH_SHORT).show();  
         }  
       }  
     });  
   }  
 }  

Follow us for more posts like this, 
Subscribe to Harpreet studio on Youtube  
Like Harpreet Studio on Facebook  
Follow me on Instagram