Android Radio Button Tutorials

Android Radio Button Tutorials - NSC - Beginners course Android step by step

Android Radio Button is also have two states which allow you to select the one value from a set of vlues like that If I asked a question such as “Who Developed the Android Studio” then you here i will give you 4 options using radio button so that you can select only one right option from the set of four options. It is also used to display the all possible options available side by side to your users. If you don’t want to show side by side all options than you should use a Spinner instead of a Radio Button.

To add a radio button you have to add RadioButton in your activity layout file as like this:

<RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male"/>

Check out the below screenshot for an example of Android Radio Button

Radio Button

Now code of above screenshot is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textStyle="bold"
       android:textColor="@color/colorPrimary"
       android:text="Choose your gender : "/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/male"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male"
            android:onClick="onRadioClicked"/>
        <RadioButton
            android:id="@+id/female"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Female"
            android:onClick="onRadioClicked"/>
    </LinearLayout>
</LinearLayout>

To set a click listner on Radio Button first of all you have to assign id’s to each of radio button:

android:id="@+id/male"

Now add on click method to RadioButton in your layout file:

android:onClick="onRadioClicked"

In your MainActivity.java file you can do like this to set on click listener on Android Radio Button

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Color;
import android.hfad.com.sudoku.R;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.RadioButton;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
    @SuppressLint("NonConstantResourceId")
    public void onRadioClicked(View view) {
        boolean checked = ((RadioButton) view).isChecked();
        switch (view.getId()) {
            case R.id.male:
                if (checked) {
                    showToast("Male");
                }
                    break;
            case R.id.female:
                if (checked) {
                    showToast("Female");
                }
                break;
        }
    }
    public void showToast (String message){
        Toast toast = Toast.makeText(this, message, Toast.LENGTH_LONG);
        View tv = toast.getView();
        tv.setPadding(20, 15, 20, 15);
        TextView toastMessage = (TextView) tv.findViewById(android.R.id.message);
        toastMessage.setTextSize(25);
        toastMessage.setTextColor(Color.WHITE);
        toastMessage.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_play, 0, 0, 0);
        toastMessage.setGravity(Gravity.CENTER);
        toastMessage.setCompoundDrawablePadding(16);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            tv.setBackground(getDrawable(R.drawable.gradeint));
        }
        toast.show();
    }
}

Output of these checkbox is given in the screenshot:

Android Radio Button Tutorials
Radio Button with onChecked showing Toast

Gradient Radio Button:

To set background as colored or gradient you have to setBackground in your layout file and also add some paddings and margins to make it cool as shown in the below screenshot:

Gradient background on Radio Buttons

XML Layout code is give below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textStyle="bold"
       android:textColor="@color/colorPrimary"
       android:text="Choose your gender : "/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/male"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male"
            android:textColor="@color/colorAccent"
            android:layout_margin="10dp"
            android:paddingRight="10dp"
            android:paddingLeft="10dp"
            android:background="@drawable/gradeint"
            android:onClick="onRadioClicked"/>
        <RadioButton
            android:id="@+id/female"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Female"
            android:textColor="@color/colorAccent"
            android:layout_margin="10dp"
            android:paddingRight="10dp"
            android:paddingLeft="10dp"
            android:background="@drawable/gradeint"
            android:onClick="onRadioClicked"/>
    </LinearLayout>
</LinearLayout>
Radio Button
What are your Feelings
What are your Feelings

Leave a Comment