Custom CheckBox in Android

CheckBox belongs to the android.widget.CheckBox class. Android CheckBox class is the subclass of CompoundButton class. It is generally used in a place where users can select one or more choices from a given list of choices. In this article, we are going to see how we can implement custom CheckBox in android. 

What we are going to build in this article? 

Here is a sample video of what we are going to build in this application. Note that we will be using java language to make this project.

Step by Step Implementation

Step 1: Create a New Project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• Name the application at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?

Step 2. Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Programming Language :"
        android:textSize="20sp"
        android:textStyle="bold"/>

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

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

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bt_submit"
        android:text="Submit"
        android:layout_marginTop="10dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Selected Language:"
        android:textSize="20sp"
        android:textStyle="bold"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/output"
        android:textSize="40sp"
        android:textAlignment="center"
        android:layout_marginTop="5dp"/>

</LinearLayout>

Step 3: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.

Java

package com.example.customcheckbox;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    CheckBox cbAndroid, cbJava, cbPhp;
    Button btSubmit;
    TextView tvOutput;

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

        cbAndroid = findViewById(R.id.cb_android);
        cbJava = findViewById(R.id.cb_java);
        cbPhp = findViewById(R.id.cb_php);
        btSubmit = findViewById(R.id.bt_submit);
        tvOutput = findViewById(R.id.output);

        cbAndroid.setOnClickListener(
            new View.OnClickListener() {
                @Override public void onClick(View view)
                {
                    if (cbAndroid.isChecked()) {
                        cbAndroid.setTextColor(
                            getResources().getColor(
                                R.color.purple_200));
                    }
                    else {
                        cbAndroid.setTextColor(
                            getResources().getColor(
                                R.color.black));
                    }
                }
            });
        cbJava.setOnClickListener(
            new View.OnClickListener() {
                @Override public void onClick(View view)
                {
                    if (cbJava.isChecked()) {
                        cbJava.setTextColor(
                            getResources().getColor(
                                R.color.purple_200));
                    }
                    else {
                        cbJava.setTextColor(
                            getResources().getColor(
                                R.color.black));
                    }
                }
            });
        cbPhp.setOnClickListener(
            new View.OnClickListener() {
                @Override public void onClick(View view)
                {
                    if (cbPhp.isChecked()) {
                        cbPhp.setTextColor(
                            getResources().getColor(
                                R.color.purple_200));
                    }
                    else {
                        cbPhp.setTextColor(
                            getResources().getColor(
                                R.color.black));
                    }
                }
            });

        btSubmit.setOnClickListener(
            new View.OnClickListener() {
                @Override public void onClick(View view)
                {
                    String s = "";
                    if (cbAndroid.isChecked()) {
                        s += "\n Android";
                    }
                    if (cbJava.isChecked()) {
                        s += "\n Java";
                    }
                    if (cbPhp.isChecked()) {
                        s += "\n Php";
                    }
                    tvOutput.setText(s);
                }
            });
    }
}

Here is the final output of our application.

Output: