Learn Android Development For Beginners

Checkbox Control

Checkbox is also common control to build user interface. It has two states on and off. On Layout file checkbox uses <CheckBox> element and it has checked property to set the on/off state. By default checked is false and user can set “On” state using android:checked="true". Text property shows the read only content next to the check box.

 <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Reading News Paper"/>

Checkbox exposes the isChecked() method to get the current state of the checkbox and setChecked(boolean) method to set the state of the checkbox. For more understanding of the checkbox add different checkboxes on the layout file.

 <CheckBox
    android:id="@+id/checkBox1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="Reading News Paper"/>
 <CheckBox
    android:id="@+id/checkBox2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Morning Walk"/>

 <CheckBox
    android:id="@+id/checkBox3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Playing Football"/>

 <LinearLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:layout_gravity="center">

    <Button
        android:id="@+id/buttonCheckAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check All"
        android:paddingLeft="30dp"
        android:paddingRight="30dp" />

    <Button
        android:id="@+id/buttonSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:layout_gravity="center"
        />
 </LinearLayout>


    

Register the click event of the Save button and get all checkboxes in the code. Check the checked state of the check using isChecked().

Button btnSave = (Button)findViewById(R.id.buttonSave);

btnSave.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View view) {

        CheckBox checkBox1 = (CheckBox)findViewById(R.id.checkBox1);
        CheckBox checkBox2 = (CheckBox)findViewById(R.id.checkBox2);
        CheckBox checkBox3 = (CheckBox)findViewById(R.id.checkBox3);

        String message = new String();

        if(checkBox1.isChecked())
        {
            message += checkBox1.getText() + " is selected. \n";
        }

        if(checkBox2.isChecked())
        {
            message += checkBox2.getText() + " is selected. \n";
        }

        if(checkBox3.isChecked())
        {
            message += checkBox3.getText() + " is selected. \n";
        }

        Toast.makeText(getApplicationContext(),message,Toast.LENGTH_SHORT).show();
    }
    
});

    

Checkbox state can be change from code using setChecked() method.

checkBox1.setChecked(true);
checkBox2.setChecked(true);
checkBox3.setChecked(true);

Set Checkbox Style for Different States

Android also proved a way to change style or image for different states of the checkbox as we changed it for the Button in previous chapter. Put all the images for different checkbox state in the drawable folder. Add new xml selector file "style_checkbox.xml" in the drawable folder. See the image below

Add the following xml in the file.

<?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/checkbox_checked" ></item>
    <item android:state_checked="false" android:drawable="@drawable/checkbox" ></item>

</selector>

Add the checkbox into the layout and set xml drawable resource to the button property of the check box android:button="@drawable/style_checkbox".

<CheckBox
    android:id="@+id/styledCheckBox3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/style_checkbox"
    style="@style/customCheckBox"
    android:text="China"/>

Click event of the checkbox

Handling of the click event for the checkbox is same as the button. It provides different ways to handle it. Set the onClick property of the checkbox and pass name of the public method as parameter e.g. android:onClick="CheckAllHandler".

<CheckBox
    android:id="@+id/styledCheckBoxAll"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/style_checkbox"
    style="@style/customCheckBox"
    android:text="Check All"
    android:onClick="CheckAllHandler"/>

Write the public method in the code file to handle click event.

public void CheckAllHandler(View view)
{

  CheckBox chk = (CheckBox)view;
  Boolean selected = chk.isChecked();

  CheckBox checkBox1 = (CheckBox)findViewById(R.id.styledCheckBox1);
  CheckBox checkBox2 = (CheckBox)findViewById(R.id.styledCheckBox2);
  CheckBox checkBox3 = (CheckBox)findViewById(R.id.styledCheckBox3);

  checkBox1.setChecked(selected);
  checkBox2.setChecked(selected);
  checkBox3.setChecked(selected);

}
    

Download Source Code

You can get the source code. Download Source Code

;