Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Using CheckBoxes and RadioButtons

Published? true
FormatLanguage: WikiFormat

Problem:

You want to offer the user a set of choices that is more limited than a list.

Solution:

Use CheckBoxes, RadioButtons or Spinners as appropriate

Discussion:

These Views are probably familiar to you from other user interfaces. They allow the user to choose from multiple options. CheckBoxes are typically used when you want to offer multiple selections with a yes/no or true/false choice for each. RadioButtons are used when only one choice is allowed at a time.

CheckBox, RadioButtons, and Spinner

Spinners are similar to "combo boxes' in some GUI frameworks, and are now covered in the Recipe Dropdown Choooser with the Spinner class. Android has adapted these familiar components to make them more useful in a touchscreen environment. The screenshot above shows the three types of multiple-choice Views laid out on an Android application, with the Spinner pulled down to show the options. The layout XML file that created the screen in the figure looks like this:

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          >
     <CheckBox
       android:id="@+id/cbxBox1"
       android:layout_width="20dp"
       android:layout_height="20dp"
       android:checked="false"
       />
     <TextView
       android:id="@+id/txtCheckBox"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="CheckBox: Not checked"
          />
     <RadioGroup
       android:id="@+id/rgGroup1"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">
       <RadioButton android:id="@+id/RB1" android:text="Button1" />
       <RadioButton android:id="@+id/RB2" android:text="Button2" />
       <RadioButton android:id="@+id/RB3" android:text="Button3" />
       </RadioGroup>
     <TextView
       android:id="@+id/txtRadio"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:text="RadioGroup: Nothing picked"
       />
     <Spinner
       android:id="@+id/spnMusketeers"
       android:layout_width="250dp"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_marginTop="2dp"
       />
     </LinearLayout>

The XML file just lists each View we want on the screen along with the attributes we want. A RadioGroup is really a ViewGroup, so it contains the appropriate RadioButton Views. Here is the Java file that responds to user clicks.

package com.oreilly.select;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import com.google.android.maps.GeoPoint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.AdapterView.OnItemSelectedListener;

public class SelectExample extends Activity {
  private CheckBox checkBox;
  private TextView txtCheckBox, txtRadio;
  private RadioButton rb1, rb2, rb3;
  private Spinner spnMusketeers;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        checkBox = (CheckBox) findViewById(R.id.cbxBox1);
        txtCheckBox = (TextView) findViewById(R.id.txtCheckBox);
        txtRadio = (TextView) findViewById(R.id.txtRadio);
        rb1 = (RadioButton) findViewById(R.id.RB1);
        rb2 = (RadioButton) findViewById(R.id.RB2);
        rb3 = (RadioButton) findViewById(R.id.RB3);
        spnMusketeers = (Spinner) findViewById(R.id.spnMusketeers);
        // React to events from the CheckBox
        checkBox.setOnClickListener(new CheckBox.OnClickListener() {
          public void onClick(View v){
                  if (checkBox.isChecked()) {
                       txtCheckBox.setText("CheckBox: Box is checked");
                  }
                  else
                  {
                     txtCheckBox.setText("CheckBox: Not checked");
                  }
          }
        });
        // React to events from the RadioGroup
        rb1.setOnClickListener(new RadioGroup.OnClickListener() {
          public void onClick(View v){
             txtRadio.setText("Radio: Button 1 picked");
          }
        });
        rb2.setOnClickListener(new RadioGroup.OnClickListener() {
          public void onClick(View v){
             txtRadio.setText("Radio: Button 2 picked");
          }
        });
        rb3.setOnClickListener(new RadioGroup.OnClickListener() {
          public void onClick(View v){
             txtRadio.setText("Radio: Button 3 picked");
          }
        });
         // Set up the Spinner entries
         List<String> lsMusketeers = new ArrayList<String>();
         lsMusketeers.add("Athos");
         lsMusketeers.add("Porthos");
         lsMusketeers.add("Aramis");
         ArrayAdapter<String> aspnMusketeers =
           new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item,
             lsMusketeers);
         aspnMusketeers.setDropDownViewResource
             (android.R.layout.simple_spinner_dropdown_item);
         spnMusketeers.setAdapter(aspnMusketeers);
    // Set up a callback for the spinner
    spnMusketeers.setOnItemSelectedListener(
         new OnItemSelectedListener() {
              public void onNothingSelected(AdapterView<?> arg0) { }
              public void onItemSelected(AdapterView<?> parent, View v,
                int position, long id) {
                 // Code that does something when the Spinner value changes
              }
         });
    }
}

These three Views work as follows:

CheckBox

The CheckBox View takes care of flipping its state back and forth and displaying the appropriate checkmark when the state is true. All you have to do is create an OnClickListener to catch click events, and you can add whatever code you want to react.

RadioGroup

As mentioned earlier, the RadioGroup View is really a ViewGroup that contains any number of RadioButton Views. The user can select only one of the buttons at a time, and you capture the selections by setting OnClickListeners for each RadioButton. Note that clicking on one of the RadioButtons does not fire a click event for the RadioGroup.

Taken together, these three Views let you provide a short set of choices and have the user select one or multiple choices from the choices offered.