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     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:
