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:
