CHAPTER 4: Widget (Radio Button, CheckBox And Spinner)

• Radio Button
Introduction to Android RadioButton
Beginning with Android RadioButton, A RadioButton is a button that has two
states, that are either check or uncheck. This means if we click on a RadioButton it
gets into Checked state and by default, it comes in Unchecked State.

<RadioButton
android: text= “I am a button”
android: id= “@+id/rdb”
// other attributes
>

Attributes of Android RadioButton

Some of the attributes that we can use to customize the RadioButton in Android are
as follows:
android: id – It set a unique identity.
android: checked – It specifies the current state of the button.
android: gravity – It sets the alignment of the text.
android: text – It sets the text for the Radio Button.
android:textColor – It sets the color of the text.
android:textSize – It sets the size of the text.
android:textStyle – It sets the style of the text, like – bold, italics.
android: background – It sets the color for the background of the button.
android: padding – It sets the padding from left, right bottom or the top.
android:onClick – It invokes the method onClick() when the button is clicked.
android: visibility – It controls the visibility of the Radio Button.

RadioGroup in Android
Radio Group in Android is a group that contains a set of radio buttons. They contain
Radio buttons in a group or in separate groups according to the requirement. The
specialty of a Radio group is, among all the available Radio buttons inside it, only
one can be chosen. After selecting a Radio button if we select some other Radio
button, then the previous one gets deselected. Their need is basically to select one
right option among all the other available options. For example, Multiple Choice
Questions.

1
To define it in our layout file, we will write the following:
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="90dp">

<RadioButton
android:id="@+id/rdb"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:text="RadioButton1"
android:textSize="25dp" />

<RadioButton
android:id="@+id/rdb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton2"
android:textSize="25dp" />
</RadioGroup>

Implementation of Android RadioButton and Android RadioGroup

Let us see the implementation of the Android Radio Button and Android Radio
Group through the following example:
Step 1. First of all, we will create a new project and name it. After this, we will
define the layout in activity_main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="100dp"
android:layout_marginTop="80dp"
android:fontFamily="@font/"
android:text="DataFlair "
android:textColor="#169179"

2
 android:textSize="50dp"
android:textStyle="bold" />

<TextView
android:id="@+id/txtView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="150dp"
android:text="Which city is Capital of Indonesia"
android:textSize="18dp" />

<RadioGroup
android:id="@+id/rdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtView"
android:orientation="vertical">

<RadioButton
android:id="@+id/rbJkt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:onClick="onRadioButtonClicked"
android:padding="10dp"
android:text="Jakarta" />

<RadioButton
android:id="@+id/rbBdg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:onClick="onRadioButtonClicked"
android:padding="10dp"
android:text="Bandung" />

<RadioButton
android:id="@+id/rbMks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:onClick="onRadioButtonClicked"
android:padding="10dp"
android:text="Makassar" />

<RadioButton
android:id="@+id/rbBpp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:onClick="onRadioButtonClicked"
android:padding="10dp"
android:text="Balikpapan" />
3
 </RadioGroup>

<Button
android:id="@+id/showbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/rdGroup"
android:layout_marginLeft="100dp"
android:layout_marginTop="12dp"
android:text="Show the correct answer" />

</RelativeLayout>

Step 2. Now the thing we will do is, writing the following code in
MainActivity.java file:
package com.dipanegara.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.Toast;

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

Makassar = findViewById(R.id.rbMks);
Balikpapan = findViewById(R.id.rbBpp);
Jakarta = findViewById(R.id.rbJkt);
Bandung = findViewById(R.id.rbBdg);

Button showbtn = findViewById(R.id.showbtn);

showbtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String Res = " Right Answer is Jakarta, ";
Res += (Bandung.isChecked()) ? " not Bandung" :
(Balikpapan.isChecked()) ? " not Balikpapan" :
(Jakarta.isChecked()) ? " Bravo " : (Makassar.isChecked()) ? " not
Makassar" : "";
Toast.makeText(getApplicationContext(), Res,
Toast.LENGTH_SHORT).show();
}
});
}

4
 public void onRadioButtonClicked(View view) {
boolean checked = ((RadioButton) view).isChecked();
String msg = "";
// We'll check which radiobutton is clicked
switch (view.getId()) {
case R.id.rbMks:
if (checked)
msg = "You Clicked Makassar";
break;
case R.id.rbBpp:
if (checked)
msg = "You Clicked Balikpapan ";
break;
case R.id.rbJkt:
if (checked)
msg = "You Clicked Jakarta ";
break;
case R.id.rbBdg:
if (checked)
msg = "You Clicked Bandung";
break;
}
Toast.makeText(getApplicationContext(), msg,
Toast.LENGTH_SHORT).show();
}
}

Step 3. Now we will run this:

This is the implementation of the Radio Button and Radio Group.

5
• CheckBox
Introduction to Android CheckBox
CheckBox is also a two-state button, it can have either checked state or unchecked
state. The major difference between Android CheckBox and Android RadioButton
is that checkboxes can be unchecked manually.

• Check means ON or True

• Uncheck means OFF or False

Android CheckBox is mostly useful when there are multiple options & the users
are allowed to choose all the options that are applicable.

To define it in the layout file, we will write the code as follows:

<CheckBox
android:id="@+id/myCheckBoxl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:onClick="onCheckboxClicked"
android:padding="10dp"
android:text="Check Box" />

Attributes of Android CheckBox

We can also set attributes on CheckBox to customize it in our way, using the
following attributes:

android: id – It set a unique identity

android: checked – It specifies the current state of the CheckBox.
android: gravity – It sets the alignment of the CheckBox.
android: text – It sets the text for the Radio CheckBox.
android:textColor – It sets the color of the text in the CheckBox.
android:textSize – It sets the size of the text in CheckBox.
android:textStyle – It sets the style of the text, like – bold, italics.
android: background – It sets the color for the background of the CheckBox.
android: padding – It sets the padding from left, right bottom or the top.
android:onClick – It invokes the method onClick() when the button is clicked.
android: visibility – It controls the visibility of the CheckBox.
Implementation of Android RadioButton and Android RadioGroup
6
Let us see the implementation of the Android Checkbox through the following
example :

Step 1. First of all, we will create a new project and name it. After this, we will
define the layout in activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:fontFamily="@font/"
android:text="DataFlair "
android:textColor="#169179"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Choose your favourite cities "
android:textColor="#169179"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<CheckBox
android:id="@+id/myJkt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckboxClicked"
android:padding="10dp"
android:text="Jakarta"
app:layout_constraintStart_toStartOf="@+id/textView2"
app:layout_constraintTop_toBottomOf="@+id/textView2" />

<CheckBox
7
 android:id="@+id/myBdg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckboxClicked"
android:padding="10dp"
android:text="Bandung"
app:layout_constraintStart_toStartOf="@+id/myJkt"
app:layout_constraintTop_toBottomOf="@+id/myJkt" />

<CheckBox
android:id="@+id/myMks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckboxClicked"
android:padding="10dp"
android:text="Makassar"
app:layout_constraintStart_toStartOf="@+id/myBdg"
app:layout_constraintTop_toBottomOf="@+id/myBdg" />

<CheckBox
android:id="@+id/mySrb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckboxClicked"
android:padding="10dp"
android:text="Surabaya"
app:layout_constraintStart_toStartOf="@+id/myMks"
app:layout_constraintTop_toBottomOf="@+id/myMks" />

<CheckBox
android:id="@+id/myYog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckboxClicked"
android:padding="10dp"
android:text="Yogyakarta"
app:layout_constraintStart_toStartOf="@+id/mySrb"
app:layout_constraintTop_toBottomOf="@+id/mySrb" />

<Button
android:id="@+id/showBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="show me"
app:layout_constraintStart_toStartOf="@+id/myYog"
app:layout_constraintTop_toBottomOf="@+id/myYog" />
</androidx.constraintlayout.widget.ConstraintLayout>

8
Step 2: Now we will write the following code in MainActivity.java file:
package com.dipanegara.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

CheckBox Mks, Jkt, Srb, Bdg, Yog;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Mks = findViewById(R.id.myMks);
Srb = findViewById(R.id.mySrb);
Jkt = findViewById(R.id.myJkt);
Bdg = findViewById(R.id.myBdg);
Yog = findViewById(R.id.myYog);
Button showbtn = findViewById(R.id.showBtn);
showbtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String Res = "Favourite cities";
if (Mks.isChecked()) {
Res += "\n Makassar";
}
if (Srb.isChecked()) {
Res += "\n Surabaya";
}
if (Jkt.isChecked()) {
Res += "\n Jakarta";
}
if (Bdg.isChecked()) {
Res += "\n Bandung";
}
if (Yog.isChecked()) {
Res += "\n Yogyakarta";
}
Toast.makeText(getApplicationContext(), Res,
Toast.LENGTH_SHORT).show();
}
});
}

public void onCheckboxClicked(View view) {

boolean checked = ((CheckBox) view).isChecked();
String msg = "";

9
 switch (view.getId()) {
case R.id.myMks:
msg = checked ? "Makassar Selected" : "Makassar
Deselected";
break;
case R.id.mySrb:
msg = checked ? "Surabaya Selected" : "Surbaya
Deselected";
break;
case R.id.myJkt:
msg = checked ? "Jakarta Selected" : "Jakarta
Deselected";
break;
case R.id.myBdg:
msg = checked ? "Bandung Selected" : "Bandung
Deselected";
break;
case R.id.myYog:
msg = checked ? "Yogyakarta Selected" : "Yogyakarta
Deselected";
break;
}
Toast.makeText(getApplicationContext(), msg,
Toast.LENGTH_SHORT).show();
}
}

Step 3: Now we will run the code as follows:

The following would be the CheckBox in our app:

10
• Spinner
Introduction to Android Spinner
Android Spinner is like the combox box of AWT or Swing. It can be used to display
the multiple options to the user in which only one item can be selected by the user.

Android spinner is like the drop down menu with multiple values from which the
end user can select only one value. Android spinner is associated with
AdapterView. So you need to use one of the adapter classes with spinner. Android
Spinner class is the subclass of AsbSpinner class.

Step 1. First of all, we will create a new project and name it. After this, we will
define the layout in activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Spinner
android:id="@+id/spinner"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

11
Step 2: Now we will write the following code in MainActivity.java file:
package com.dipanegara.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements

AdapterView.OnItemSelectedListener {
String[] country = { "Indonesia", "USA", "China", "Japan",
"Other"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Getting the instance of Spinner and applying
OnItemSelectedListener on it
Spinner spin = findViewById(R.id.spinner);
spin.setOnItemSelectedListener(this);

//Creating the ArrayAdapter instance having the country

list
ArrayAdapter aa = new
ArrayAdapter(this,android.R.layout.simple_spinner_item,country);

aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown
_item);
//Setting the ArrayAdapter data on the Spinner
spin.setAdapter(aa);

//Performing action onItemSelected and onNothing selected

@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int position, long id) {

Toast.makeText(getApplicationContext(),country[position] ,
Toast.LENGTH_LONG).show();
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
}

12
Step 3: Now we will run the code as follows:
The following would be the Spinner in our app:

13
Refrence :
https://data-flair.training/blogs/android-radiobutton/
https://www.javatpoint.com/android-spinner-example

14