RadioButton with RadioGroup in Android

Have you ever seen a traffic signal. Its color changes(red, yellow, green) in few seconds one by one. It takes only one color at a time if its working properly.

What we will do?
-> We will make a mini traffic signal in our phone with using radio buttons. Right now we are not concentrating on the timing of the color change.

What we need?

• A LinearLayout.
• 3 RadioButtons 

Step 1 : Create a New Android Application by selecting File->New->Android Application Project.

Step 2 : Give a name and a package name to your application, then click on Next till Finish.Name can be RadioButtonDemo.

Step 3 : Drag Three RadioButtons in The activity_main.xml from the Palette.

activity_main.xml    

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/linearl">"

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Mini Traffic Signal"
            android:textAppearance="?android:attr/textAppearanceLarge" />

    <RadioGroup android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" android:id="@+id/rgOpinion">
        
        <RadioButton
            android:id="@+id/red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stop" />

        <RadioButton
            android:id="@+id/yellow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Drive Slow" />
        
        <RadioButton
            android:id="@+id/green"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Go" />
</RadioGroup>
    </LinearLayout>

Step 4 : The code for MainActivity.java file present in src folder from Project Explorer is given below.

MainActivity.java 

package com.mia.radiobuttondemo;

import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.Toast;
import android.app.Activity;
import android.graphics.Color;

public class MainActivity extends Activity {

    RadioButton red,yellow,green;
    LinearLayout linearl;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        red = (RadioButton)findViewById(R.id.red);
        yellow = (RadioButton)findViewById(R.id.yellow);
        green = (RadioButton)findViewById(R.id.green);
        linearl = (LinearLayout)findViewById(R.id.linearl);
       
        red.setOnCheckedChangeListener(
                new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
                        if(red.isChecked()==true)
                            linearl.setBackgroundColor(Color.RED); 

                    }});
       
        yellow.setOnCheckedChangeListener(
                new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
                        if(yellow.isChecked()==true)
                            linearl.setBackgroundColor(Color.YELLOW); 

                    }}); 
       
        green.setOnCheckedChangeListener(
                new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
                        if(green.isChecked()==true)
                            linearl.setBackgroundColor(Color.GREEN); 

                    }});   
    }   
}

Step 5 : Run the Project.
Explanation of the code :

Explanation from activity_main.xml

• We define an id for the Linear Layout as linearl which consists all our elements.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/linearl">

• Then we make a RadioGroup which is used to collect all RadioButtons under one Group or Title (e.g. Countries, Cars).The id of RadioGroup is not essential when we have a single RadioGroup.

<RadioGroup android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" android:id="@+id/rgOpinion">

• Make a RadioButton for each of our option (red,yellow,green) and give them specific ids like red,yellow,green respectively.

<RadioButton
            android:id="@+id/red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stop" />

        <RadioButton
            android:id="@+id/yellow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Drive Slow" />
        
        <RadioButton
            android:id="@+id/green"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Go" />

Explanation for MainActivity.java

• We declare variables of respective types for the three radio buttons and the linear layout.

RadioButton red,yellow,green;
    LinearLayout linearl;

• We direct the declared variables to their specific elements from activity_main.xml using method findViewById().

red = (RadioButton)findViewById(R.id.red);
        yellow = (RadioButton)findViewById(R.id.yellow);
        green = (RadioButton)findViewById(R.id.green);
        linearl = (LinearLayout)findViewById(R.id.linearl);

• We define onCheckedChangeListener() method for all our radio buttons, so that we can take a proper action when they are checked(clicked).

red.setOnCheckedChangeListener(
                new CompoundButton.OnCheckedChangeListener() {

Note : We can also define setOnCheckedChangeListener from class RadioGroup. The above statement would become...

red.setOnCheckedChangeListener(
                new RadioGroup.OnCheckedChangeListener() { 

• By applying an if condition we check that the particular radio-button is checked by isChecked() method.

if(red.isChecked()==true)

• In the if parenthesis we define the code to change the color of our layout by using the method setBackgroudColor().

linearl.setBackgroundColor(Color.RED);

Stay Tuned with Made In Android