Implement RadioButton with Custom Layout in Android

0 0 2 minutes read

RadioButtons allow the user to select one option from a set. You should use RadioButtons for optional sets that are mutually exclusive if you think that the user needs to see all available options side-by-side. In this article, we are going to see how we can implement RadioButton with custom layout in android.

What we are going to build in this article?

Here is a sample video of what we are going to build in this article. Note that we will be using java language to make this project.

Step by Step Implementation

Step 1: Create a New Project

Open a new project.
We will be working on Empty Activity with language as Java. Leave all other options unchanged.
Name the application at your convenience.
There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?

Step 2. Adding required dependencies

Navigate to settings.gradle file and use the following piece of code in it

maven {url 'https://jitpack.io'}

Navigate to build.gradle(module) file and add the following dependency to it

implementation 'com.github.worker8:radiogroupplus:1.0.1'

Step 3. Working on the XML file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
  
    <worker8.com.github.radiogroupplus.RadioGroupPlus
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/radio_group"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="16dp">
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
  
            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:src="@drawable/one"/>
            
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="One"
                android:textSize="24sp"
                android:textStyle="bold"
                android:layout_marginStart="16dp"/>
            
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radio_button1"/>
              
        </LinearLayout>
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
  
            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:src="@drawable/two"/>
            
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Two"
                android:textSize="24sp"
                android:textStyle="bold"
                android:layout_marginStart="16dp"/>
            
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radio_button2"/>
  
        </LinearLayout>
        
          <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
  
            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:src="@drawable/three"/>
            
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Three"
                android:textSize="24sp"
                android:textStyle="bold"
                android:layout_marginStart="16dp"/>
            
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radio_button3"/>
  
        </LinearLayout>
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
  
            <ImageView
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:src="@drawable/four"/>
    
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Four"
                android:textSize="24sp"
                android:textStyle="bold"
                android:layout_marginStart="16dp"/>
    
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radio_button4"/>
  
        </LinearLayout>
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="16dp">
  
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/bt_reset"
                android:text="Reset"/>
            
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/bt_submit"
                android:text="Submit"/>
  
        </LinearLayout>
  
  
    </worker8.com.github.radiogroupplus.RadioGroupPlus>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4. Working on Java file

Navigate to the MainActivity.java file and use the following code in it. Comments are added to the code to have a better understanding.

Java

package com.example.radiobuttoncustomlayout;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
  
import worker8.com.github.radiogroupplus.RadioGroupPlus;
  
public class MainActivity extends AppCompatActivity {
  
    // Initialize variable
    RadioGroupPlus radioGroupPlus;
    Button btReset,btSubmit;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Assign variable
        radioGroupPlus=findViewById(R.id.radio_group);
        btReset=findViewById(R.id.bt_reset);
        btSubmit=findViewById(R.id.bt_submit);
  
        btReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Clear check
                radioGroupPlus.clearCheck();
            }
        });
  
        btSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // get started radio button id
                int id=radioGroupPlus.getCheckedRadioButtonId();
                // Check condition
                switch (id)
                {
                    case R.id.radio_button1:
                        // When id is equal to button
                        // initialize string
                        String s="One";
                        // Display toast
                        displayToast(s);
                        break;
                    case R.id.radio_button2:
                        // When id is equal to button
                        // Display toast
                        displayToast("Two");
                        break;
                     case R.id.radio_button3:
                        // When id is equal to button
                        // Display toast
                        displayToast("Three");
                        break;
                     case R.id.radio_button4:
                        // When id is equal to button
                        // Display toast
                        displayToast("Four");
                        break;
                }
            }
        });
  
        radioGroupPlus.setOnCheckedChangeListener(new RadioGroupPlus.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroupPlus group, int checkedId) {
                // When check the radio button
                // Display toast
                displayToast("Selected Id " + checkedId);
            }
        });
    }
  
    private void displayToast(String s) {
        // Initialize toast
        Toast.makeText(getApplicationContext()
        ,s,Toast.LENGTH_SHORT).show();
    }
}