Open In App

Implement RadioButton with Custom Layout in Android

Improve
Improve
Like Article
Like
Save
Share
Report

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


Here is the final output of our application.

Output:



Last Updated : 22 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads