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