Sunday, December 23, 2012

2 How to create custom Checkbox in Android


Checkboxes allow the user to select one or more options from a set. 
In this tutorial, we show you how to customize a checkbox, add a click listener by a few different ways, and how to get the setOnCheckedChangeListener for checkbox.


This project is developed in Eclipse 4.2.0.

Here is a result of this tutorial:
Android Custom CheckBox - Figure 3

1. Make a custom checkbox by XML Layout



<CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="CheckBox 1"
        android:onClick="onCheckboxClicked"
       android:button="@drawable/checkbox_selector" />
<CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="CheckBox 2"
        android:onClick="onCheckboxClicked"
        android:layout_marginBottom="20dp"
       android:button="@drawable/checkbox_selector" />

We need a xml file “checkbox_selector” in folder drawable:
<?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/check" />
<item android:state_checked="false"
android:drawable="@drawable/uncheck" />
</selector>

And of course two image with name “check” and “uncheck” for two state of checkbox.
Android Custom CheckBox - Figure 1
Android Custom CheckBox - Figure 2



2. Two ways to attach a click listener to the checkbox, when user click on the checkbox, show info on the textview control
2.1. Use  android:onClick attribute in your checkbox  XML definition:
android:onClick="onCheckboxClicked"

Within the activity that hosts this layout, the following method handles the click event for both checkboxes:

public void onCheckboxClicked(View view) {
        // Is the view now checked?
        boolean checked = ((CheckBox) view).isChecked();
       
        // Check which checkbox was clicked
        switch(view.getId()) {
            case R.id.checkBox1:
                if (checked)
                     textview.setText("checkbox 1 is check by onclick from xml");
                else
                     textview.setText("checkbox 1 is uncheck by onclick from xml");
                break;
            case R.id.checkBox2:
                if (checked)
                     textview.setText("checkbox 2 is check by onclick from xml");
                else
                     textview.setText("checkbox 2 is uncheck by onclick from xml");
                break;
        }
    }
2.2. Or using an OnClickListener

checkbox1.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
              // TODO Auto-generated method stub
              boolean checked = ((CheckBox) v).isChecked();
              if (checked)
                   textview.setText("checkbox 1 is check by setOnClickListener");
              else
                   textview.setText("checkbox 1 is uncheck by setOnClickListener"); 
       }
});
        
checkbox2.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
              // TODO Auto-generated method stub
              boolean checked = ((CheckBox) v).isChecked();
              if (checked)
                   textview.setText("checkbox 2 is check by setOnClickListener");
              else
                   textview.setText("checkbox 2 is uncheck by setOnClickListener");
       }
});
3. How to get the setOnCheckedChangeListener for checkbox. This method is executed when there is any change in the state of the checkbox. You can change the state of checkbox from a button like:

button1.setOnClickListener(new View.OnClickListener() {
       public void onClick(View v) {
               // ==== change state of checkbox
               checkbox1.setChecked(!checkbox1.isChecked());
            }
        });

And if you want to do something when state of checkbox is changed, you want to some code below:


checkbox1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
       // TODO Auto-generated method stub
       if (buttonView.isChecked()) textview.setText("checkbox is check by button");
       else textview.setText("checkbox is uncheck by button");
       }
});
       
checkbox2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
       // TODO Auto-generated method stub
       if (buttonView.isChecked()) textview.setText("checkbox 2 is check by button");
       else textview.setText("checkbox 2 is uncheck by button");
}
});

4. DEMO
Android Custom CheckBox - Figure 3
Android Custom CheckBox - Figure 4

You can download all source codes from here

2 comments: