Android Custom CheckBox

In this Android Tutorial for beginners we are going to see about android basic widgets. We have already seen about how to display words using TextView, changing its color, face properties, setting up action listener and background for our button, using Toast to display a notification, using ImageButton, and Basic CheckBox in the previous tutorials. But now we are going to discuss about Android Custom CheckBox

Download Code

CheckBox is a subclass of TextView, so everything discussed in the preceding section in terms of formatting the face of the button still holds.
The properties are already seen in the previous Android TextView Tutorial .

Methods to be used in Java Code

isChecked() — to determine if the checkbox has been checked
setChecked() — to force the checkbox into a checked or unchecked state
toggle() — to toggle the checkbox as if the user checked it

Creating Layout

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#555555" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/options"
        android:textSize="10pt"
        android:typeface="serif"
        android:textStyle="bold"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        />
    <CheckBox
        android:id="@+id/blue_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:typeface="serif"
        android:textStyle="bold"
        android:text="@string/bluetooth"
        />
    <CheckBox
        android:id="@+id/wifi_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:typeface="serif"
        android:textStyle="bold"
        android:text="@string/wifi"
        />
    <CheckBox
        android:id="@+id/silent_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/silent"
        android:typeface="serif"
        android:textStyle="bold"
        android:button="@drawable/box"/>
    <CheckBox
        android:id="@+id/general_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/general"
        android:typeface="serif"
        android:textStyle="bold"
        android:button="@drawable/box"/>
     <CheckBox
        android:id="@+id/mobile_data_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/mobile_data"
        android:typeface="serif"
        android:textStyle="bold"
        android:paddingLeft="80dp"
        android:button="@drawable/switchbox"/>
    <CheckBox
        android:id="@+id/power_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/power_saver_mode"
        android:typeface="serif"
        android:textStyle="bold"
        android:paddingLeft="80dp"
        android:button="@drawable/switchbox"/>
</LinearLayout>

box.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/box_on" />
    <item android:state_checked="false" android:drawable="@drawable/box_off" />
</selector>

switchbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/switch_on" />
    <item android:state_checked="false" android:drawable="@drawable/switch_off" />
</selector>

Below you can find the description of each properties.

android:id=”@+id/power_switch”-Unique Id of the Check Box used to refer later in our java code.
android:layout_width=”wrap_content”-CheckBox width will be same as the content width. [dimension]
android:layout_height=”wrap_content”-CheckBox width will be same as the content width. [dimension]
android:typeface=”serif”-Typeface (normal, sans, serif, monospace) for the text. [enum]
android:text=”@string/power_saver_mode”-You need to set a string to the CheckBox to display.
android:text=”@drawable/switchbox”-switchbox is an xml file that contains the image reference which we want to display as CheckBox Image. You need to place the switchbox.xml in res/drawable folder. If you want, you can directly specify image name instead of creating xml file.

For this tutorial you need to create Six CheckBox. Paste the following code in your main.xml layout button, and play with the property values till you get your desire result.

AndroidImageButtonActivity.java

package com.vimal.android.CustomCheckBox;
import android.app.Activity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.Toast;
import android.widget.CompoundButton.OnCheckedChangeListener;
public class CustomCheckBoxActivity extends Activity {
    private CheckBox blueSwitch;
	private CheckBox wifiSwitch;
	private CheckBox silentSwitch;
	private CheckBox generalSwitch;
	private CheckBox mobileDataSwitch;
	private CheckBox powerSwitch;
	String msg="";
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        blueSwitch=(CheckBox) findViewById(R.id.blue_switch);
        wifiSwitch=(CheckBox) findViewById(R.id.wifi_switch);
        silentSwitch=(CheckBox) findViewById(R.id.silent_switch);
        generalSwitch=(CheckBox) findViewById(R.id.general_switch);
        mobileDataSwitch=(CheckBox) findViewById(R.id.mobile_data_switch);
        powerSwitch=(CheckBox) findViewById(R.id.power_switch);
        setListener();
    }
	private void setListener() {
		    blueSwitch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	        	@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
	        		    msg="BlueTooth is Switched OFF";
						if(isChecked){
							msg="BlueTooth is Switched ON";
						}
						Toast.makeText(CustomCheckBoxActivity.this, msg ,Toast.LENGTH_SHORT).show();
				}
			});
	        wifiSwitch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	        	@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
	        		    msg="Wifi is Switched OFF";
						if(isChecked){
							msg="Wifi is Switched ON";
						}
						Toast.makeText(CustomCheckBoxActivity.this, msg ,Toast.LENGTH_SHORT).show();
				}
			});
	        silentSwitch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	        	@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
	        		    msg="Silent Mode is Switched OFF";
						if(isChecked){
							msg="Silent Mode is Switched ON";
						}
						Toast.makeText(CustomCheckBoxActivity.this, msg ,Toast.LENGTH_SHORT).show();
				}
			});
	        generalSwitch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	        	@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
	        		    msg="General Mode is Switched OFF";
						if(isChecked){
							msg="General Mode is Switched ON";
						}
						Toast.makeText(CustomCheckBoxActivity.this, msg ,Toast.LENGTH_SHORT).show();
				}
			});
	        mobileDataSwitch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	        	@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
	        		    msg="Mobile Data is Switched OFF";
						if(isChecked){
							msg="Mobile Data is Switched ON";
						}
						Toast.makeText(CustomCheckBoxActivity.this, msg ,Toast.LENGTH_SHORT).show();
				}
			});
	        powerSwitch.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	        	@Override
				public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
	        		    msg="PowerSaver Mode is Switched OFF";
						if(isChecked){
							msg="PowerSaver Mode is Switched ON";
						}
						Toast.makeText(CustomCheckBoxActivity.this, msg ,Toast.LENGTH_SHORT).show();
				}
			});
	}
}

Lets split the code for better understanding

Create three CheckBox local field and set reference to the corresponding CheckBox by using the findViewById.
Set OnCheckedChangeListener to each CheckBox and place the desire code inside it’s onCheckedChanged() method.
Now we are going to check whether the checkbox is checked by using if(isChecked) conditional statement.
For this custom check box tutorial, I am going to make use of Toast to display notification to the users.

Reference Images And Output Screen

Download Code

In this Android Custom CheckBox Tutorial we have seen about the how to make our custom CheckBox. In the next tutorial we are going to see about the Radio Button.

Google+