techStackGuru

Check Box in Android


In Android, a Check Box is nothing but a small square box. This small box is actually a button, which is toggled every time a user clicks on it. Naturally, the Check Box element has two states: checked and unchecked. These states can also be referred to as on (checked) and off (unchecked). When a user clicks on an unchecked Check Box, the empty Check Box gets filled with a check mark, which is also known as a tick mark. This is the checked state. In the same way, clicking on a checked Check Box removes the check mark in it and sends it to the unchecked state.

In Android development, a developer uses the Check Box widget when he needs to present one option or a group of options, all of which are selectable at a given time and not mutually exclusive. In addition to that, before implementing the Check Box class, one must always remember that the Compound Button class is its parent class. Every Check Box must register for click listener. CompoundButton is the parent class for the CheckBox class.

Check Box is generally used when you want user to select one or more items from the list. Example you ask user their favorite food to select among many. In this case user can select one or many according to his likes. By default Check Box is set “OFF”. You can also marked Check Box “ON” by setting android:checked =”true” in XML layout file.


We can also create Check Box in activity file.


LinearLayout ll = findViewById(R.id.ll_layout);
CheckBox box = new CheckBox(this);
box.setChecked(true);
box.setText("Your title here");
box.setBackgroundColor(Color.BLUE);
ll.addView(box);

In below example we ask users to select their favorite color. As you can see from output two colors selected, one is Blue and other one Yellow. Click on submit button to Toast the selected items.

MainActivity.java


package com.techstackguru.checkbox;

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 cbBlue, chGreen, chYellow, chRed;
    Button button;

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

        cbBlue = (CheckBox) findViewById(R.id.blue);
        chGreen = (CheckBox) findViewById(R.id.green);
        chYellow = (CheckBox) findViewById(R.id.yellow);
        chRed = (CheckBox) findViewById(R.id.red);
        button = (Button) findViewById(R.id.button);

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

    public void display(View v) {
        String colors = "";

        if (cbBlue.isChecked())
            colors = colors + " Blue ";
        if (chGreen.isChecked())
            colors = colors + " Green ";
        if (chYellow.isChecked())
            colors = colors + " Yellow ";
        if (chRed.isChecked())
            colors = colors + " Red ";

        Toast.makeText(this, "Your favourite color :" + colors,
                Toast.LENGTH_LONG).show();
    }
}

activity_main.xml


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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="22sp"
        android:layout_margin="10dp"
        android:text="Select your favourite color" />

    <CheckBox
        android:id="@+id/blue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Blue"
        android:textSize="20sp" />

    <CheckBox
        android:id="@+id/green"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Green"
        android:textSize="20sp" />

    <CheckBox
        android:id="@+id/yellow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Yellow"
        android:textSize="20sp" />

    <CheckBox
        android:id="@+id/red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Red"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"/>

</LinearLayout>

Using this code, we have asked a user to select his favourite color. Under this question, we have placed a set of Check Boxes with options that define names of different colors, such as Blue, Green and Yellow. We have also used this code to display a Toast message whenever the user selects his options and presses the “SUBMIT” button. This Toast message will read “Your favourite color : ” followed by the options the user has chosen, such as “Blue Yellow”.

Once you have completed your coding, launch your project to display your output. If you have correctly entered the above-mentioned codes, you would get the following output:

Output
check-box-1

previous-button
next-button