Beginning Android Studio 5. RadioGroup and RadioButton

Introduction

Welcome to the fifth tutorial in the Beginning Android Studio series. In the last tutorial, you learned about the CheckBox. Now we will switch our focus to RadioButtons and RadioGroups, and how they are working together. We will build something like this:

 

Getting started

As usual, we will begin our journey with the design. If you looked at the video, you saw that the RadioButtons were divided into two groups. When a button in the above group was selected, the bottom group wasn't affected. That's the point of RadioGroups, you kind of wrap the RadioButtons into RadioGroups, like this:

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"/>
    </RadioGroup>

 

Now that you know how the buttons are grouped together, try to create the design in the video above. Or just copy and paste the code below if you're confident that you know how it all works. This is my full activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/question1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="What is 1 + 1?"
        android:textSize="24sp"
        android:layout_centerHorizontal="true"/>

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/question1"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="18"
            android:buttonTint="#2c8bff"/>

        <RadioButton
            android:id="@+id/firstAnswer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:buttonTint="#2c8bff"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3214"
            android:buttonTint="#2c8bff" />
    </RadioGroup>

    <TextView
        android:id="@+id/question2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/radioGroup1"
        android:layout_marginTop="40dp"
        android:text="What animal is blue?"
        android:textSize="24sp"
        android:layout_centerHorizontal="true"/>

    <RadioGroup
        android:id="@+id/radioGroup2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/question2"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lion"
            android:buttonTint="#2c8bff"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monkey"
            android:buttonTint="#2c8bff"/>

        <RadioButton
            android:id="@+id/secondAnswer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Watermelon"
            android:buttonTint="#2c8bff"/>
    </RadioGroup>

    <Button
        android:id="@+id/answerBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#2c8bff"
        android:layout_below="@id/radioGroup2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:textColor="#fff"
        android:text="answer"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/answerBtn"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:textSize="22sp"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:textSize="22sp"/>

</RelativeLayout>

 

Notice that only the correct answer in the RadioButton has been given an ID, namely firstAnswer (second button in the first RadioGroup) and secondAnswer (third button in the second RadioGroup). This is because it doesn't matter what state the other buttons are in, the only thing we will check in this application is if the correct buttons are checked or not.

Another thing that is new is the android:buttonTint="#2c8bff". This line changes the color of the RadioButton, in this case, to blue. I think we are ready for Java!

 

Making things happen with Java

When the answer button is clicked, the app should tell us if we got the correct answer or not, in both groups. To manipulate the elements we need to reference them. The important elements here are answerBtn, firstAnswer, secondAnswer, textView1 and textview2. textView1 and textView2 will spit out the result. Let's code the reference in MainActivity.java:

        Button button = findViewById(R.id.answerBtn);
        final RadioButton firstAnswer = findViewById(R.id.firstAnswer);
        final RadioButton secondAnswer = findViewById(R.id.secondAnswer);
        final TextView textView1 = findViewById(R.id.textView1);
        final TextView textView2 = findViewById(R.id.textView2);

 

Now, the button should respond when we click on it. This is, as you probably know by now, done with a ClickListener:

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

 

We said that the app should tell us if we got the correct answer when the button is clicked, so how do we do that? Well, every time the button is clicked, we can check the state on the RadioButtons. If both of the correct answers are checked, the app should say:

1. Correct

2. Correct

Not

1. Correct

1. Correct

as in the video (my bad, sorry). Anyway, all we have to do is to change the text of textView1 and textView2 if the statement 

if (firstAnswer.isChecked())

is true. Pretty easy, right? Here comes the full MainActivity.java:

package com.hallucind.extremelyimportantsurvey;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        Button button = findViewById(R.id.answerBtn);
        final RadioButton firstAnswer = findViewById(R.id.firstAnswer);
        final RadioButton secondAnswer = findViewById(R.id.secondAnswer);
        final TextView textView1 = findViewById(R.id.textView1);
        final TextView textView2 = findViewById(R.id.textView2);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (firstAnswer.isChecked()) {
                    textView1.setTextColor(Color.parseColor("#00ff00"));
                    textView1.setText("1. Correct");
                }
                else {
                    textView1.setTextColor(Color.parseColor("#ff0000"));
                    textView1.setText("1. Wrong");
                }

                if (secondAnswer.isChecked()) {
                    textView2.setTextColor(Color.parseColor("#00ff00"));
                    textView2.setText("2. Correct");
                }
                else {
                    textView2.setTextColor(Color.parseColor("#ff0000"));
                    textView2.setText("2. Wrong");
                }
            }
        });
    }
}

 

I added color to the textViews to spice things up, with the statements textView2.setTextColor(Color.parseColor("#00ff00"));.

#00ff00 is green and #ff0000 is red in hexadecimal.

 

Video:

 

Enjoyed this article? Give the teacher an apple.

cookie

0

Author

authors profile photo

Articles with similar tags

Comments