Wednesday, December 12, 2012

Android beginner tutorial: Part 18 - CheckBox widget

In this tutorial we will learn about CheckBoxes in Android SDK.

A CheckBox is a widget that acts as a switch - it can be toggled on or off. The component includes a text area next to the check box, which can display text that's applied to the object's "text" property.

Let's go to activity_main.xml layout file right now and create a simple layout with a checkbox in it. Set its default state to unchecked by setting its "checked" property to "false". Set its id and text values:

<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" >
        
    <CheckBox
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/check_off"
        android:checked="false"
        android:id="@+id/checkbox"/>
    
</LinearLayout>

The strings.xml file contains values for Checked and Unchecked checkbox states:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Code For Food Test</string>
    <string name="check_on">On</string>
    <string name="check_off">Off</string>
    <string name="menu_settings">Settings</string>

</resources>

Now let's go to the java file and add a listener to the checkbox. I want to change the label of the checkbox based on its current state.

In one of the previous tutorials I explained three ways of setting event listeners. Right now we're going to use the one that involves implementing the respective listener interface and making the event handler inside the Activity class.

First, implement the OnCheckedChangeListener interface:

import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;

public class MainActivity extends Activity implements OnCheckedChangeListener{

Define the checkbox, add a listener using setOnCheckedChangeListener method, pass "this" as the parameter.

public CheckBox check;

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

check = (CheckBox)findViewById(R.id.checkbox);
check.setOnCheckedChangeListener();
}

The handler function is called onCheckedChanged, receives two parameters. We can use the isChecked boolean parameter to see what state the checkbox is in. Set the text of the label using setText() method:

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
if(isChecked){
check.setText(R.string.check_on);
}else{
check.setText(R.string.check_off);
}
}

Full code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;

public class MainActivity extends Activity implements OnCheckedChangeListener{

public CheckBox check;

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

check = (CheckBox)findViewById(R.id.checkbox);
check.setOnCheckedChangeListener(this);
}

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
if(isChecked){
check.setText(R.string.check_on);
}else{
check.setText(R.string.check_off);
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

Test the application on a device or an emulator. When you check/uncheck the checkbox, the text changes between "On" and "Off".

Thanks for reading!

No comments:

Post a Comment