The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Other Common Widgets and Containers

In the chapter on basic widgets, we left out all of the classic “two-state” widgets, such as checkboxes and radio buttons. We will examine those and other related widgets in this chapter.

Beyond the classic general-purpose containers (LinearLayout, RelativeLayout, TableLayout), there are other specialized containers, like FrameLayout and RadioGroup, that you will use from time to time. We will examine those in this chapter as well.

Just a Box to Check

The classic checkbox has two states: checked and unchecked. Clicking the checkbox toggles between those states to indicate a choice (e.g., “Add rush delivery to my order”).

In Android, there is a CheckBox widget to meet this need. It has TextView as an ancestor, so you can use TextView properties like android:textColor to format the widget.

Within Java, you can invoke:

  1. isChecked() to determine if the checkbox has been checked
  2. setChecked() to force the checkbox into a checked or unchecked state
  3. toggle() to toggle the checkbox as if the user clicked upon it

Also, you can register a listener object (in this case, an instance of OnCheckedChangeListener) to be notified when the state of the checkbox changes.

For example, from the Basic/CheckBox sample project, here is a simple checkbox layout:

<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/check"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/unchecked"/>

The corresponding CheckBoxDemo.java retrieves and configures the behavior of the checkbox:

package com.commonsware.android.checkbox;

import android.app.Activity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;

public class CheckBoxDemo extends Activity implements
    CompoundButton.OnCheckedChangeListener {
  CheckBox cb;

  @Override
  public void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    setContentView(R.layout.main);

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

  public void onCheckedChanged(CompoundButton buttonView,
                               boolean isChecked) {
    if (isChecked) {
      cb.setText(R.string.checked);
    }
    else {
      cb.setText(R.string.unchecked);
    }
  }
}

Note that the activity serves as its own listener for checkbox state changes since it implements the OnCheckedChangeListener interface (set via cb.setOnCheckedChangeListener(this)). The callback for the listener is onCheckedChanged(), which receives the checkbox whose state has changed and what the new state is. In this case, we update the text of the checkbox to reflect what the actual box contains.

The result? Clicking the checkbox immediately updates its text, as shown below:

CheckBoxDemo Sample App, in Theme.Holo, with CheckBox Unchecked
Figure 148: CheckBoxDemo Sample App, in Theme.Holo, with CheckBox Unchecked

CheckBoxDemo Sample App, in Theme.Holo, with CheckBox Checked
Figure 149: CheckBoxDemo Sample App, in Theme.Holo, with CheckBox Checked

CheckBoxDemo Sample App, in Theme, with CheckBox Checked
Figure 150: CheckBoxDemo Sample App, in Theme, with CheckBox Checked

CheckBoxDemo Sample App, in Theme.Material, with CheckBox Checked
Figure 151: CheckBoxDemo Sample App, in Theme.Material, with CheckBox Checked

Android Studio Graphical Layout Editor

The CheckBox widget can be found in the “Widgets” portion of the Palette in the Android Studio Graphical Layout editor:

Widgets Palette, CheckBox Shown Highlighted
Figure 152: Widgets Palette, CheckBox Shown Highlighted

You can drag it into the layout and configure it as desired using the Properties pane. As CheckBox inherits from TextView, most of the settings are the same as those you would find on a regular TextView.

Don’t Like Checkboxes? How About Toggles or Switches?

A similar widget to CheckBox is ToggleButton. Like CheckBox, ToggleButton is a two-state widget that is either checked or unchecked. However, ToggleButton has a distinct visual appearance:

ToggleButtonDemo Sample, Unchecked, in Theme.Holo
Figure 153: ToggleButtonDemo Sample, Unchecked, in Theme.Holo

ToggleButtonDemo Sample, Checked, in Theme.Holo
Figure 154: ToggleButtonDemo Sample, Checked, in Theme.Holo

Otherwise, ToggleButton behaves much like CheckBox. You can put it in a layout file, as seen in the Basic/ToggleButton sample:

<?xml version="1.0" encoding="utf-8"?>
<ToggleButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

You can also set up an OnCheckedChangeListener to be notified when the user changes the state of the ToggleButton.

Similarly, Android has a Switch widget, showing the state via a small “ON/OFF” slider:

SwitchDemo Sample, Unchecked, in Theme.Holo
Figure 155: SwitchDemo Sample, Unchecked, in Theme.Holo

SwitchDemo Sample, Checked, in Theme.Holo
Figure 156: SwitchDemo Sample, Checked, in Theme.Holo

SwitchDemo Sample, Unchecked, in Theme.Material
Figure 157: SwitchDemo Sample, Unchecked, in Theme.Material

SwitchDemo Sample, Checked, in Theme.Material
Figure 158: SwitchDemo Sample, Checked, in Theme.Material

Switch, like CheckBox and ToggleButton, inherits from CompoundButton, and therefore shares a common API, for methods like toggle(), isChecked(), and setChecked(). And, as with the others, you can put it in a layout file, as seen in the Basic/Switch sample:

<?xml version="1.0" encoding="utf-8"?>
<Switch xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

The biggest limitation with Switch is that it was only added to the Android SDK in API Level 14. If your minSdkVersion is set to 14 or higher, you are welcome to use Switch. If your minSdkVersion is set to something lower than 14, though, you will either need to choose something else or get into more complicated scenarios, like using a library that offers a backport of Switch. We will cover those more complicated scenarios later in the book; for now, it is simplest to only use Switch if your minSdkVersion is set to 14 or higher.

Android Studio Graphical Layout Editor

The ToggleButton and Switch widgets can be found in the “Widgets” portion of the Palette in the Android Studio Graphical Layout editor, just beneath the CheckBox widget:

Widgets Palette, ToggleButton and Switch At Bottom
Figure 159: Widgets Palette, ToggleButton and Switch At Bottom

You can drag either widget into the layout and configure it as desired using the Properties pane.

Turn the Radio Up

The preview of this section was last seen in the Bermuda Triangle.

Scrollwork

The preview of this section is sleeping in.

Making Progress with ProgressBars

The preview of this section is being chased by zombies.

Framing the Scene

The preview of this section apparently resembled a Pokémon.

Visit the Trails!

The preview of this section is in the process of being translated from its native Klingon.