Implement RadioButton with Custom Layout in Android

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

Here is the final output of our application.

Output: