Every programming-language or -environment book starts off with the ever-popular “Hello, World!” demonstration: just enough of a program to prove you can build things, not so much
that you cannot understand what is going on. However, the typical “Hello, World!” program has no interactivity (that is, it just dumps the words to a console), and so is really boring.
This chapter demonstrates a simple project, but one using Advanced Push-Button Technology and the current time to show you how a simple Android activity works.
To work with anything in Android, you need a project. With ordinary Java, if you wanted, you could just write a program as a single file, compile it with javac, and run it with java, without any other support structures. Android is more complex, but to help keep it manageable Google has supplied tools to help create the project. If you are using an Android-enabled IDE, such as Eclipse with the Android plugin (available in the Android SDK), you can create a project inside of the IDE (select File→New→Project, then choose Android→Android Project).
If you are using tools that are not Android-enabled, you can use the activitycreator script, found in the tools/ directory in your SDK installation. Just pass activitycreator the package name of the activity you want to create and an --out switch indicating where the project files should be generated. Here’s an example:
activitycreator --out /path/to/my/project/dir \
com.commonsware.android.Now
You will wind up with a handful of pre-generated files, as described in Chapter 2. We’ll be using these files for the rest of this chapter.
You can also download the project directories of the samples shown in this book in a ZIP file on the CommonsWare Web site[6]. These projects are ready for use; you do not need to run activitycreator on those unpacked samples.
Your project’s src/ directory contains the standard Java-style tree of directories based upon the Java package you used when you created the project (i.e., com.commonsware.android resulted in src/com/commonsware/android/). Inside the innermost directory you should find a pregenerated source file named Now.java, which is where your first activity will go. This activity will contain a single button that displays the time the button was last pushed (or the time the application was started if the button hasn’t been pushed).
Open Now.java in your editor and paste in the following code:
package com.commonsware.android.skeleton;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.Date;
public class Now extends Activity implements View.OnClickListener {
Button btn;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
btn = new Button(this);
btn.setOnClickListener(this);
updateTime();
setContentView(btn);
}
public void onClick(View view) {
updateTime();
}
private void updateTime() {
btn.setText(new Date().toString());
}
}
Or, if you download the source files off the CommonsWare Web site, you can just use the Skeleton/Now project directly.
Let’s examine this piece-by-piece.
The package declaration needs to be the same as the one you used when creating the project. And, like in any other Java project, you need to import any classes you reference. Most of the Android-specific classes are in the android package:
package com.commonsware.android.skeleton;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.Date;
It’s worth noting that not every Java SE class is available to Android programs. Visit the Android class reference[7] to see what is and is not available.
Activities are public classes, inheriting from the android.app.Activity base class. In this case, the activity holds a button (btn):
public class Now extends Activity implements View.OnClickListener {
Button btn;
A button, as you can see from the package name, is an Android widget, and widgets are the UI elements that you use in your application.
Since, for simplicity, we want to trap all button clicks just within the activity itself, we also have the activity class implement OnClickListener.
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
btn = new Button(this);
btn.setOnClickListener(this);
updateTime();
setContentView(btn);
}
The onCreate() method is invoked when the activity is started. The first thing you should do is chain upward to the superclass, so the stock Android activity initialization can be done.
In our implementation, we then create the button instance (new Button(this)), tell it to send all button clicks to the activity instance itself (via setOnClickListener()), call a private updateTime() method (discussed in a moment), and then set the activity’s content view to be the button itself (via setContentView()).
All widgets extend the View base class. We usually build the UI out of a hierarchy of views, but in this example we are using a single view.
I discuss that magical Bundle icicle in Chapter 16. For the moment, consider it an opaque handle that all activities receive upon creation.
public void onClick(View view) {
updateTime();
}
In Swing, a JButton click raises an ActionEvent, which is passed to the ActionListener configured for the button. In Android, a button click causes onClick() to be invoked in the OnClickListener instance configured for the button. The listener is provided the view that triggered the click (in this case, the button). All we do here is call that private updateTime() method:
private void updateTime() {
btn.setText(new Date().toString());
}
When we open the activity (onCreate()) or when the button is clicked (onClick()), we update the button’s label to be the current time via setText(), which functions much the same in Android as JButton does in Swing.
To build the activity, either use your IDE’s built-in Android packaging tool, or run ant in the base directory of your project. Then, to run the activity do the following:
1. Launch the emulator (e.g., run tools/emulator from your Android SDK installation), as shown in Figure 4-1.
Figure 4-1. The Android home screen
2. Install the package (e.g., run tools/adb install /path/to/this/example/bin/Now.apk from your Android SDK installation).
3. View the list of installed applications in the emulator and find the Now application (see Figure 4-2).
Figure 4-2. The Android application “launcher”
4. Open that application.
You should see an activity screen like the one shown in Figure 4-3.
Figure 4-3. The Now demonstration activity
Clicking the button — in other words, clicking pretty much anywhere on the phone’s screen — will update the time shown in the button’s label.
Note that the label is centered horizontally and vertically, as those are the default styles applied to button captions. We can control that formatting, which Chapter 6 covers.
After you are done gazing at the awesomeness of Advanced Push-Button Technology, you can click the back button on the emulator to return to the launcher.
While it is technically possible to create and attach widgets to our activity purely through Java code, the way we did in Chapter 4, the more common approach is to use an XML-based layout file. Dynamic instantiation of widgets is reserved for more complicated scenarios, where the widgets are not known at compile-time (e.g., populating a column of radio buttons based on data retrieved off the Internet).
With that in mind, it’s time to break out the XML and learn how to lay out Android activities that way.
As the name suggests, an XML-based layout is a specification of widgets’ relationships to each other — and to their containers (more on this in Chapter 7) — encoded in XML format. Specifically, Android considers XML-based layouts to be resources, and as such layout files are stored in the res/layout directory inside your Android project.
Each XML file contains a tree of elements specifying a layout of widgets and their containers that make up one view hierarchy. The attributes of the XML elements are properties, describing how a widget should look or how a container should behave. For example, if a Button element has an attribute value of android:textStyle = "bold", that means that the text appearing on the face of the button should be rendered in a boldface font style.
Android’s SDK ships with a tool (aapt) which uses the layouts. This tool should be automatically invoked by your Android tool chain (e.g., Eclipse, Ant’s build.xml). Of particular importance to you as a developer is that aapt generates the R.java source file within your project, allowing you to access layouts and widgets within those layouts directly from your Java code.
Most everything you do using XML layout files can be achieved through Java code. For example, you could use setTypeface() to have a button render its text in bold, instead of using a property in an XML layout. Since XML layouts are yet another file for you to keep track of, we need good reasons for using such files.
Perhaps the biggest reason is to assist in the creation of tools for view definition, such as a GUI builder in an IDE like Eclipse or a dedicated Android GUI designer like DroidDraw[8]. Such GUI builders could, in principle, generate Java code instead of XML. The challenge is re-reading the UI definition to support edits—that is far simpler if the data is in a structured format like XML than in a programming language. Moreover, keeping generated XML definitions separated from hand-written Java code makes it less likely that somebody’s custom-crafted source will get clobbered by accident when the generated bits get re-generated. XML forms a nice middle ground between something that is easy for tool-writers to use and easy for programmers to work with by hand as needed.
Also, XML as a GUI definition format is becoming more commonplace. Microsoft’s XAML[9], Adobe’s Flex[10], and Mozilla’s XUL[11] all take a similar approach to that of Android: put layout details in an XML file and put programming smarts in source files (e.g., JavaScript for XUL). Many less-well-known GUI frameworks, such as ZK[12], also use XML for view definition. While “following the herd” is not necessarily the best policy, it does have the advantage of helping to ease the transition into Android from any other XML-centered view description language.
Here is the Button from the previous chapter’s sample application, converted into an XML layout file, found in the Layouts/NowRedux sample project. This code sample along with all others in this chapter can be found in the Source Code area of http://apress.com.
<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/button"
android:text=""
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
The class name of the widget — Button — forms the name of the XML element. Since Button is an Android-supplied widget, we can just use the bare class name. If you create your own
widgets as subclasses of android.view.View, you would need to provide a full package declaration as well (e.g., com.commonsware.android.MyWidget).
The root element needs to declare the Android XML namespace:
xmlns:android="http://schemas.android.com/apk/res/android"
All other elements will be children of the root and will inherit that namespace declaration.
Because we want to reference this button from our Java code, we need to give it an identifier via the android:id attribute. We will cover this concept in greater detail later in this chapter.
The remaining attributes are properties of this Button instance:
• android:text indicates the initial text to be displayed on the button face (in this case, an empty string)
• android:layout_width and android:layout_height tell Android to have the button’s width and height fill the “parent”, in this case the entire screen — these attributes will be covered in greater detail in Chapter 7.
Since this single widget is the only content in our activity, we only need this single element. Complex UIs will require a whole tree of elements, representing the widgets and containers that control their positioning. All the remaining chapters of this book will use the XML layout form whenever practical, so there are dozens of other examples of more complex layouts for you to peruse from Chapter 7 onward.
Many widgets and containers only need to appear in the XML layout file and do not need to be referenced in your Java code. For example, a static label (TextView) frequently only needs to be in the layout file to indicate where it should appear. These sorts of elements in the XML file do not need to have the android:id attribute to give them a name.
Anything you do want to use in your Java source, though, needs an android:id.
The convention is to use @+id/... as the id value, where the ... represents your locally-unique name for the widget in question. In the XML layout example in the preceding section, @+id/button is the identifier for the Button widget.
Android provides a few special android:id values, of the form @android:id/.... We will see some of these in various chapters of this book, such as Chapters 8 and 10.
Given that you have painstakingly set up the widgets and containers in an XML layout file named main.xml stored in res/layout, all you need is one statement in your activity’s onCreate() callback to use that layout:
setContentView(R.layout.main);
This is the same setContentView() we used earlier, passing it an instance of a View subclass (in that case, a Button). The Android-built view, constructed from our layout, is accessed from that code-generated R class. All of the layouts are accessible under R.layout, keyed by the base name of the layout file — main.xml results in R.layout.main.
To access our identified widgets, use findViewById(), passing in the numeric identifier of the widget in question. That numeric identifier was generated by Android in the R class as R.id.something (where something is the specific widget you are seeking). Those widgets are simply subclasses of View, just like the Button instance we created in Chapter 4.
In the original Now demo, the button’s face would show the current time, which would reflect when the button was last pushed (or when the activity was first shown, if the button had not yet been pushed).
Most of that logic still works, even in this revised demo (NowRedux). However, rather than instantiating the Button in our activity’s onCreate() callback, we can reference the one from the XML layout:
package com.commonsware.android.layouts;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.Date;
public class NowRedux extends Activity
implements View.OnClickListener {
Button btn;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
btn=(Button)findViewById(R.id.button);
btn.setOnClickListener(this);
updateTime();
}
public void onClick(View view) {
updateTime();
}
private void updateTime() {
btn.setText(new Date().toString());
}
}
The first difference is that rather than setting the content view to be a view we created in Java code, we set it to reference the XML layout (setContentView(R.layout.main)). The R.java source file will be updated when we rebuild this project to include a reference to our layout file (stored as main.xml in our project’s res/layout directory).
The other difference is that we need to get our hands on our Button instance, for which we use the findViewById() call. Since we identified our button as @+id/button, we can reference the button’s identifier as R.id.button. Now, with the Button instance in hand, we can set the callback and set the label as needed.
As you can see in Figure 5-1, the results look the same as with the original Now demo.
Figure 5-1. The NowRedux sample activity
Every GUI toolkit has some basic widgets: fields, labels, buttons, etc. Android’s toolkit is no different in scope, and the basic widgets will provide a good introduction as to how widgets work in Android activities.
The simplest widget is the label, referred to in Android as a TextView. Like in most GUI toolkits, labels are bits of text not editable directly by users. Typically, they are used to identify adjacent widgets (e.g., a “Name:” label before a field where one fills in a name).
In Java, you can create a label by creating a TextView instance. More commonly, though, you will create labels in XML layout files by adding a TextView element to the layout, with an android:text property to set the value of the label itself. If you need to swap labels based on certain criteria, such as internationalization, you may wish to use a resource reference in the XML instead, as will be described in Chapter 9. TextView has numerous other properties of relevance for labels, such as:
• android:typeface to set the typeface to use for the label (e.g., monospace)
• android:textStyle to indicate that the typeface should be made bold (bold), italic (italic), or bold and italic (bold_italic)
• android:textColor to set the color of the label’s text, in RGB hex format (e.g., #FF0000 for red)
For example, in the Basic/Label project, you will find the following layout file:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="You were expecting something profound?"
/>
As you can see in Figure 6-1, just that layout alone, with the stub Java source provided by Android’s project builder (e.g., activityCreator), gives you the application.
Figure 6-1. The LabelDemo sample application
We’ve already seen the use of the Button widget in Chapters 4 and 5. As it turns out, Button is a subclass of TextView, so everything discussed in the preceding section in terms of formatting the face of the button still holds.
Android has two widgets to help you embed images in your activities: ImageView and ImageButton. As the names suggest, they are image-based analogues to TextView and Button, respectively.
Each widget takes an android:src attribute (in an XML layout) to specify what picture to use. These usually reference a drawable resource, described in greater detail in the chapter on resources. You can also set the image content based on a Uri from a content provider via setImageURI().
ImageButton, a subclass of ImageView, mixes in the standard Button behaviors, for responding to clicks and whatnot.
For example, take a peek at the main.xml layout from the Basic/ImageView sample project which is found along with all other code samples at http://apress.com:
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/icon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:src="@drawable/molecule"
/>
The result, just using the code-generated activity, is shown in Figure 6-2.
Figure 6-2. The ImageViewDemo sample application
Along with buttons and labels, fields are the third “anchor” of most GUI toolkits. In Android, they are implemented via the EditText widget, which is a subclass of the TextView used for labels.
Along with the standard TextView properties (e.g., android:textStyle), EditText has many others that will be useful for you in constructing fields, including:
• android:autoText, to control if the field should provide automatic spelling assistance
• android:capitalize, to control if the field should automatically capitalize the first letter of entered text (e.g., first name, city)
• android:digits, to configure the field to accept only certain digits
• android:singleLine, to control if the field is for single-line input or multiple-line input (e.g., does Enter move you to the next widget or add a newline?)
Beyond those, you can configure fields to use specialized input methods, such as android:numeric for numeric-only input, android:password for shrouded password input, and android:phoneNumber for entering in phone numbers. If you want to create your own input method scheme (e.g., postal codes, Social Security numbers), you need to create your own implementation of the InputMethod interface, then configure the field to use it via android:inputMethod.
For example, from the Basic/Field project, here is an XML layout file showing an EditText:
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/field"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:singleLine="false"
/>
Note that android:singleLine is false, so users will be able to enter in several lines of text.
For this project, the FieldDemo.java file populates the input field with some prose:
package com.commonsware.android.basic;
import android.app.Activity;
import android.os.Bundle;
import android.widget.EditText;
public class FieldDemo extends Activity {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
EditText fld=(EditText)findViewById(R.id.field);
fld.setText("Licensed under the Apache License, Version 2.0 " +
"(the \"License\"); you may not use this file " +
"except in compliance with the License. You may " +
"obtain a copy of the License at " +
"http://www.apache.org/licenses/LICENSE-2.0");
}
}
The result, once built and installed into the emulator, is shown in Figure 6-3.
Figure 6-3. The FieldDemo sample application
Android’s emulator only allows one application in the launcher per unique Java package. Since all the demos in this chapter share the com.commonsware.android.basic package, you will only see one of these demos in your emulator’s launcher at any one time.
Another flavor of field is one that offers auto-completion, to help users supply a value without typing in the whole text. That is provided in Android as the AutoCompleteTextView widget and is discussed in Chapter 8.
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:
• isChecked() to determine if the checkbox has been checked
• setChecked() to force the checkbox into a checked or unchecked state
• toggle() to toggle the checkbox as if the user checked 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 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="This checkbox is: unchecked" />
The corresponding CheckBoxDemo.java retrieves and configures the behavior of the checkbox:
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("This checkbox is: checked");
} else {
cb.setText("This checkbox is: unchecked");
}
}
}
Note that the activity serves as its own listener for checkbox state changes since it implements the OnCheckedChangeListener interface (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 you can see in Figures 6-4 and 6-5.
Figure 6-4. The CheckBoxDemo sample application, with the checkbox unchecked
Figure 6-5. The same application, now with the checkbox checked
As with other implementations of radio buttons in other toolkits, Android’s radio buttons are two-state, like checkboxes, but can be grouped such that only one radio button in the group can be checked at any time.
Like CheckBox, RadioButton inherits from CompoundButton, which in turn inherits from TextView. Hence, all the standard TextView properties for font face, style, color, etc., are available for controlling the look of radio buttons. Similarly, you can call isChecked() on a RadioButton to see if it is selected, toggle() to select it, and so on, like you can with a CheckBox.
Most times, you will want to put your RadioButton widgets inside of a RadioGroup. The RadioGroup indicates a set of radio buttons whose state is tied, meaning only one button out of the group can be selected at any time. If you assign an android:id to your RadioGroup in your XML layout, you can access the group from your Java code and invoke:
• check() to check a specific radio button via its ID (e.g., group.check(R.id.radio1))
• clearCheck() to clear all radio buttons, so none in the group are checked
• getCheckedRadioButtonId() to get the ID of the currently-checked radio button (or -1 if none are checked)
For example, from the Basic/RadioButton sample application, here is an XML layout showing a RadioGroup wrapping a set of RadioButton widgets:
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RadioButton android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rock" />
<RadioButton android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scissors" />
<RadioButton android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Paper" />
</RadioGroup>
Figure 6-6 shows the result using the stock Android-generated Java for the project and this layout.
Figure 6-6. The RadioButtonDemo sample application
Note that the radio button group is initially set to be completely unchecked at the outset. To pre-set one of the radio buttons to be checked, use either setChecked() on the RadioButton or check() on the RadioGroup from within your onCreate() callback in your activity.
All widgets, including the ones previously shown, extend View, and as such give all widgets an array of useful properties and methods beyond those already described.
Some of the properties on View most likely to be used include:
• Controls the focus sequence:
• android:nextFocusDown
• android:nextFocusLeft
• android:nextFocusRight
• android:nextFocusUp
• android:visibility, which controls whether the widget is initially visible
• android:background, which typically provides an RGB color value (e.g., #00FF00 for green) to serve as the background for the widget
You can toggle whether or not a widget is enabled via setEnabled() and see if it is enabled via isEnabled(). One common use pattern for this is to disable some widgets based on a CheckBox or RadioButton selection.
You can give a widget focus via requestFocus() and see if it is focused via isFocused(). You might use this in concert with disabling widgets as previously mentioned, to ensure the proper widget has the focus once your disabling operation is complete.
To help navigate the tree of widgets and containers that make up an activity’s overall view, you can use:
• getParent() to find the parent widget or container
• findViewById() to find a child widget with a certain ID
• getRootView() to get the root of the tree (e.g., what you provided to the activity via setContentView())
Containers pour a collection of widgets (and possibly child containers) into specific layouts you like. If you want a form with labels on the left and fields on the right, you will need a container. If you want OK and Cancel buttons to be beneath the rest of the form, next to one another, and flush to the right side of the screen, you will need a container. From a pure XML perspective, if you have multiple widgets (beyond RadioButton widgets in a RadioGroup), you will need a container just to have a root element to place the widgets inside.
Most GUI toolkits have some notion of layout management, frequently organized into containers. In Java Swing, for example, you have layout managers like BoxLayout and containers that use them (e.g., Box). Some toolkits, such as XUL and Flex, stick strictly to the box model, figuring that any desired layout can be achieved through the right combination of nested boxes.
Android, through LinearLayout, also offers a box model, but in addition it supports a range of containers providing different layout rules. In this chapter we will look at three commonly used containers: LinearLayout (the box model), RelativeLayout (a rule-based model), and TableLayout (the grid model), along with ScrollView, a container designed to assist with implementing scrolling containers. In the next chapter we will examine some more-esoteric containers.
As noted already, LinearLayout is a box model — widgets or child containers are lined up in a column or row, one after the next. This works similarly to FlowLayout in Java Swing, vbox and hbox in Flex and XUL, etc.
Flex and XUL use the box as their primary unit of layout. If you want, you can use LinearLayout in much the same way, eschewing some of the other containers. Getting the visual representation you want is mostly a matter of identifying where boxes should nest and what properties those boxes should have, such as alignment vis-à-vis other boxes.
To configure a LinearLayout, you have five main areas of control besides the container’s contents: the orientation, the fill model, the weight, the gravity, and the padding.
Orientation indicates whether the LinearLayout represents a row or a column. Just add the android:orientation property to your LinearLayout element in your XML layout, setting the value to be horizontal for a row or vertical for a column.
The orientation can be modified at runtime by invoking setOrientation() on the LinearLayout, supplying it with either HORIZONTAL or VERTICAL.
Let’s imagine a row of widgets, such as a pair of radio buttons. These widgets have a “natural” size based on their text. Their combined sizes probably do not exactly match the width of the Android device’s screen — particularly since screens come in various sizes. We then have the issue of what to do with the remaining space.
All widgets inside a LinearLayout must supply android:layout_width and android:layout_height properties to help address this issue. These properties’ values have three flavors:
• You can provide a specific dimension, such as 125px, to indicate the widget should take up exactly 125 pixels.
• You can provide wrap_content, which means the widget should fill up its natural space unless that is too big, in which case Android can use word wrap as needed to make it fit.
• You can provide fill_parent, which means the widget should fill up all available space in its enclosing container after all other widgets are taken care of.
The latter two flavors are the most common, as they are independent of screen size, allowing Android to adjust your view to fit the available space.
What happens if we have two widgets that should split the available free space? For example, suppose we have two multi-line fields in a column, and we want them to take up the remaining space in the column after all other widgets have been allocated their space.
To make this work, in addition to setting android:layout_width (for rows) or android:layout_height (for columns) to fill_parent, you must also set android:layout_weight. This property indicates what proportion of the free space should go to that widget. If you set android:layout_weight to be the same value for a pair of widgets (e.g., 1), the free space will be split evenly between them. If you set it to be 1 for one widget and 2 for another widget, the second widget will use up twice the free space that the first widget does, and so on.
By default, everything is left-and top-aligned. So if you create a row of widgets via a horizontal LinearLayout, the row will start flush on the left side of the screen.
If that is not what you want, you need to specify a gravity. Using android:layout_gravity on a widget (or calling setGravity() at runtime on the widget’s Java object), you can tell the widget and its container how to align it vis-à-vis the screen.
For a column of widgets, common gravity values are left, center_horizontal, and right for left-aligned, centered, and right-aligned widgets, respectively.
For a row of widgets, the default is for them to be aligned so their text is aligned on the baseline (the invisible line that letters seem to “sit on”), though you may wish to specify a gravity of center_vertical to center the widgets along the row’s vertical midpoint.
By default, widgets are tightly packed next to each other. If you want to increase the whitespace between widgets, you will want to use the android:padding property (or call setPadding() at runtime on the widget’s Java object).
The padding specifies how much space there is between the boundaries of the widget’s “cell” and the actual widget contents. Padding is analogous to the margins on a word-processing document — the page size might be 8.5”×11”, but 1” margins would leave the actual text to reside within a 6.5”×9” area.
The android:padding property allows you to set the same padding on all four sides of the widget, with the widget’s contents centered within that padded-out area. If you want the padding to differ on different sides, use android:paddingLeft, android:paddingRight, android:paddingTop, and android:paddingBottom (see Figure 7-1).
Figure 7-1. The relationship between a widget, its cell, and the padding values
The value of the padding is a dimension, such as 5px for 5 pixels’ worth of padding.
Let’s look at an example (Containers/Linear) that shows LinearLayout properties set both in the XML layout file and at runtime.
<?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">
<RadioGroup android:id="@+id/orientation"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/horizontal"
android:text="horizontal" />
<RadioButton
android:id="@+id/vertical"
android:text="vertical" />
</RadioGroup>
<RadioGroup android:id="@+id/gravity"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/left"
android:text="left" />
<RadioButton
android:id="@+id/center"
android:text="center />
<RadioButton
android:id="@+id/right"
android:text="right" />
</RadioGroup>
</LinearLayout>
Note that we have a LinearLayout wrapping two RadioGroup sets. RadioGroup is a subclass of LinearLayout, so our example demonstrates nested boxes as if they were all LinearLayout containers.
The top RadioGroup sets up a row (android:orientation="horizontal") of RadioButton widgets. The RadioGroup has 5px of padding on all sides, separating it from the other RadioGroup. The width and height are both set to wrap_content, so the radio buttons will take up only the space that they need.
The bottom RadioGroup is a column (android:orientation="vertical") of three RadioButton widgets. Again, we have 5px of padding on all sides and a “natural” height (android:layout_height="wrap_content"). However, we have set android:layout_width to be fill_parent, meaning the column of radio buttons “claims” the entire width of the screen.
To adjust these settings at runtime based on user input, we need some Java code:
package com.commonsware.android.containers;
import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.text.TextWatcher;
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.EditText;
public class LinearLayoutDemo extends Activity
implements RadioGroup.OnCheckedChangeListener {
RadioGroup orientation;
RadioGroup gravity;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
orientation=(RadioGroup)findViewById(R.id.orientation);
orientation.setOnCheckedChangeListener(this);
gravity=(RadioGroup)findViewById(R.id.gravity);
gravity.setOnCheckedChangeListener(this);
}
public void onCheckedChanged(RadioGroup group, int checkedId) {
if (group==orientation) {
if (checkedId==R.id.horizontal) {
orientation.setOrientation(LinearLayout.HORIZONTAL);
} else {
orientation.setOrientation(LinearLayout.VERTICAL);
}
} else if (group==gravity) {
if (checkedId==R.id.left) {
gravity.setGravity(Gravity.LEFT);
} else if (checkedId==R.id.center) {
gravity.setGravity(Gravity.CENTER_HORIZONTAL);
} else if (checkedId==R.id.right) {
gravity.setGravity(Gravity.RIGHT);
}
}
}
}
In onCreate(), we look up our two RadioGroup containers and register a listener on each, so we are notified when the radio buttons change state (setOnCheckedChangeListener(this)). Since the activity implements OnCheckedChangeListener, the activity itself is the listener.
In onCheckedChanged() (the callback for the listener), we see which RadioGroup had a state change. If it was the orientation group, we adjust the orientation based on the user’s selection. If it was the gravity group, we adjust the gravity based on the user’s selection.
Figure 7-2 shows the result when the sample application is first launched inside the emulator.
Figure 7-2. The LinearLayoutDemo sample application, as initially launched
If we toggle on the Vertical radio button, the top RadioGroup adjusts to match (see Figure 7-3).
Figure 7-3. The same application, with the Vertical radio button selected
If we toggle the Center or Right radio button, the bottom RadioGroup adjusts to match (see Figures 7-4 and 7-5).
Figure 7-4. The same application, with the Vertical and Center radio buttons selected
Figure 7-5. The same application, with the Vertical and Right radio buttons selected
RelativeLayout, as the name suggests, lays out widgets based upon their relationship to other widgets in the container and in the parent container. You can place Widget X below and to the left of Widget Y, or have Widget Z’s bottom edge align with the bottom of the container, and so on.
This is reminiscent of James Elliott’s RelativeLayout[13] for use with Java Swing.
To make all this work, we need ways to reference other widgets within an XML layout file, plus ways to indicate the relative positions of those widgets.
The easiest relations to set up tie a widget’s position to that of its container:
• android:layout_alignParentTop says the widget’s top should align with the top of the container.
• android:layout_alignParentBottom says the widget’s bottom should align with the bottom of the container.
• android:layout_alignParentLeft says the widget’s left side should align with the left side of the container.
• android:layout_alignParentRight says the widget’s right side should align with the right side of the container.
• android:layout_centerHorizontal says the widget should be positioned horizontally at the center of the container.
• android:layout_centerVertical says the widget should be positioned vertically at the center of the container.
• android:layout_centerInParent says the widget should be positioned both horizontally and vertically at the center of the container.
All of these properties take a simple Boolean value (true or false).
Note that the padding of the widget is taken into account when performing these various alignments. The alignments are based on the widget’s overall cell (a combination of its natural space plus the padding).
The remaining properties of relevance to RelativeLayout take as a value the identity of a widget in the container. To identify and reference widgets this way, follow these steps:
1. Put identifiers (android:id attributes) on all elements that you will need to address, of the form @+id/....
2. Reference other widgets using the same identifier value without the plus sign (@id/...).
For example, if Widget A is identified as @+id/widget_a, Widget B can refer to Widget A in one of its own properties via the identifier @id/widget_a.
There are four properties that control position of a widget in relation to other widgets:
• android:layout_above indicates that the widget should be placed above the widget referenced in the property.
• android:layout_below indicates that the widget should be placed below the widget referenced in the property.
• android:layout_toLeftOf indicates that the widget should be placed to the left of the widget referenced in the property.
• android:layout_toRightOf indicates that the widget should be placed to the right of the widget referenced in the property.
There are five additional properties that can control one widget’s alignment relative to another:
• android:layout_alignTop indicates that the widget’s top should be aligned with the top of the widget referenced in the property.
• android:layout_alignBottom indicates that the widget’s bottom should be aligned with the bottom of the widget referenced in the property.
• android:layout_alignLeft indicates that the widget’s left side should be aligned with the left side of the widget referenced in the property.
• android:layout_alignRight indicates that the widget’s right side should be aligned with the right side of the widget referenced in the property.
• android:layout_alignBaseline indicates that the baselines of the two widgets should be aligned.
The last property in the list is useful for aligning labels and fields so that the text appears “natural.” Since fields have a box around them and labels do not, android:layout_alignTop will align the top of the field’s box with the top of the label, which will cause the text of the label to be higher on-screen than the text entered into the field.
So, if we want Widget B to be positioned to the right of Widget A, in the XML element for Widget B we need to include android:layout_toRight="@id/widget_a" (assuming @id/widget_a is the identity of Widget A).
What makes this even more complicated is the order of evaluation. Android makes a single pass through your XML layout and computes the size and position of each widget in sequence. This has a couple of ramifications:
• You cannot reference a widget that has not yet been defined in the file.
• You must be careful that any uses of fill_parent in android:layout_width or android:layout_height do not “eat up” all the space before subsequent widgets have been defined.
With all that in mind, let’s examine a typical “form” with a field, a label, plus a pair of buttons labeled “OK” and “Cancel.”
Here is the XML layout, pulled from the Containers/Relative sample project:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px">
<TextView android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="URL:"
android:paddingTop="15px"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/label"
android:layout_alignBaseline="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignRight="@id/entry"
android:text="OK" />
<Button
android:id="@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
First we open up the RelativeLayout. In this case, we want to use the full width of the screen (android:layout_width="fill_parent"), use only as much height as we need (android:layout_height="wrap_content"), and have a 5-pixel pad between the boundaries of the container and its contents (android:padding="5px").
Next we define the label, which is fairly basic, except for its own 15-pixel padding (android:padding="15px"). More on that in a moment.
After that we add in the field. We want the field to be to the right of the label, have both the field and label text aligned along the baseline, and for the field to take up the rest of this “row” in the layout. Those components are handled by three properties:
• android:layout_toRight="@id/label"
• android:layout_alignBaseline="@id/label"
• android:layout_width="fill_parent"
If we were to skip the 15-pixel padding on the label, we would find that the top of the field is clipped off. That’s because of the 5-pixel padding on the container itself. The android:layout_alignBaseline="@id/label" property simply aligns the baselines of the label and field. The label, by default, has its top aligned with the top of the parent. But the label is shorter than the field because of the field’s box. Since the field is dependent on the label’s position and the label’s position is already defined (because it appeared first in the XML), the field winds up being too high and has the top of its box clipped off by the container’s padding.
You may find yourself running into these sorts of problems as you try to get your RelativeLayout to behave the way you want it to.
The solution to this conundrum, used in the XML layout shown earlier in this section, is to give the label 15 pixels’ worth of padding on the top. This pushes the label down far enough that the field will not get clipped.
Here are some points of note:
• You cannot use android:layout_alignParentTop on the field, because you cannot have two properties that both attempt to set the vertical position of the field. In this case, android:layout_alignParentTop conflicts with the later android:layout_alignBaseline="@id/label" property, and the last one in wins. So, you either have the top aligned properly or the baselines aligned properly, but not both.
• You cannot define the field first, then put the label to the left of the field, because you cannot “forward-reference” labeled widgets — you must define the widget before you can reference it by its ID.
Going back to the example, the OK button is set to be below the field (android:layout_below="@id/entry") and have its right side align with the right side of the field (android:layout_alignRight="@id/entry"). The Cancel button is set to be to the left of the OK button (android:layout_toLeft="@id/ok") and have its top aligned with the OK button (android:layout_alignTop="@id/ok").
With no changes to the auto-generated Java code, the emulator gives us the result shown in Figure 7-6.
Figure 7-6. The RelativeLayoutDemo sample application
If you like HTML tables, spreadsheet grids, and the like, you will like Android’s TableLayout — it allows you to position your widgets in a grid to your specifications. You control the number of rows and columns, which columns might shrink or stretch to accommodate their contents, and so on.
TableLayout works in conjunction with TableRow. TableLayout controls the overall behavior of the container, with the widgets themselves poured into one or more TableRow containers, one per row in the grid.
For all this to work, we need to know how widgets work with rows and columns, plus how to handle widgets that live outside of rows.
Rows are declared by you, the developer, by putting widgets as children of a TableRow inside the overall TableLayout. You, therefore, control directly how many rows appear in the table.
The number of columns is determined by Android; you control the number of columns in an indirect fashion.
There will be at least one column per widget in your longest row. So if you have three rows — one with two widgets, one with three widgets, and one with four widgets — there will be at least four columns.
However, a widget can take up more than one column if you include the android:layout_span property, indicating the number of columns the widget spans. This is akin to the colspan attribute one finds in table cells in HTML:
<TableRow>
<TextView android:text="URL:" />
<EditText
android:id="@+id/entry"
android:layout_span="3"/>
</TableRow>
In this XML layout fragment, the field spans three columns.
Ordinarily, widgets are put into the first available column. In the preceding fragment, the label would go in the first column (column 0, as columns are counted starting from 0), and the field would go into a spanned set of three columns (columns 1 through 3). However, you can put a widget into a different column via the android:layout_column property, specifying the 0-based column the widget belongs to:
<TableRow>
<Button
android:id="@+id/cancel"
android:layout_column="2"
android:text="Cancel" />
<Button android:id="@+id/ok" android:text="OK" />
</TableRow>
In this XML layout fragment, the Cancel button goes in the third column (column 2). The OK button then goes into the next available column, which is the fourth column.
Normally, TableLayout contains only TableRow elements as immediate children. However, it is possible to put other widgets in between rows. For those widgets, TableLayout behaves a bit like LinearLayout with vertical orientation. The widgets automatically have their width set to fill_parent, so they will fill the same space that the longest row does.
One pattern for this is to use a plain View as a divider (e.g., <View android:layout_height="2px" android:background="#0000FF" /> as a two-pixel-high blue bar across the width of the table).
By default, each column will be sized according to the “natural” size of the widest widget in that column (taking spanned columns into account). Sometimes, though, that does not work out very well, and you need more control over column behavior.
You can place an android:stretchColumns property on the TableLayout. The value should be a single column number (again, 0-based) or a comma-delimited list of column numbers. Those columns will be stretched to take up any available space on the row. This helps if your content is narrower than the available space.
Conversely, you can place an android:shrinkColumns property on the TableLayout. Again, this should be a single column number or a comma-delimited list of column numbers. The columns listed in this property will try to word-wrap their contents to reduce the effective width of the column; by default, widgets are not word-wrapped. This helps if you have columns with potentially wordy content that might cause some columns to be pushed off the right side of the screen.
You can also leverage an android:collapseColumns property on the TableLayout, again with a column number or a comma-delimited list of column numbers. These columns will start out “collapsed,” meaning they will be part of the table information but will be invisible. Programmatically, you can collapse and un-collapse columns by calling setColumnCollapsed() on the TableLayout. You might use this to allow users to control which columns are of importance to them and should be shown, versus which ones are less important and can be hidden.
You can also control stretching and shrinking at runtime via setColumnStretchable() and setColumnShrinkable().
The XML layout fragments shown previously, when combined, give us a TableLayout rendition of the “form” we created for RelativeLayout, with the addition of a divider line between the label/field and the two buttons (found in the Containers/Table demo in the Source Code area of http://apress.com):
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="URL:" />
<EditText android:id="@+id/entry"
android:layout_span="3"/>
</TableRow>
<View
android:layout_height="2px"
android:background="#0000FF" />
<TableRow>
<Button android:id="@+id/cancel"
android:layout_column="2"
android:text="Cancel" />
<Button android:id="@+id/ok"
android:text="OK" />
</TableRow>
</TableLayout>
When compiled against the generated Java code and run on the emulator, we get the result shown in Figure 7-7.
Figure 7-7. The TableLayoutDemo sample application
Phone screens tend to be small, which requires developers to use some tricks to present a lot of information in the limited available space. One trick for doing this is to use scrolling, so only part of the information is visible at one time, and the rest is available via scrolling up or down.
ScrollView is a container that provides scrolling for its contents. You can take a layout that might be too big for some screens, wrap it in a ScrollView, and still use your existing layout logic. It just so happens that the user can see only part of your layout at one time; the rest is available via scrolling.
For example, here is a ScrollView used in an XML layout file (from the Containers/Scroll demo in the Source Code area of http://apress.com):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0">
<TableRow>
<View
android:layout_height="80px"
android:background="#000000"/>
<TextView android:text="#000000"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#440000" />
<TextView android:text="#440000"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#884400" />
<TextView android:text="#884400"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#aa8844" />
<TextView android:text="#aa8844"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffaa88" />
<TextView android:text="#ffaa88"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffffaa" />
<TextView android:text="#ffffaa"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffffff" />
<TextView android:text="#ffffff"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
</TableLayout>
</ScrollView>
Without the ScrollView, the table would take up at least 560 pixels (7 rows at 80 pixels each, based on the View declarations). There may be some devices with screens capable of showing that much information, but many will be smaller. The ScrollView lets us keep the table as is, but present only part of it at a time.
On the stock Android emulator, when the activity is first viewed, you see what’s shown in Figure 7-8.
Figure 7-8. The ScrollViewDemo sample application
Notice how only five rows and part of the sixth are visible. By pressing the up/down buttons on the directional pad, you can scroll up and down to see the remaining rows. Also note how the right side of the content gets clipped by the scrollbar — be sure to put some padding on that side or otherwise ensure your own content does not get clipped in that fashion.
In Chapter 6, you saw how fields could have constraints placed upon them to limit possible input, such as numeric-only or phone-number-only. These sorts of constraints help users “get it right” when entering information, particularly on a mobile device with cramped keyboards.
Of course, the ultimate in constrained input is to select a choice from a set of items, such as the radio buttons seen earlier. Classic UI toolkits have listboxes, comboboxes, drop-down lists, and the like for that very purpose. Android has many of the same sorts of widgets, plus others of particular interest for mobile devices (e.g., the Gallery for examining saved photos).
Moreover, Android offers a flexible framework for determining what choices are available in these widgets. Specifically, Android offers a framework of data adapters that provide a common interface to selection lists ranging from static arrays to database contents. Selection views — widgets for presenting lists of choices — are handed an adapter to supply the actual choices.
In the abstract, adapters provide a common interface to multiple disparate APIs. More specifically, in Android’s case, adapters provide a common interface to the data model behind a selection-style widget, such as a listbox. This use of Java interfaces is fairly common (e.g., Java/Swing’s model adapters for JTable), and Java is far from the only environment offering this sort of abstraction (e.g., Flex’s XML data-binding framework accepts XML inlined as static data or retrieved from the Internet).
Android’s adapters are responsible for providing the roster of data for a selection widget plus converting individual elements of data into specific views to be displayed inside the selection widget. The latter facet of the adapter system may sound a little odd, but in reality it is not that different from other GUI toolkits’ ways of overriding default display behavior. For example, in Java/Swing, if you want a JList-backed listbox to actually be a checklist (where individual rows are a checkbox plus label, and clicks adjust the state of the checkbox), you inevitably wind up calling setCellRenderer() to supply your own ListCellRenderer, which in turn converts strings for the list into JCheckBox-plus-JLabel composite widgets.
The easiest adapter to use is ArrayAdapter — all you need to do is wrap one of these around a Java array or java.util.List instance, and you have a fully-functioning adapter:
String[] items={this, is, a,
really, silly, list};
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, items);
The ArrayAdapter constructor takes three parameters:
• The Context to use (typically this will be your activity instance)
• The resource ID of a view to use (such as a built-in system resource ID, as previously shown)
• The actual array or list of items to show
By default, the ArrayAdapter will invoke toString() on the objects in the list and wrap each of those strings in the view designated by the supplied resource. android.R.layout.simple_list_item_1 simply turns those strings into TextView objects. Those TextView widgets, in turn, will be shown the list or spinner or whatever widget uses this ArrayAdapter.
You can subclass ArrayAdapter and override getView() to “roll your own” views:
public View getView(int position, View convertView,
ViewGroup parent) {
if (convertView==null) {
convertView = new TextView(this);
}
convertView.setText(buildStringFor(position));
return(convertView);
}
Here, getView() receives three parameters:
• The index of the item in the array to show in the view
• An existing view to update with the data for this position (if one already existed, such as from scrolling — if null, you need to instantiate your own)
• The widget that will contain this view, if needed for instantiating the view
In the previous example, the adapter still returns a TextView, but uses a different behavior for determining the string that goes in the view. Chapter 9 will cover fancier ListViews.
Here are some other adapters in Android that you will likely use:
• CursorAdapter converts a Cursor, typically from a content provider, into something that can be displayed in a selection view
• SimpleAdapter converts data found in XML resources
• ActivityAdapter and ActivityIconAdapter provide you with the names or icons of activities that can be invoked upon a particular intent
The classic listbox widget in Android is known as ListView. Include one of these in your layout, invoke setAdapter() to supply your data and child views, and attach a listener via setOnItemSelectedListener() to find out when the selection has changed. With that, you have a fully-functioning listbox.
However, if your activity is dominated by a single list, you might well consider creating your activity as a subclass of ListActivity, rather than the regular Activity base class. If your main view is just the list, you do not even need to supply a layout — ListActivity will construct a full-screen list for you. If you do want to customize the layout, you can, so long as you identify your ListView as @android:id/list, so ListActivity knows which widget is the main list for the activity.
For example, here is a layout pulled from the Selection/List sample project. This sample along with all others in this chapter can be found in the Source Code area of http://apress.com.
<?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">
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
/>
</LinearLayout>
It is just a list with a label on top to show the current selection.
The Java code to configure the list and connect the list with the label is:
public class ListViewDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue", "purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
items));
selection=(TextView)findViewById(R.id.selection);
}
public void onListItemClick(ListView parent, View v, int position,
long id) {
selection.setText(items[position]);
}
}
With ListActivity, you can set the list adapter via setListAdapter() — in this case, providing an ArrayAdapter wrapping an array of nonsense strings. To find out when the list selection changes, override onListItemClick() and take appropriate steps based on the supplied child view and position (in this case, updating the label with the text for that position).
The results are shown in Figure 8-1.
Figure 8-1. The ListViewDemo sample application
In Android, the Spinner is the equivalent of the drop-down selector you might find in other toolkits (e.g., JComboBox in Java/Swing). Pressing the center button on the D-pad pops up a selection dialog for the user to choose an item from. You basically get the ability to select from a list without taking up all the screen space of a ListView, at the cost of an extra click or screen tap to make a change.
As with ListView, you provide the adapter for data and child views via setAdapter() and hook in a listener object for selections via setOnItemSelectedListener().
If you want to tailor the view used when displaying the drop-down perspective, you need to configure the adapter, not the Spinner widget. Use the setDropDownViewResource() method to supply the resource ID of the view to use.
For example, culled from the Selection/Spinner sample project, here is an XML layout for a simple view with a Spinner:
<?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">
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Spinner android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
/>
</LinearLayout>
This is the same view as shown in the previous section, just with a Spinner instead of a ListView. The Spinner property android:drawSelectorOnTop controls whether the arrows are drawn on the selector button on the right side of the Spinner UI.
To populate and use the Spinner, we need some Java code:
public class SpinnerDemo extends Activity
implements AdapterView.OnItemSelectedListener {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue", "purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
selection = (TextView)findViewById(R.id.selection);
Spinner spin = (Spinner)findViewById(R.id.spinner);
spin.setOnItemSelectedListener(this);
ArrayAdapter<String> aa = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, items);
aa.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
spin.setAdapter(aa);
}
public void onItemSelected(AdapterView<?> parent,
View v, int position, long id) {
selection.setText(items[position]);
}
public void onNothingSelected(AdapterView<?> parent) {
selection.setText("");
}
}
Here, we attach the activity itself as the selection listener (spin.setOnItemSelectedListener(this)). This works because the activity implements the OnItemSelectedListener interface. We configure the adapter not only with the list of fake words, but also with a specific resource to use for the drop-down view (via aa.setDropDownViewResource()). Also note the use of android.R.layout.simple_spinner_item as the built-in View for showing items in the spinner itself. Finally, we implement the callbacks required by OnItemSelectedListener to adjust the selection label based on user input.
The resulting application is shown in Figures 8-2 and 8-3.
Figure 8-2. The SpinnerDemo sample application, as initially launched
Figure 8-3. The same application, with the spinner drop-down list displayed
As the name suggests, GridView gives you a two-dimensional grid of items to choose from. You have moderate control over the number and size of the columns; the number of rows is dynamically determined based on the number of items the supplied adapter says are available for viewing.
There are a few properties which, when combined, determine the number of columns and their sizes:
• android:numColumns spells out how many columns there are, or, if you supply a value of auto_fit, Android will compute the number of columns based on available space and the following properties.
• android:verticalSpacing and its counterpart android:horizontalSpacing indicate how much whitespace there should be between items in the grid.
• android:columnWidth indicates how many pixels wide each column should be.
• android:stretchMode indicates, for grids with auto_fit for android:numColumns, what should happen for any available space not taken up by columns or spacing — this should be columnWidth to have the columns take up available space or spacingWidth to have the whitespace between columns absorb extra space. For example, suppose the screen is 320 pixels wide, and we have android:columnWidth set to 100px and android:horizontalSpacing set to 5px. Three columns would use 310 pixels (three columns of 100 pixels and two whitespaces of 5 pixels). With android:stretchMode set to columnWidth, the three columns will each expand by 3–4 pixels to use up the remaining 10 pixels. With android:stretchMode set to spacingWidth, the two whitespaces will each grow by 5 pixels to consume the remaining 10 pixels.
Otherwise, the GridView works much like any other selection widget — use setAdapter() to provide the data and child views, invoke setOnItemSelectedListener() to register a selection listener, etc.
For example, here is a XML layout from the Selection/Grid sample project, showing a GridView configuration:
<?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">
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<GridView
android:id="@+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:verticalSpacing="35px"
android:horizontalSpacing="5px"
android:numColumns="auto_fit"
android:columnWidth="100px"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</LinearLayout>
For this grid, we take up the entire screen except for what our selection label requires. The number of columns is computed by Android (android:numColumns="auto_fit") based on 5-pixel horizontal spacing (android:horizontalSpacing="5px"), 100-pixel columns (android:columnWidth="100px"), with the columns absorbing any “slop” width left over (android:stretchMode="columnWidth").
The Java code to configure the GridView is:
public class GridDemo extends Activity
implements AdapterView.OnItemSelectedListener {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue", "purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
selection = (TextView)findViewById(R.id.selection);
GridView g=(GridView)findViewById(R.id.grid);
g.setAdapter(new FunnyLookingAdapter(this,
android.R.layout.simple_list_item_1, items));
g.setOnItemSelectedListener(this);
}
public void onItemSelected(AdapterView<?> parent, View v,
int position, long id) {
selection.setText(items[position]);
}
public void onNothingSelected(AdapterView<?> parent) {
selection.setText("");
}
private class FunnyLookingAdapter extends ArrayAdapter {
Context ctxt;
FunnyLookingAdapter(Context ctxt, int resource,
String[] items) {
super(ctxt, resource, items);
this.ctxt = ctxt;
}
public View getView(int position, View convertView,
ViewGroup parent) {
TextView label = (TextView)convertView;
if (convertView==null) {
convertView = new TextView(ctxt);
label = (TextView)convertView;
}
label.setText(items[position]);
return(convertView);
}
}
}
For the grid cells, rather than using auto-generated TextView widgets as in the previous sections, we create our own views, by subclassing ArrayAdapter and overriding getView(). In this case, we wrap the funny-looking strings in our own TextView widgets, just to be different. If getView() receives a TextView, we just reset its text; otherwise, we create a new TextView instance and populate it.
With the 35-pixel vertical spacing from the XML layout (android:verticalSpacing="35"), the grid overflows the boundaries of the emulator’s screen as shown in Figures 8-4 and 8-5.
Figure 8-4. The GridDemo sample application, as initially launched
Figure 8-5. The same application, scrolled to the bottom of the grid
The AutoCompleteTextView is sort of a hybrid between the EditText (field) and the Spinner. With auto-completion, as the user types, the text is treated as a prefix filter, comparing the entered text as a prefix against a list of candidates. Matches are shown in a selection list that, like with Spinner, folds down from the field. The user can either type out an entry (e.g., something not in the list) or choose an entry from the list to be the value of the field.
AutoCompleteTextView subclasses EditText, so you can configure all the standard look-and-feel aspects, such as font face and color.
In addition, AutoCompleteTextView has a android:completionThreshold property, to indicate the minimum number of characters a user must enter before the list filtering begins.
You can give AutoCompleteTextView an adapter containing the list of candidate values via setAdapter(). However, since the user could type something not in the list, AutoCompleteTextView does not support selection listeners. Instead, you can register a TextWatcher, like you can with any EditText, to be notified when the text changes. These events will occur either because of manual typing or from a selection from the drop-down list.
The following is a familiar-looking XML layout, this time containing an AutoCompleteTextView (pulled from the Selection/AutoComplete sample application):
<?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">
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<AutoCompleteTextView android:id="@+id/edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:completionThreshold="3"/>
</LinearLayout>
The corresponding Java code is:
public class AutoCompleteDemo extends Activity
implements TextWatcher {
TextView selection;
AutoCompleteTextView edit;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue", "purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
selection = (TextView)findViewById(R.id.selection);
edit = (AutoCompleteTextView)findViewById(R.id.edit);
edit.addTextChangedListener(this);
edit.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, items));
}
public void onTextChanged(CharSequence s, int start, int before,
int count) {
selection.setText(edit.getText());
}
public void beforeTextChanged(CharSequence s, int start,
int count, int after) {
// needed for interface, but not used
}
public void afterTextChanged(Editable s) {
// needed for interface, but not used
}
}
This time, our activity implements TextWatcher, which means our callbacks are onTextChanged() and beforeTextChanged(). In this case, we are only interested in the former, and we update the selection label to match the AutoCompleteTextView’s current contents.
Figures 8-6, 8-7, and 8-8 show the application results.
Figure 8-6. The AutoCompleteDemo sample application, as initially launched
Figure 8-7. The same application, after a few matching letters were entered, showing the auto-complete drop-down
Figure 8-8. The same application, after the auto-complete value was selected
The Gallery widget is not one ordinarily found in GUI toolkits. It is, in effect, a horizontally-laid-out listbox. One choice follows the next across the horizontal plane, with the currently-selected item highlighted. On an Android device, one rotates through the options through the left and right D-pad buttons.
Compared to the ListView, the Gallery takes up less screen space while still showing multiple choices at one time (assuming they are short enough). Compared to the Spinner, the Gallery always shows more than one choice at a time.
The quintessential example use for the Gallery is image preview — given a collection of photos or icons, the Gallery lets people preview the pictures in the process of choosing one.
Code-wise, the Gallery works much like a Spinner or GridView. In your XML layout, you have a few properties at your disposal:
• android:spacing controls the number of pixels between entries in the list.
• android:spinnerSelector controls what is used to indicate a selection — this can either be a reference to a Drawable (see the resources chapter) or an RGB value in #AARRGGBB or similar notation.
• android:drawSelectorOnTop indicates if the selection bar (or Drawable) should be drawn before (false) or after (true) drawing the selected child — if you choose true, be sure that your selector has sufficient transparency to show the child through the selector, otherwise users will not be able to read the selection.
The humble ListView is one of the most important widgets in all of Android, simply because it is used so frequently. Whether choosing a contact to call or an email message to forward or an ebook to read, ListView widgets are employed in a wide range of activities. Of course, it would be nice if they were more than just plain text.
The good news is that they can be as fancy as you want, within the limitations of a mobile device’s screen, of course. However, making them fancy takes some work and some features of Android that I will cover in this chapter.
The classic Android ListView is a plain list of text — solid but uninspiring. This is because all we hand to the ListView is a bunch of words in an array, and we tell Android to use a simple built-in layout for pouring those words into a list.
However, you can have a list whose rows are made up of icons, or icons and text, or checkboxes and text, or whatever you want. It is merely a matter of supplying enough data to the adapter and helping the adapter to create a richer set of View objects for each row.
For example, suppose you want a ListView whose entries are made up of an icon, followed by some text. You could construct a layout for the row that looks like this, found in the FancyLists/Static sample project available in the Source Code section of the Apress Web site:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/icon"
android:layout_width="22px"
android:paddingLeft="2px"
android:paddingRight="2px"
android:paddingTop="2px"
android:layout_height="wrap_content"
android:src="@drawable/ok"
/>
<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="44sp"
/>
</LinearLayout>
This layout uses a LinearLayout to set up a row, with the icon on the left and the text (in a nice big font) on the right.
By default, though, Android has no idea that you want to use this layout with your ListView. To make the connection, you need to supply your Adapter with the resource ID of the custom layout shown in the preceding code:
public class StaticDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue",
"purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new ArrayAdapterString(this,
R.layout.row, R.id.label, items));
selection = (TextView)findViewById(R.id.selection);
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(items[position]);
}
}
This follows the general structure for the previous ListView sample.
The key in this example is that you have told ArrayAdapter that you want to use your custom layout (R.layout.row) and that the TextView where the word should go is known as R.id.label within that custom layout. Remember: to reference a layout (row.xml), use R.layout as a prefix on the base name of the layout XML file (R.layout.row).
The result is a ListView with icons down the left side. In particular, all the icons are the same, as Figure 9-1 shows.
Figure 9-1. The StaticDemo application
This technique — supplying an alternate layout to use for rows — handles simple cases very nicely. However, it isn’t sufficient when you have more-complicated scenarios for your rows, such as the following:
• Not every row uses the same layout (e.g., some have one line of text, others have two).
• You need to configure the widgets in the rows (e.g., different icons for different cases).
In those cases, the better option is to create your own subclass of your desired Adapter, override getView(), and construct your rows yourself. The getView() method is responsible for returning a View, representing the row for the supplied position in the adapter data.
For example, let’s rework the preceding code to use getView() so we can have different icons for different rows — in this case, one icon for short words and one for long words (from the FancyLists/Dynamic sample project at http://apress.com/):
public class DynamicDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue",
"purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new IconicAdapter(this));
selection = (TextView)findViewById(R.id.selection);
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(items[position]);
}
class IconicAdapter extends ArrayAdapter {
Activity context;
IconicAdapter(Activity context) {
super(context, R.layout.row, items);
this.context = context;
}
public View getView(int position, View convertView,
ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View row = inflater.inflate(R.layout.row, null);
TextView label = (TextView)row.findViewById(R.id.label);
label.setText(items[position]);
if (items[position].length() > 4) {
ImageView icon = (ImageView)row.findViewById(R.id.icon);
icon.setImageResource(R.drawable.delete);
}
return(row);
}
}
}
The theory is that we override getView() and return rows based on which object is being displayed, where the object is indicated by a position index into the Adapter. However, if you look at the implementation shown in the code here, you will see a reference to a LayoutInflater class — and that concept takes a little bit of an explanation.
In this case, “inflation” means the act of converting an XML layout specification into the actual tree of View objects the XML represents. This is undoubtedly a tedious bit of code: take an element, create an instance of the specified View class, walk the attributes, convert those into property setter calls, iterate over all child elements, lather, rinse, repeat.
The good news is that the fine folk on the Android team wrapped all that up into a class called LayoutInflater that we can use ourselves. When it comes to fancy lists, for example, we will want to inflate Views for each row shown in the list, so we can use the convenient shorthand of the XML layout to describe what the rows are supposed to look like.
In the preceding example, we inflate the R.layout.row layout we created in the previous section. This gives us a View object that, in reality, is our LinearLayout with an ImageView and a TextView, just as R.layout.row specifies. However, rather than having to create all those objects ourselves and wire them together, the XML and LayoutInflater handle the “heavy lifting” for us.
So we have used LayoutInflater to get a View representing the row. This row is “empty” since the static layout file has no idea what actual data goes into the row. It is our job to customize and populate the row as we see fit before returning it. So, we do the following:
• Put the text label into our label widget, using the word at the supplied position.
• See if the word is longer than four characters and, if so, find our ImageView icon widget and replace the stock resource with a different one.
Now we have a ListView with different icons based upon context of that specific entry in the list (see Figure 9-2).
Figure 9-2. The DynamicDemo application
This was a fairly contrived example, but you can see where this technique could be used to customize rows based on any sort of criteria, such as other columns in a returned Cursor.
The getView() implementation shown previously works, but it is inefficient. Every time the user scrolls, we have to create a bunch of new View objects to accommodate the newly shown rows. And since the Android framework does not cache existing View objects itself, we wind up making new row View objects even for rows we just created a second or two ago. This is bad.
It might be bad for the immediate user experience, if the list appears to be sluggish. More likely, though, it will be bad due to battery usage — every bit of CPU that is used eats up the battery. This is compounded by the extra work the garbage collector needs to do to get rid of all those extra objects you create. So the less efficient your code, the more quickly the phone’s battery will be drained, and the less happy the user will be. And you want happy users, right?
So, let us take a look at a few tricks to make your fancy ListView widgets more efficient.
The getView() method receives, as one of its parameters, a View named, by convention, convertView. Sometimes convertView will be null. In those cases, you have to create a new row View from scratch (e.g., via inflation), just as we did before.
However, if convertView is not null, then it is actually one of your previously created Views. This will be the case primarily when the user scrolls the ListView — as new rows appear, Android will attempt to recycle the views of the rows that scrolled off the other end of the list, to save you having to rebuild them from scratch.
Assuming that each of your rows has the same basic structure, you can use findViewById() to get at the individual widgets that make up your row and change their contents, then return convertView from getView() rather than create a whole new row.
For example, here is the getView() implementation from last time, now optimized via convertView (from the FancyLists/Recycling project at http://apress.com/):
public class RecyclingDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue",
"purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new IconicAdapter(this));
selection = (TextView)findViewById(R.id.selection);
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(items[position]);
}
class IconicAdapter extends ArrayAdapter {
Activity context;
IconicAdapter(Activity context) {
super(context, R.layout.row, items);
this.context = context;
}
public View getView(int position, View convertView,
ViewGroup parent) {
View row = convertView;
if (row==null) {
LayoutInflater inflater = context.getLayoutInflater();
row = inflater.inflate(R.layout.row, null);
}
TextView label = (TextView)row.findViewById(R.id.label);
label.setText(items[position]);
ImageView icon = (ImageView)row.findViewById(R.id.icon);
if (items[position].length() > 4) {
icon.setImageResource(R.drawable.delete);
} else {
icon.setImageResource(R.drawable.ok);
}
return(row);
}
}
}
Here we check to see if the convertView is null and, if so we then inflate our row — but if it is not null, we just reuse it. The work to fill in the contents (icon image, text) is the same in either case. The advantage is that if the convertView is not null, we avoid the potentially expensive inflation step.
This approach will not work in every case, though. For example, it may be that you have a ListView for which some rows will have one line of text and others will have two. In this case, recycling existing rows becomes tricky, as the layouts may differ significantly. For example, if the row we need to create a View for requires two lines of text, we cannot just use a View with one line of text as is. We either need to tinker with the innards of that View, or ignore it and inflate a new View.
Of course, there are ways to deal with this, such as making the second line of text visible or invisible depending on whether it is needed. And on a phone every millisecond of CPU time is precious, possibly for the user experience, but always for battery life — more CPU utilization means a more quickly drained battery.
That being said, particularly if you are a rookie to Android, focus on getting the functionality right first, then looking to optimize performance on a second pass through your code rather than getting lost in a sea of Views, trying to tackle it all in one shot.
Another somewhat expensive operation we do a lot with fancy views is call findViewById(). This dives into our inflated row and pulls out widgets by their assigned identifiers so we can customize the widget contents (e.g., change the text of a TextView, change the icon in an ImageView). Since findViewById() can find widgets anywhere in the tree of children of the row’s root View, this could take a fair number of instructions to execute, particularly if we keep having to re-find widgets we had found once before.
In some GUI toolkits, this problem is avoided by having the composite Views, like our rows, be declared totally in program code (in this case, Java). Then accessing individual widgets is merely a matter of calling a getter or accessing a field. And you can certainly do that with Android, but the code gets rather verbose. We need a way that lets us use the layout XML yet cache our row’s key child widgets so we have to find them only once. That’s where the holder pattern comes into play, in a class we’ll call ViewWrapper.
All View objects have getTag() and setTag() methods. These allow you to associate an arbitrary object with the widget. That holder pattern uses that “tag” to hold an object that, in turn, holds each of the child widgets of interest. By attaching that holder to the row View, every time we use the row, we already have access to the child widgets we care about, without having to call findViewById() again.
So, let’s take a look at one of these holder classes (taken from the FancyLists/ViewWrapper sample project at http://apress.com/):
class ViewWrapper {
View base;
TextView label = null;
ImageView icon = null;
ViewWrapper(View base) {
this.base = base;
}
TextView getLabel() {
if (label==null) {
label = (TextView)base.findViewById(R.id.label);
}
return(label);
}
ImageView getIcon() {
if (icon==null) {
icon = (ImageView)base.findViewById(R.id.icon);
}
return(icon);
}
}
ViewWrapper not only holds onto the child widgets, but also lazy-finds the child widgets. If you create a wrapper and never need a specific child, you never go through the findViewById() operation for it and never have to pay for those CPU cycles.
The holder pattern also allows us to do the following:
• Consolidate all our per-widget type casting in one place, rather than having to cast it everywhere we call findViewById()
• Perhaps track other information about the row, such as state information we are not yet ready to “flush” to the underlying model
Using ViewWrapper is a matter of creating an instance whenever we inflate a row and attaching said instance to the row View via setTag(), as shown in this rewrite of getView():
public class ViewWrapperDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue",
"purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new IconicAdapter(this));
selection = (TextView)findViewById(R.id.selection);
}
private String getModel(int position) {
return(((IconicAdapter)getListAdapter()).getItem(position));
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(getModel(position));
}
class IconicAdapter extends ArrayAdapter<String> {
Activity context;
IconicAdapter(Activity context) {
super(context, R.layout.row, items);
this.context = context;
}
public View getView(int position, View convertView,
ViewGroup parent) {
View row = convertView;
ViewWrapper wrapper = null;
if (row==null) {
LayoutInflater inflater = context.getLayoutInflater();
row = inflater.inflate(R.layout.row, null);
wrapper = new ViewWrapper(row);
row.setTag(wrapper);
} else {
wrapper = (ViewWrapper)row.getTag();
}
wrapper.getLabel().setText(getModel(position));
if (getModel(position).length() > 4) {
wrapper.getIcon().setImageResource(R.drawable.delete);
} else {
wrapper.getIcon().setImageResource(R.drawable.ok);
}
return(row);
}
}
}
Just as we check convertView to see if it is null in order to create the row Views as needed, we also pull out (or create) the corresponding row’s ViewWrapper. Then accessing the child widgets is merely a matter of calling their associated methods on the wrapper.
Lists with pretty icons next to them are all fine and well. But can we create ListView widgets whose rows contain interactive child widgets instead of just passive widgets like TextView and ImageView? For example, could we combine the RatingBar with text in order to allow people to scroll a list of, say, songs and rate them right inside the list?
There is good news and bad news.
The good news is that interactive widgets in rows work just fine. The bad news is that it is a little tricky, specifically when it comes to taking action when the interactive widget’s state changes (e.g., a value is typed into a field). We need to store that state somewhere, since our RatingBar widget will be recycled when the ListView is scrolled. We need to be able to set the RatingBar state based upon the actual word we are viewing as the RatingBar is recycled, and we need to save the state when it changes so it can be restored when this particular row is scrolled back into view.
What makes this interesting is that, by default, the RatingBar has absolutely no idea what model in the ArrayAdapter it is looking at. After all, the RatingBar is just a widget, used in a row of a ListView. We need to teach the rows which model they are currently displaying, so when their checkbox is checked they know which model’s state to modify.
So, let’s see how this is done, using the activity in the FancyLists/RateList sample project at http://apress.com/. We’ll use the same basic classes as our previous demo—we’re showing a list of nonsense words, which you can then rate. In addition, words given a top rating will appear in all caps.
public class RateListDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue",
"purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
ArrayList<RowModel> list = new ArrayList<RowModel>();
for (String s : items) {
list.add(new RowModel(s));
}
setListAdapter(new CheckAdapter(this, list));
selection = (TextView)findViewById(R.id.selection);
}
private RowModel getModel(int position) {
return(((CheckAdapter)getListAdapter()).getItem(position));
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(getModel(position).toString());
}
class CheckAdapter extends ArrayAdapter<RowModel> {
Activity context;
CheckAdapter(Activity context, ArrayList<RowModel> list) {
super(context, R.layout.row, list);
this.context = context;
}
public View getView(int position, View convertView,
ViewGroup parent) {
View row = convertView;
ViewWrapper wrapper;
RatingBar rate;
if (row==null) {
LayoutInflater inflater = context.getLayoutInflater();
row = inflater.inflate(R.layout.row, null);
wrapper = new ViewWrapper(row);
row.setTag(wrapper);
rate = wrapper.getRatingBar();
RatingBar.OnRatingBarChangeListener l =
new RatingBar.OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar ratingBar,
float rating, boolean fromTouch) {
Integer myPosition = (Integer)ratingBar.getTag();
RowModel model = getModel(myPosition);
model.rating = rating;
LinearLayout parent = (LinearLayout)ratingBar.getParent();
TextView label = (TextView)parent.findViewById(R.id.label);
label.setText(model.toString());
}
};
rate.setOnRatingBarChangeListener(l);
} else {
wrapper = (ViewWrapper)row.getTag();
rate = wrapper.getRatingBar();
}
RowModel model = getModel(position);
wrapper.getLabel().setText(model.toString());
rate.setTag(new Integer(position));
rate.setRating(model.rating);
return(row);
}
}
class RowModel {
String label;
float rating = 2.0f;
RowModel(String label) {
this.label = label;
}
public String toString() {
if (rating>=3.0) {
return (label.toUpperCase());
}
return(label);
}
}
}
Here is what is different between our earlier code and this activity and getView() implementation:
• While we are still using String[] items as the list of nonsense words, but rather than pouring that String array straight into an ArrayAdapter, we turn it into a list of RowModel objects. RowModel is this demo’s poor excuse for a mutable model; it holds the nonsense word plus the current checked state. In a real system, these might be objects populated from a Cursor, and the properties would have more business meaning.
• Utility methods like onListItemClick() had to be updated to reflect the change from a pure String model to use a RowModel.
• The ArrayAdapter subclass (CheckAdapter) in getView() looks to see if convertView is null. If so, we create a new row by inflating a simple layout (see the following code) and also attach a ViewWrapper (also in the following code). For the row’s RatingBar, we add an anonymous onRatingChanged() listener that looks at the row’s tag (getTag()) and converts that into an Integer, representing the position within the ArrayAdapter that this row is displaying. Using that, the checkbox can get the actual RowModel for the row and update the model based upon the new state of the rating bar. It also updates the text adjacent to the RatingBar when checked to match the rating-bar state.
• We always make sure that the RatingBar has the proper contents and has a tag (via setTag()) pointing to the position in the adapter the row is displaying.
The row layout is very simple: just a RatingBar and a TextView inside a LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<RatingBar
android:id="@+id/rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="3"
android:stepSize="1"
android:rating="2" />
<TextView
android:id="@+id/label"
android:paddingLeft="2px"
android:paddingRight="2px"
android:paddingTop="2px"
android:textSize="40sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The ViewWrapper is similarly simple, just extracting the RatingBar and the TextView out of the row View:
class ViewWrapper {
View base;
RatingBar rate = null;
TextView label = null;
ViewWrapper (View base) {
this.base = base;
}
RatingBar getRatingBar() {
if (rate==null) {
rate = (RatingBar)base.findViewById(R.id.rate);
}
return(rate);
}
TextView getLabel() {
if (label==null) {
label = (TextView)base.findViewById(R.id.label);
}
return(label);
}
}
And the result (Figure 9-3) is what you would expect, visually.
Figure 9-3. The RateListDemo application, as initially launched
This includes the toggled checkboxes turning their words into all caps (Figure 9-4).
Figure 9-4. The same application, showing a top-rated word
The rating list in the previous section works, but implementing it is very tedious. Worse, much of that tedium would not be reusable except in very limited circumstances. We can do better.
What we’d really like is to be able to create a layout 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" >
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<com.commonsware.android.fancylists.seven.RateListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
/>
</LinearLayout>
where, in our code, almost all of the logic that might have referred to a ListView before “just works” with the RateListView we put in the layout:
public class RateListViewDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue",
"purus"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new ArrayAdapterString(this,
android.R.layout.simple_list_item_1, items));
selection = (TextView)findViewById(R.id.selection);
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(items[position]);
}
}
Things get a wee bit challenging when you realize that in everything up to this point in this chapter, never were we actually changing the ListView itself. All our work was with the adapters, overriding getView() and inflating our own rows and whatnot.
So if we want RateListView to take in any ordinary ListAdapter and “just work,” putting checkboxes on the rows as needed, we are going to need to do some fancy footwork. Specifically, we are going to need to wrap the “raw” ListAdapter in some other ListAdapter that knows how to put the checkboxes on the rows and track the state of those checkboxes.
First we need to establish the pattern of one ListAdapter augmenting another. Here is the code for AdapterWrapper, which takes a ListAdapter and delegates all of the interface’s methods to the delegate (from the FancyLists/RateListView sample project at http://apress.com/):
public class AdapterWrapper implements ListAdapter {
ListAdapter delegate = null;
public AdapterWrapper(ListAdapter delegate) {
this.delegate = delegate;
}
public int getCount() {
return(delegate.getCount());
}
public Object getItem(int position) {
return(delegate.getItem(position));
}
public long getItemId(int position) {
return(delegate.getItemId(position));
}
public View getView(int position, View convertView,
ViewGroup parent) {
return(delegate.getView(position, convertView, parent));
}
public void registerDataSetObserver(DataSetObserver observer) {
delegate.registerDataSetObserver(observer);
}
public boolean hasStableIds() {
return(delegate.hasStableIds());
}
public boolean isEmpty() {
return(delegate.isEmpty());
}
public int getViewTypeCount() {
return(delegate.getViewTypeCount());
}
public int getItemViewType(int position) {
return(delegate.getItemViewType(position));
}
public void unregisterDataSetObserver(DataSetObserver observer) {
delegate.unregisterDataSetObserver(observer);
}
public boolean areAllItemsEnabled() {
return(delegate.areAllItemsEnabled());
}
public boolean isEnabled(int position) {
return(delegate.isEnabled(position));
}
}
We can then subclass AdapterWrapper to create RateableWrapper, overriding the default getView() but otherwise allowing the delegated ListAdapter to do the “real work:”
public class RateableWrapper extends AdapterWrapper {
Context ctxt = null;
float[] rates = null;
public RateableWrapper(Context ctxt, ListAdapter delegate) {
super(delegate);
this.ctxt = ctxt;
this.rates = new float[delegate.getCount()];
for(int i=0; idelegate.getCount(); i++) {
this.rates[i]=2.0f;
}
}
public View getView(int position, View convertView,
ViewGroup parent) {
ViewWrapper wrap = null;
View row = convertView;
if (convertView==null) {
LinearLayout layout = new LinearLayout(ctxt);
RatingBar rate = new RatingBar(ctxt);
rate.setNumStars(3);
rate.setStepSize(1.0f);
View guts = delegate.getView(position, null, parent);
layout.setOrientation(LinearLayout.HORIZONTAL);
rate.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT));
guts.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT));
RatingBar.OnRatingBarChangeListener l =
new RatingBar.OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar ratingBar,
float rating, boolean fromTouch) {
rates[(Integer)ratingBar.getTag()] = rating;
}
};
rate.setOnRatingBarChangeListener(l);
layout.addView(rate);
layout.addView(guts);
wrap = new ViewWrapper(layout);
wrap.setGuts(guts);
layout.setTag(wrap);
rate.setTag(new Integer(position));
rate.setRating(rates[position]);
row = layout;
} else {
wrap = (ViewWrapper)convertView.getTag();
wrap.setGuts(delegate.getView(position, wrap.getGuts(),
parent));
wrap.getRatingBar().setTag(new Integer(position));
wrap.getRatingBar().setRating(rates[position]);
}
return(row);
}
}
The idea is that RateableWrapper is where most of our rate-list logic resides. It puts the rating bars on the rows and it tracks the rating bars’ states as they are adjusted by the user. For the states, it has a float[] sized to fit the number of rows that the delegate says are in the list.
RateableWrapper’s implementation of getView() is reminiscent of the one from RateListDemo, except that rather than use LayoutInflater, we need to manually construct a LinearLayout to hold our RatingBar and the “guts” (that is, whatever view the delegate created that we are decorating with the checkbox). LayoutInflater is designed to construct a View from raw widgets; in our case, we don’t know in advance what the rows will look like, other than that we need to add a checkbox to them. However, the rest is similar to what we saw in RateListDemo:
class ViewWrapper {
ViewGroup base;
View guts = null;
RatingBar rate = null;
ViewWrapper(ViewGroup base) {
this.base = base;
}
RatingBar getRatingBar() {
if (rate==null) {
rate = (RatingBar)base.getChildAt(0);
}
return(rate);
}
void setRatingBar(RatingBar rate) {
this.rate = rate;
}
View getGuts() {
if (guts==null) {
guts = base.getChildAt(1);
}
return(guts);
}
void setGuts(View guts) {
this.guts = guts;
}
}
With all that in place, RateListView is comparatively simple:
public class RateListView extends ListView {
public RateListView(Context context) {
super(context);
}
public RateListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RateListView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
public void setAdapter(ListAdapter adapter) {
super.setAdapter(new RateableWrapper(getContext(), adapter));
}
}
We simply subclass ListView and override setAdapter() so we can wrap the supplied ListAdapter in our own RateableWrapper.
Visually, the results are similar to the RateListDemo, albeit without top-rated words appearing in all caps (see Figure 9-5).
Figure 9-5. The RateListViewDemo sample application
The difference is in reusability. We could package RateListView in its own JAR and plop it into any Android project where we need it. So while RateListView is somewhat complicated to write, we have to write it only once, and the rest of the application code is blissfully simple.
Of course, this RateListView could use some more features, such as programmatically changing states (updating both the float[] and the actual RatingBar itself), allowing other application logic to be invoked when a RatingBar state is toggled (via some sort of callback), etc.
The widgets and containers covered to date are not only found in many GUI toolkits (in one form or fashion), but also are widely used in building GUI applications, whether Web-based, desktop, or mobile. The widgets and containers in this chapter are a little less widely used, though you will likely find many to be quite useful.
With limited-input devices like phones, having widgets and dialogs that are aware of the type of stuff somebody is supposed to be entering is very helpful. It minimizes keystrokes and screen taps, plus reduces the chance of making some sort of error (e.g., entering a letter someplace where only numbers are expected).
As previously shown, EditText has content-aware flavors for entering in numbers, phone numbers, etc. Android also supports widgets (DatePicker, TimePicker) and dialogs (DatePickerDialog, TimePickerDialog) for helping users enter dates and times.
The DatePicker and DatePickerDialog allow you to set the starting date for the selection, in the form of a year, month, and day of month value. Note that the month runs from 0 for January through 11 for December. Most importantly, each let you provide a callback object (OnDateChangedListener or OnDateSetListener) where you are informed of a new date selected by the user. It is up to you to store that date someplace, particularly if you are using the dialog, since there is no other way for you to get at the chosen date later on.
Similarly, TimePicker and TimePickerDialog let you:
• set the initial time the user can adjust, in the form of an hour (0 through 23) and a minute (0 through 59)
• indicate if the selection should be in 12-hour mode with an AM/PM toggle, or in 24-hour mode (what in the US is thought of as “military time” and in the rest of the world is thought of as “the way times are supposed to be”)
• provide a callback object (OnTimeChangedListener or OnTimeSetListener) to be notified of when the user has chosen a new time, which is supplied to you in the form of an hour and minute
The Fancy/Chrono sample project, found along with all other code samples in this chapter in the Source Code area of http://apress.com, shows a trivial layout containing a label and two buttons — the buttons will pop up the dialog flavors of the date and time pickers:
<?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"
>
<TextView android:id="@+id/dateAndTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button android:id="@+id/dateBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Set the Date"
/>
<Button android:id="@+id/timeBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Set the Time"
/>
</LinearLayout>
The more interesting stuff comes in the Java source:
public class ChronoDemo extends Activity {
DateFormat fmtDateAndTime = DateFormat.getDateTimeInstance();
TextView dateAndTimeLabel;
Calendar dateAndTime = Calendar.getInstance();
DatePickerDialog.OnDateSetListener d =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year, int monthOfYear,
int dayOfMonth) {
dateAndTime.set(Calendar.YEAR, year);
dateAndTime.set(Calendar.MONTH, monthOfYear);
dateAndTime.set(Calendar.DAY_OF_MONTH, dayOfMonth);
updateLabel();
}
};
TimePickerDialog.OnTimeSetListener t =
new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view, int hourOfDay,
int minute) {
dateAndTime.set(Calendar.HOUR_OF_DAY, hourOfDay);
dateAndTime.set(Calendar.MINUTE, minute);
updateLabel();
}
};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
Button btn = (Button)findViewById(R.id.dateBtn);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
new DatePickerDialog(ChronoDemo.this, d,
dateAndTime.get(Calendar.YEAR), dateAndTime.get(Calendar.MONTH),
dateAndTime.get(Calendar.DAY_OF_MONTH)).show();
}
});
btn = (Button)findViewById(R.id.timeBtn);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
new TimePickerDialog(ChronoDemo.this, t,
dateAndTime.get(Calendar.HOUR_OF_DAY), dateAndTime.get(Calendar.MINUTE),
true).show();
}
});
dateAndTimeLabel = (TextView)findViewById(R.id.dateAndTime);
updateLabel();
}
private void updateLabel() {
dateAndTimeLabel.setText(fmtDateAndTime.format(dateAndTime.getTime()));
}
}
The “model” for this activity is just a Calendar instance, initially set to be the current date and time. We pour it into the view via a DateFormat formatter. In the updateLabel() method, we take the current Calendar, format it, and put it in the TextView.
Each button is given a OnClickListener callback object. When the button is clicked, either a DatePickerDialog or a TimePickerDialog is shown. In the case of the DatePickerDialog, we give it a OnDateSetListener callback that updates the Calendar with the new date (year, month, day of month). We also give the dialog the last-selected date, getting the values out of the Calendar. In the case of the TimePickerDialog, it gets a OnTimeSetListener callback to update the time portion of the Calendar, the last-selected time, and a true indicating we want 24-hour mode on the time selector.
With all this wired together, the resulting activity is shown in Figures 10-1, 10-2, and 10-3.
Figure 10-1. The ChronoDemo sample application, as initially launched
Figure 10-2. The same application, showing the date picker dialog
Figure 10-3. The same application, showing the time picker dialog
If you want to display the time, rather than have users enter the time, you may wish to use the DigitalClock or AnalogClock widgets. These are extremely easy to use, as they automatically update with the passage of time. All you need to do is put them in your layout and let them do their thing.
For example, from the Fancy/Clocks sample application, here is an XML layout containing both DigitalClock and AnalogClock:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<AnalogClock android:id="@+id/analog"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
/>
<DigitalClock android:id="@+id/digital"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="@id/analog"
/>
</RelativeLayout>
Without any Java code other than the generated stub, we can build this project (see Figure 10-4).
Figure 10-4. The ClocksDemo sample application
If you need to be doing something for a long period of time, you owe it to your users to do two things:
• Use a background thread, which will be covered in Chapter 15
• Keep them apprised of your progress, or else they think your activity has wandered away and will never come back
The typical approach to keeping users informed of progress is some form of progress bar or “throbber” (think the animated graphic towards the upper-right corner of many Web browsers). Android supports this through the ProgressBar widget.
A ProgressBar keeps track of progress, defined as an integer, with 0 indicating no progress has been made. You can define the maximum end of the range — what value indicates progress is complete — via setMax(). By default, a ProgressBar starts with a progress of 0, though you can start from some other position via setProgress().
If you prefer your progress bar to be indeterminate, use setIndeterminate(), setting it to true.
In your Java code, you can either positively set the amount of progress that has been made (via setProgress()) or increment the progress from its current amount (via incrementProgressBy()). You can find out how much progress has been made via getProgress().
Since the ProgressBar is tied closely to the use of threads — a background thread doing work, updating the UI thread with new progress information — we will hold off demonstrating the use of ProgressBar until Chapter 15.
The general Android philosophy is to keep activities short and sweet. If there is more information than can reasonably fit on one screen, albeit perhaps with scrolling, then it most likely belongs in another activity kicked off via an Intent, as will be described Chapter 24. However, that can be complicated to set up. Moreover, sometimes there legitimately is a lot of information that needs to be collected to be processed as an atomic operation.
In a traditional UI, you might use tabs to accomplish this end, such as a JTabbedPane in Java/Swing. In Android, you now have an option of using a TabHost container in much the same way — a portion of your activity’s screen is taken up with tabs which, when clicked, swap out part of the view and replace it with something else. For example, you might have an activity with a tab for entering a location and a second tab for showing a map of that location.
Some GUI toolkits refer to “tabs” as being just the things a user clicks on to toggle from one view to another. Some toolkits refer to “tabs” as being the combination of the clickable button-ish element and the content that appears when that tab is chosen. Android treats the tab buttons and contents as discrete entities, so we will call them “tab buttons” and “tab contents” in this section.
There are a few widgets and containers you need to use in order to set up a tabbed portion of a view:
• TabHost is the overarching container for the tab buttons and tab contents.
• TabWidget implements the row of tab buttons, which contain text labels and optionally contain icons.
• FrameLayout is the container for the tab contents; each tab content is a child of the FrameLayout.
This is similar to the approach that Mozilla’s XUL takes. In XUL’s case, the tabbox element corresponds to Android’s TabHost, the tabs element corresponds to TabWdget, and tabpanels corresponds to the FrameLayout.
There are a few rules to follow, at least in this milestone edition of the Android toolkit, in order to make these three work together:
• You mus t give the TabWidget an android:id of @android:id/tabs.
• You must set aside some padding in the FrameLayout for the tab buttons.
• If you wish to use the TabActivity, you must give the TabHost an android:id of @android:id/tabhost.
TabActivity, like ListActivity, wraps a common UI pattern (activity made up entirely of tabs) into a pattern-aware activity subclass. You do not necessarily have to use TabActivity — a plain activity can use tabs as well.
With respect to the FrameLayout padding issue, for whatever reason, the TabWidget does not seem to allocate its own space inside the TabHost container. In other words, no matter what you specify for android:layout_height for the TabWidget, the FrameLayout ignores it and draws at the top of the overall TabHost. Your tab contents obscure your tab buttons. Hence, you need to leave enough padding (via android:paddingTop) in FrameLayout to “shove” the actual tab contents down beneath the tab buttons.
In addition, the TabWidget seems to always draw itself with room for icons, even if you do not supply icons. Hence, for this version of the toolkit, you need to supply at least 62 pixels of padding, perhaps more depending on the icons you supply.
For example, here is a layout definition for a tabbed activity, from Fancy/Tab:
<?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">
<TabHost android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="62px">
<AnalogClock android:id="@+id/tab1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
/>
<Button android:id="@+id/tab2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="A semi-random button"
/>
</FrameLayout>
</TabHost>
</LinearLayout>
Note that the TabWidget and FrameLayout are immediate children of the TabHost, and the FrameLayout itself has children representing the various tabs. In this case, there are two tabs: a clock and a button. In a more complicated scenario, the tabs are probably some form of container (e.g., LinearLayout) with their own contents.
The Java code needs to tell the TabHost what views represent the tab contents and what the tab buttons should look like. This is all wrapped up in TabSpec objects. You get a TabSpec instance from the host via newTabSpec(), fill it out, then add it to the host in the proper sequence.
The two key methods on TabSpec are:
• setContent(), where you indicate what goes in the tab content for this tab, typically the android:id of the view you want shown when this tab is selected
• setIndicator(), where you provide the caption for the tab button and, in some flavors of this method, supply a Drawable to represent the icon for the tab
Note that tab “indicators” can actually be views in their own right, if you need more control than a simple label and optional icon.
Also note that you must call setup() on the TabHost before configuring any of these TabSpec objects. The call to setup() is not needed if you are using the TabActivity base class for your activity.
For example, here is the Java code to wire together the tabs from the preceding layout example:
package com.commonsware.android.fancy;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
public class TabDemo extends Activity {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
TabHost tabs = (TabHost)findViewById(R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec = tabs.newTabSpec(tag1);
spec.setContent(R.id.tab1);
spec.setIndicator(Clock);
tabs.addTab(spec);
spec = tabs.newTabSpec(tag2);
spec.setContent(R.id.tab2);
spec.setIndicator(Button);
tabs.addTab(spec);
tabs.setCurrentTab(0);
}
}
We find our TabHost via the familiar findViewById() method, then have it call setup(). After that, we get a TabSpec via newTabSpec(), supplying a tag whose purpose is unknown at this time. Given the spec, you call setContent() and setIndicator(), then call addTab() back on the TabHost to register the tab as available for use. Finally, you can choose which tab is the one to show via setCurrentTab(), providing the 0-based index of the tab.
The results can be seen in Figures 10-5 and 10-6.
Figure 10-5. The TabDemo sample application, showing the first tab
Figure 10-6. The same application, showing the second tab
TabWidget is set up to allow you to easily define tabs at compile time. However, sometimes, you want to add tabs to your activity during runtime. For example, imagine an email client where individual emails get opened in their own tab for easy toggling between messages. In this case, you don’t know how many tabs or what their contents will be until runtime, when the user chooses to open a message.
Fortunately, Android also supports adding tabs dynamically at runtime.
Adding tabs dynamically at runtime works much like the compile-time tabs previously shown, except you use a different flavor of setContent(), one that takes a TabHost.TabContentFactory instance. This is just a callback that will be invoked — you provide an implementation of createTabContent() and use it to build and return the Let’s take a look at an example (Fancy/DynamicTab).
First, here is some layout XML for an activity that sets up the tabs and defines one tab, containing a single button:
<?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">
<TabHost android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="62px">
<Button android:id="@+id/buttontab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="A semi-random button"
/>
</FrameLayout>
</TabHost>
</LinearLayout>
What we want to do is add new tabs whenever the button is clicked. That can be accomplished in just a few lines of code:
public class DynamicTabDemo extends Activity {
@Override
public void onCreate (Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
final TabHost tabs = (TabHost)findViewById(R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec = tabs.newTabSpec(buttontab);
spec.setContent(R.id.buttontab);
spec.setIndicator(Button);
tabs.addTab(spec);
tabs.setCurrentTab(0);
Button btn = (Button)tabs.getCurrentView().findViewById(R.id.buttontab);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
TabHost.TabSpec spec = tabs.newTabSpec(tag1);
spec.setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {
return(new AnalogClock(DynamicTabDemo.this));
}
});
spec.setIndicator(Clock);
tabs.addTab(spec);
}
});
}
}
In our button’s setOnClickListener() callback, we create a TabHost.TabSpec object and give it an anonymous TabHost.TabContentFactory. The factory, in turn, returns the View to be used for the tab — in this case, just an AnalogClock. The logic for constructing the tab’s View could be much more elaborate, such as using LayoutInflater to construct a view from layout XML.
In Figure 10-7 you can see that initially, when the activity is launched, we just have the one tab whereas Figure 10-8 shows multiple tabs.
Figure 10-7. The DynamicTab application, with the single initial tab
Figure 10-8. The DynamicTab application, with three dynamically-created tabs
In the preceding examples, the contents of each tab were set to be a View, such as a Button. This is easy and straight-forward, but it is not the only option. You can also integrate another activity from your application via an Intent.
Intents are ways of specifying something you want accomplished, then telling Android to go find something to accomplish it. Frequently, these are used to cause activities to spawn. For example, whenever you launch an application from the main Android application launcher, the launcher creates an Intent and has Android open up the activity associated with that Intent. This whole concept, and how activities can be placed in tabs, will be described in greater detail in Chapter 25.
Sometimes, you want the overall effect of tabs (only some Views visible at a time), but you do not want the actual UI implementation of tabs. Maybe the tabs take up too much screen space. Maybe you want to switch between perspectives based on a gesture or a device shake. Or maybe you just like being different.
The good news is that the guts of the view-flipping logic from tabs can be found in the ViewFlipper container, which can be used in other ways than the traditional tab.
ViewFlipper inherits from FrameLayout, just like we used to describe the innards of a TabWidget. However, initially, it just shows the first child view. It is up to you to arrange for the views to flip, either manually by user interaction, or automatically via a timer.
For example, here is a layout for a simple activity (Fancy/Flipper1) using a Button and a ViewFlipper:
<?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"
>
<Button android:id="@+id/flip_me"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Flip Me!"
/>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#FF00FF00"
android:text="This is the first panel"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#FFFF0000"
android:text="This is the second panel"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#FFFFFF00"
android:text="This is the third panel"
/>
</ViewFlipper>
</LinearLayout>
Notice that the layout defines three child views for the ViewFlipper, each a TextView with a simple message. Of course, you could have very complicated child views, if you so chose.
To manually flip the views, we need to hook into the Button and flip them ourselves when the button is clicked:
public class FlipperDemo extends Activity {
ViewFlipper flipper;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
flipper = (ViewFlipper)findViewById(R.id.details);
Button btn = (Button)findViewById(R.id.flip_me);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
flipper.showNext();
}
});
}
}
This is just a matter of calling showNext() on the ViewFlipper, like you can on any ViewAnimator class.
The result is a trivial activity: click the button, and the next TextView in sequence is displayed, wrapping around to the first after viewing the last (see Figures 10-9 and 10-10).
Figure 10-9. The Flipper1 application, showing the first panel
Figure 10-10. The same application, after switching to the second panel
This, of course, could be handled more simply by having a single TextView and changing the text and color on each click. However, you can imagine that the ViewFlipper contents could be much more complicated, like the contents you might put into a TabView.
As with the TabWidget, sometimes, your ViewFlipper contents may not be known at compile time. As with TabWidget, though, you can add new contents on the fly with ease.
For example, let’s look at another sample activity (Fancy/Flipper2), using this layout:
<?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"
>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</ViewFlipper>
</LinearLayout>
Notice that the ViewFlipper has no contents at compile time. Also note that there is no Button for flipping between the contents — more on this in a moment.
For the ViewFlipper contents, we will create large Button widgets, each containing one of a set of random words. And, we will set up the ViewFlipper to automatically rotate between the Button widgets, using an animation for transition:
public class FlipperDemo2 extends Activity {
static String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit",
"morbi", "vel", "ligula", "vitae",
"arcu", "aliquet", "mollis", "etiam",
"vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque",
"augue", "purus"};
ViewFlipper flipper;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
flipper = (ViewFlipper)findViewById(R.id.details);
flipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
for (String item : items) {
Button btn = new Button(this);
btn.setText(item);
flipper.addView(btn,
new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT));
}
flipper.setFlipInterval(2000);
flipper.startFlipping();
}
}
After getting our ViewFlipper widget from the layout, we first set up the “in” and “out” animations. In Android terms, an animation is a description of how a widget leaves (”out”) or enters (”in”) the viewable area. Animations are a complex beast, eventually worthy of their own chapter but not covered in this text. For now, realize that animations are resources, stored in res/anim/ in your project. For this example, we are using a pair of animations supplied by the SDK samples, available under the Apache 2.0 License. As their names suggest, widgets are “pushed” to the left, either to enter or leave the viewable area.
After iterating over the funky words, turning each into a Button, and adding the Button as a child of the ViewFlipper, we set up the flipper to automatically flip between children (flipper.setFlipInterval(2000);) and to start flipping (flipper.startFlipping();).
The result is an endless series of buttons, each appearing, then sliding out to the left after 2 seconds, being replaced by the next button in sequence, wrapping around to the first after the last has been shown (see Figure 10-11).
Figure 10-11. The Flipper2 application, showing an animated transition
The auto-flipping ViewFlipper is useful for status panels or other situations where you have a lot of information to display, but not much room. The key is that, since it automatically flips between views, expecting users to interact with individual views is dicey — the view might switch away part-way through their interaction.
Android offers AbsoluteLayout, where the contents are laid out based on specific coordinate positions. You tell AbsoluteLayout where to place a child in precise X,Y coordinates, and Android puts it there, no questions asked. On the plus side, this gives you precise positioning. On the minus side, it means your views will only look “right” on screens of a certain dimension, or it requires you to write a bunch of code to adjust the coordinates based on screen size. Since Android screens might run the gamut of sizes, plus have new sizes crop up periodically, using AbsoluteLayout could get quite annoying.
Android also has a new flavor of list, the ExpandableListView. This provides a simplified tree representation, supporting two levels of depth: groups and children. Groups contain children; children are “leaves” of the tree. This requires a new set of adapters, since the ListAdapter family does not provide any sort of group information for the items in the list.
Like applications for the desktop and some mobile operating systems, such as Palm OS and Windows Mobile, Android supports activities with application menus. Some Android phones will have a dedicated menu key for popping up the menu; others will offer alternate means for triggering the menu to appear.
Also, as with many GUI toolkits, you can create context menus. On a traditional GUI, this might be triggered by the right mouse button. On mobile devices, context menus typically appear when the user taps-and-holds over a particular widget. For example, if a TextView had a context menu and the device was designed for finger-based touch input, you could push the TextView with your finger, hold it for a second or two, and a pop-up menu would appear for you to choose from.
Android differs from most other GUI toolkits in terms of menu construction. While you can add items to the menu, you do not have full control over the menu’s contents, nor of the timing of when the menu is built. Part of the menu is system-defined, and that portion is managed by the Android framework itself.
Android considers application menus and context menus to be the options menu and the context menu, respectively. The options menu is triggered by pressing the hardware Menu button on the device, while the context menu is raised by a tap-and-hold on the widget sporting the menu.
In addition, the options menu operates in one of two modes: icon and expanded. When the user first presses the Menu button, the icon mode will appear, showing up to the first six menu choices as large, finger-friendly buttons in a grid at the bottom of the screen. If the menu has more than six choices, the sixth button will become. More — clicking that option will bring up the expanded mode, showing the remaining choices not visible in the regular menu. The menu is scrollable, so the user can get to any of the menu choices.
Rather than building your activity’s options menu during onCreate(), the way you wire up the rest of your UI, you instead need to implement onCreateOptionsMenu(). This callback receives an instance of Menu.
The first thing you should do is chain upward to the superclass (super.onCreateOptionsMenu(menu)) so the Android framework can add in any menu choices it feels are necessary. Then you can go about adding your own options, described momentarily.
If you will need to adjust the menu during your activity’s use (e.g., disable a now-invalid menu choice), just hold onto the Menu instance you receive in onCreateOptionsMenu() or implement onPrepareOptionsMenu(), which is called just before displaying the menu each time it is requested.
Given that you have received a Menu object via onCreateOptionsMenu(), you add menu choices by calling add(). There are many flavors of this method, which require some combination of the following parameters:
• A group identifier (int), which should be NONE unless you are creating a specific grouped set of menu choices for use with setGroupCheckable() (see the following list).
• A choice identifier (also an int) for use in identifying this choice in the onOptionsItemSelected() callback when a menu choice is selected.
• An order identifier (yet another int), for indicating where this menu choice should be slotted if the menu has Android-supplied choices alongside your own — for now, just use NONE.
• The text of the menu choice, as a String or a resource ID.
The add() family of methods all return an instance of MenuItem, where you can adjust any of the menu-item settings you have already set (e.g., the text of the menu choice). You can also set the shortcuts for the menu choice — single-character mnemonics that select that menu choice when the menu is visible. Android supports both an alphabetic (or QWERTY) set of shortcuts and a numeric set of shortcuts. These are set individually by calling setAlphabeticShortcut() and setNumericShortcut(), respectively. The menu is placed into alphabetic shortcut mode by calling setQwertyMode() on the menu with a true parameter.
The choice and group identifiers are keys used to unlock additional menu features, such as these:
• Calling MenuItem#setCheckable() with a choice identifier to control if the menu choice has a two-state checkbox alongside the title, where the checkbox value gets toggled when the user chooses that menu choice
• Calling Menu#setGroupCheckable() with a group identifier to turn a set of menu choices into ones with a mutual-exclusion radio button between them, so one out of the group can be in the “checked” state at any time
You can also call addIntentOptions() to populate the menu with menu choices corresponding to the available activities for an intent (see Chapter 25).
Finally, you can create fly-out sub-menus by calling addSubMenu() and supplying the same parameters as addMenu(). Android will eventually call onCreatePanelMenu(), passing it the choice identifier of your sub-menu, along with another Menu instance representing the sub-menu itself. As with onCreateOptionsMenu(), you should chain upward to the superclass, then add menu choices to the sub-menu. One limitation is that you cannot indefinitely nest sub-menus — a menu can have a sub-menu, but a sub-menu cannot itself have a sub-sub-menu.
If the user makes a menu choice, your activity will be notified via the onOptionsItemSelected() callback that a menu choice was selected. You are given the MenuItem object corresponding to the selected menu choice. A typical pattern is to switch() on the menu ID (item.getItemId()) and take appropriate action. Note that onOptionsItemSelected() is used regardless of whether the chosen menu item was in the base menu or in a sub-menu.
By and large, context menus use the same guts as option menus. The two main differences are how you populate the menu and how you are informed of menu choices.
First you need to indicate which widget(s) on your activity have context menus. To do this, call registerForContextMenu() from your activity, supplying the View that is the widget in need of a context menu.
Next you need to implement onCreateContextMenu(), which, among other things, is passed the View you supplied in registerForContextMenu(). You can use that to determine which menu to build, assuming your activity has more than one.
The onCreateContextMenu() method gets the ContextMenu itself, the View the context menu is associated with, and a ContextMenu.ContextMenuInfo, which tells you which item in the list the user did the tap-and-hold over, in case you want to customize the context menu based on that information. For example, you could toggle a checkable menu choice based on the current state of the item.
It is also important to note that onCreateContextMenu() gets called each time the context menu is requested. Unlike the options menu (which is built only once per activity), context menus are discarded once they are used or dismissed. Hence, you do not want to hold onto the supplied ContextMenu object; just rely on getting the chance to rebuild the menu to suit your activity’s needs on demand based on user actions.
To find out when a context-menu choice was selected, implement onContextItemSelected() on the activity. Note that you get only the MenuItem instance that was chosen in this callback. As a result, if your activity has two or more context menus, you may want to ensure they have unique menu-item identifiers for all their choices so you can tell them apart in this callback. Also, you can call getMenuInfo() on the MenuItem to get the ContextMenu.ContextMenuInfo you received in onCreateContextMenu(). Otherwise, this callback behaves the same as onOptionsItemSelected(), described in the previous section.
In the sample project Menus/Menus at http://apress.com/, you will find an amended version of the ListView sample (List) with an associated menu. Since the menus are defined in Java code, the XML layout need not change and is not reprinted here.
However, the Java code has a few new behaviors, as shown here:
public class MenuDemo extends ListActivity {
TextView selection;
String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
"consectetuer", "adipiscing", "elit", "morbi", "vel",
"ligula", "vitae", "arcu", "aliquet", "mollis",
"etiam", "vel", "erat", "placerat", "ante",
"porttitor", "sodales", "pellentesque", "augue", "purus"};
public static final int EIGHT_ID = Menu.FIRST+1;
public static final int SIXTEEN_ID = Menu.FIRST+2;
public static final int TWENTY_FOUR_ID = Menu.FIRST+3;
public static final int TWO_ID = Menu.FIRST+4;
public static final int THIRTY_TWO_ID = Menu.FIRST+5;
public static final int FORTY_ID = Menu.FIRST+6;
public static final int ONE_ID = Menu.FIRST+7;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, items));
selection = (TextView)findViewById(R.id.selection);
registerForContextMenu(getListView());
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
selection.setText(items[position]);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenu.ContextMenuInfo menuInfo) {
populateMenu(menu);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
populateMenu(menu);
return(super.onCreateOptionsMenu(menu));
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
return(applyMenuChoice(item) ||
super.onOptionsItemSelected(item));
}
@Override
public boolean onContextItemSelected(MenuItem item) {
return(applyMenuChoice(item) ||
super.onContextItemSelected(item));
}
private void populateMenu(Menu menu) {
menu.add(Menu.NONE, ONE_ID, Menu.NONE, "1 Pixel");
menu.add(Menu.NONE, TWO_ID, Menu.NONE, "2 Pixels");
menu.add(Menu.NONE, EIGHT_ID, Menu.NONE, "8 Pixels");
menu.add(Menu.NONE, SIXTEEN_ID, Menu.NONE, "16 Pixels");
menu.add(Menu.NONE, TWENTY_FOUR_ID, Menu.NONE, "24 Pixels");
menu.add(Menu.NONE, THIRTY_TWO_ID, Menu.NONE, "32 Pixels");
menu.add(Menu.NONE, FORTY_ID, Menu.NONE, "40 Pixels");
}
private boolean applyMenuChoice(MenuItem item) {
switch (item.getItemId()) {
case ONE_ID:
getListView().setDividerHeight(1);
return(true);
case EIGHT_ID:
getListView().setDividerHeight(8);
return(true);
case SIXTEEN_ID:
getListView().setDividerHeight(16);
return(true);
case TWENTY_FOUR_ID:
getListView().setDividerHeight(24);
return(true);
case TWO_ID:
getListView().setDividerHeight(2);
return(true);
case THIRTY_TWO_ID:
getListView().setDividerHeight(32);
return(true);
case FORTY_ID:
getListView().setDividerHeight(40);
return(true);
}
return(false);
}
}
In onCreate(), we register our list widget as having a context menu, which we fill in via our populateMenu() private method, by way of onCreateContextMenu(). We also implement the onCreateOptionsMenu() callback, indicating that our activity also has an options menu. Once again, we delegate to populateMenu() to fill in the menu.
Our implementations of onOptionsItemSelected() (for options-menu selections) and onContextItemSelected() (for context-menu selections) both delegate to a private applyMenuChoice() method, plus chaining upwards to the superclass if none of our menu choices was the one selected by the user.
In populateMenu() we add seven menu choices, each with a unique identifier. Being lazy, we eschew the icons.
In applyMenuChoice() we see if any of our menu choices were chosen; if so, we set the list’s divider size to be the user-selected width.
Initially the activity looks the same in the emulator as it did for ListDemo (see Figure 11-1).
Figure 11-1. The MenuDemo sample application, as initially launched
But if you press the Menu button, you will get our options menu (Figure 11-2).
Figure 11-2. The same application, showing the options menu
Clicking the More button shows the remaining two menu choices (Figure 11-3).
Figure 11-3. The same application, the remaining menu choices
Choosing a height (say, 16 pixels) then changes the divider height of the list to something garish (Figure 11-4).
Figure 11-4. The same application, made ugly
You can trigger the context menu by doing a tap-and-hold on any item in the list (Figure 11-5).
Figure 11-5. The same application, showing a context menu
Once again, choosing an option sets the divider height.
You saw in Chapter 9 that you can describe Views via XML files and inflate them into actual View objects at runtime. Android also allows you to describe menus via XML files and inflate them when a menu is called for. This helps you keep your menu structure separate from the implementation of menu-handling logic, and it provides easier ways to develop menu-authoring tools.
Menu XML goes in res/menu/ in your project tree, alongside the other types of resources that your project might employ. As with layouts, you can have several menu XML files in your project, each with their own filename and the .xml extension.
For example, from the Menus/Inflation sample project at http://apress.com/, here is a menu called sample.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/close"
android:title="Close"
android:orderInCategory="3"
android:icon="@drawable/eject" />
<item android:id="@+id/no_icon"
android:orderInCategory="2"
android:title="Sans Icon" />
<item android:id="@+id/disabled"
android:orderInCategory="4"
android:enabled="false"
android:title="Disabled" />
<group android:id="@+id/other_stuff"
android:menuCategory="secondary"
android:visible="false">
<item android:id="@+id/later"
android:orderInCategory="0"
android:title="2nd-To-Last" />
<item android:id="@+id/last"
android:orderInCategory="1"
android:title="Last" />
</group>
<item android:id="@+id/submenu"
android:orderInCategory="3"
android:title="A Submenu">
<menu>
<item android:id="@+id/non_ghost"
android:title="Non-Ghost"
android:visible="true"
android:alphabeticShortcut="n" />
<item android:id="@+id/ghost"
android:title="A Ghost"
android:visible="false"
android:alphabeticShortcut="g" />
</menu>
</item>
</menu>
Note the following about menu XML definitions:
• You must start with a menu root element.
• Inside a menu are item elements and group elements, the latter representing a collection of menu items that can be operated upon as a group.
• Sub-menus are specified by adding a menu element as a child of an item element, using this new menu element to describe the contents of the sub-menu.
• If you want to detect when an item is chosen or to reference an item or group from your Java code, be sure to apply an android:id, just as you do with View layout XML.
Inside the item and group elements you can specify various options, matching up with corresponding methods on Menu or MenuItem.
The title of a menu item is provided via the android:title attribute on an item element. This can be either a literal string or a reference to a string resource (e.g., @string/foo).
Menu items can have icons. To provide an icon — in the form of a reference to a drawable resource (e.g., @drawable/eject), use the android:icon attribute on the item element.
By default, the order of the items in the menu is determined by the order they appear in the menu XML. If you want, you can change that default by specifying the android:orderInCategory attribute on the item element. This is a 0-based index of the order for the items associated with the current category. There is an implicit default category; groups can provide an android:menuCategory attribute to specify a different category to use for items in that group.
Generally, though, it is simplest just to put the items in the XML in the order you want them to appear.
Items and groups can be enabled or disabled, controlled in the XML via the android:enabled attribute on the item or group element. By default, items and groups are enabled. Disabled items and groups appear in the menu but cannot be selected. You can change an item’s status at runtime via the setEnabled() method on MenuItem, or change a group’s status via setGroupEnabled() on Menu.
Similarly, items and groups can be visible or invisible, controlled in the XML via the android:visible attribute on the item or group element. By default, items and groups are visible. Invisible items and groups do not appear in the menu at all. You can change an item’s status at runtime via the setVisible() method on MenuItem, or change a group’s status via setGroupVisible() on Menu.
In the layout XML shown earlier, the other_stuff group is initially invisible. If we make it visible in our Java code, the two menu items in the group will “magically” appear.
Items can have shortcuts — single letters (android:alphabeticShortcut) or numbers (android:numericShortcut) that can be pressed to choose the item without having to use the touch screen, D-pad, or trackball to navigate the full menu.
Actually using a menu, once it’s defined in XML, is easy. Just create a MenuInflater and tell it to inflate your menu:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
theMenu = menu;
new MenuInflater(getApplication()).
inflate(R.menu.sample, menu);
return(super.onCreateOptionsMenu(menu));
}
Inevitably, you’ll get the question “Hey, can we change this font?” when doing application development. The answer depends on what fonts come with the platform, whether you can add other fonts, and how to apply them to the widget or whatever needs the font change.
Android is no different. It comes with some fonts plus a means for adding new fonts. Though, as with any new environment, there are a few idiosyncrasies to deal with.
Android natively knows three fonts, by the shorthand names of “sans”, “serif”, and “monospace”. These fonts are actually the Droid series of fonts, created for the Open Handset Alliance by Ascender.[14]
For those fonts, you can just reference them in your layout XML, if you so choose. The following layout from the Fonts/FontSampler sample project shows example code, and can also be found in the Source Code area at http://apress.com:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="sans:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/sans"
android:text="Hello, world!"
android:typeface="sans"
android:textSize="20sp"
/>
</TableRow>
<TableRow>
<TextView
android:text="serif:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/serif"
android:text="Hello, world!"
android:typeface="serif"
android:textSize="20sp"
/>
</TableRow>
<TableRow>
<TextView
android:text="monospace:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/monospace"
android:text="Hello, world!"
android:typeface="monospace"
android:textSize="20sp"
/>
</TableRow>
<TableRow>
<TextView
android:text="Custom:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/custom"
android:text="Hello, world!"
android:textSize="20sp"
/>
</TableRow>
</TableLayout>
This layout builds a table showing short samples of four fonts. Notice how the first three have the android:typeface attribute, whose value is one of the three built-in font faces (e.g., “sans”).
The three built-in fonts are very nice. However, it may be that a designer, or a manager, or a customer wants a different font than one of those three. Or perhaps you want to use a font for specialized purposes, such as a “dingbats” font instead of a series of PNG graphics.
The easiest way to accomplish this is to package the desired font(s) with your application. To do this, simply create an assets/ folder in the project root, and put your TrueType (TTF) fonts in the assets. You might, for example, create assets/fonts/ and put your TTF files in there.
Then, you need to tell your widgets to use that font. Unfortunately, you can no longer use layout XML for this, since the XML does not know about any fonts you may have tucked away as an application asset. Instead, you need to make the change in Java code:
public class FontSampler extends Activity {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
TextView tv = (TextView)findViewById(R.id.custom);
Typeface face = Typeface.createFromAsset(getAssets(),
"fonts/HandmadeTypewriter.ttf");
tv.setTypeface(face);
}
}
Here we grab the TextView for our “custom” sample, then create a Typeface object via the static createFromAsset() builder method. This takes the application’s AssetManager (from getAssets()) and a path within your assets/ directory to the font you want.
Then, it is just a matter of telling the TextView to setTypeface(), providing the Typeface you just created. In this case, we are using the Handmade Typewriter[15] font (see Figure 12-1).
Figure 12-1. The FontSampler application
Note that Android does not seem to like all TrueType fonts. When Android dislikes a custom font, rather than raise an Exception, it seems to substitute Droid Sans (“sans”) quietly. So, if you try to use a different font and it does not seem to be working, it may be that the font in question is incompatible with Android, for whatever reason.
Also, you are probably best served by changing the case of your font filenames to be all lowercase, to match the naming convention used in the rest of your resources.
Also note that TrueType fonts can be rather pudgy, particularly if they support an extensive subset of the available Unicode characters. The Handmade Typewriter font used here runs over 70KB; the DejaVu free fonts can run upwards of 500KB apiece. Even compressed, these add bulk to your application, so be careful not to go overboard with custom fonts, or your application could take up too much room on your users’ phones.
Other GUI toolkits let you use HTML for presenting information, from limited HTML renderers (e.g., Java/Swing, wxWidgets) to embedding Internet Explorer into .NET applications. Android is much the same, in that you can embed the built-in Web browser as a widget in your own activities, for displaying HTML or full-fledged browsing. The Android browser is based on WebKit, the same engine that powers Apple’s Safari Web browser.
The Android browser is sufficiently complex that it gets its own Java package (android.webkit), though using the WebView widget itself can be simple or powerful, based upon your requirements.
For simple stuff, WebView is not significantly different than any other widget in Android — pop it into a layout, tell it what URL to navigate to via Java code, and you’re done.
For example, WebKit/Browser1 is a simple layout with a WebView. You can find WebKit/Browser1 along with all the code samples for this chapter in the Source Code area at http://apress.com.
<?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"
>
<WebView android:id="@+id/webkit"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
As with any other widget, you need to tell it how it should fill up the space in the layout (in this case, it fills all remaining space).
The Java code is equally simple:
package com.commonsware.android.webkit;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class BrowserDemo1 extends Activity {
WebView browser;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
browser = (WebView)findViewById(R.id.webkit);
browser.loadUrl("http://commonsware.com");
}
}
The only unusual bit with this edition of onCreate() is that we invoke loadUrl() on the WebView widget, to tell it to load a Web page (in this case, the home page of some random firm).
However, we also have to make one change to AndroidManifest.xml, requesting permission to access the Internet:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.commonsware.android.webkit">
<uses-permission android:name="android.permission.INTERNET" />
<application>
<activity android:name=".BrowserDemo1" android:label="BrowserDemo1">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
If we fail to add this permission, the browser will refuse to load pages.
The resulting activity looks like a Web browser, just with hidden scrollbars (see Figure 13-1).
Figure 13-1. The Browser1 sample application
As with the regular Android browser, you can pan around the page by dragging it, while the directional pad moves you around all the focusable elements on the page.
What is missing is all the extra accouterments that make up a Web browser, such as a navigational toolbar.
Now, you may be tempted to replace the URL in that source code with something else, such as Google’s home page or another page that relies upon Javascript. By default Javascript is turned off in WebView widgets. If you want to enable Javascript, call getSettings().setJavaScriptEnabled(true); on the WebView instance.
There are two main ways to get content into the WebView. One, shown earlier, is to provide the browser with a URL and have the browser display that page via loadUrl(). The browser will access the Internet through whatever means are available to that specific device at the present time (WiFi, cellular network, Bluetooth-tethered phone, well-trained tiny carrier pigeons, etc.).
The alternative is to use loadData(). Here, you supply the HTML for the browser to view. You might use this to
• display a manual that was installed as a file with your application package
• display snippets of HTML you retrieved as part of other processing, such as the description of an entry in an Atom feed
• generate a whole user interface using HTML, instead of using the Android widget set
There are two flavors of loadData(). The simpler one allows you to provide the content, the MIME type, and the encoding, all as strings. Typically, your MIME type will be text/html and your encoding will be UTF-8 for ordinary HTML.
For instance, if you replace the loadUrl() invocation in the previous example with the following code, you get the result shown in Figure 13-2.
browser.loadData("<html><body>Hello, world!</body></html>",
"text/html", "UTF-8");
Figure 13-2. The Browser2 sample application
This is also available as a fully-buildable sample, as WebKit/Browser2.
As previously mentioned, there is no navigation toolbar with the WebView widget. This allows you to use it in places where such a toolbar would be pointless and a waste of screen real estate. That being said, if you want to offer navigational capabilities, you can, but you have to supply the UI.
WebView offers ways to perform garden-variety browser navigation, including the following:
• reload() to refresh the currently-viewed Web page
• goBack() to go back one step in the browser history, and canGoBack() to determine if there is any history to go back to
• goForward() to go forward one step in the browser history, and canGoForward() to determine if there is any history to go forward to
• goBackOrForward() to go backward or forward in the browser history, where a negative number as an argument represents a count of steps to go backward, and a positive number represents how many steps to go forward
• canGoBackOrForward() to see if the browser can go backward or forward the stated number of steps (following the same positive/negative convention as goBackOrForward())
• clearCache() to clear the browser resource cache and clearHistory() to clear the browsing history
If you are going to use the WebView as a local user interface (vs. browsing the Web), you will want to be able to get control at key times, particularly when users click on links. You will want to make sure those links are handled properly, either by loading your own content back into the WebView, by submitting an Intent to Android to open the URL in a full browser, or by some other means (see Chapter 25).
Your hook into the WebView activity is via setWebViewClient(), which takes an instance of a WebViewClient implementation as a parameter. The supplied callback object will be notified of a wide range of activities, ranging from when parts of a page have been retrieved (onPageStarted(), etc.) to when you, as the host application, need to handle certain user-or circumstance-initiated events, such as onTooManyRedirects() and onReceivedHttpAuthRequest(), etc.
A common hook will be shouldOverrideUrlLoading(), where your callback is passed a URL (plus the WebView itself) and you return true if you will handle the request or false if you want default handling (e.g., actually fetch the Web page referenced by the URL). In the case of a feed reader application, for example, you will probably not have a full browser with navigation built into your reader, so if the user clicks a URL, you probably want to use an Intent to ask Android to load that page in a full browser. But, if you have inserted a “fake” URL into the HTML, representing a link to some activity-provided content, you can update the WebView yourself.
For example, let’s amend the first browser example to be a browser-based equivalent of our original example: an application that, upon a click, shows the current time.
From WebKit/Browser3, here is the revised Java:
public class BrowserDemo3 extends Activity {
WebView browser;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
browser = (WebView)findViewById(R.id.webkit);
browser.setWebViewClient(new Callback());
loadTime();
}
void loadTime() {
String page="<html><body><a href=\"clock\">"
+ new Date().toString() + "</a></body></html>";
browser.loadDataWithBaseURL("x-data://base", page,
"text/html", "UTF-8", null);
}
private class Callback extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
loadTime();
return(true);
}
}
}
Here, we load a simple Web page into the browser (loadTime()) that consists of the current time, made into a hyperlink to the /clock URL. We also attach an instance of a WebViewClient subclass, providing our implementation of shouldOverrideUrlLoading(). In this case, no matter what the URL, we want to just reload the WebView via loadTime().
Running this activity gives the result shown in Figure 13-3.
Figure 13-3. The Browser3 sample application
Selecting the link and clicking the D-pad center button will “click” the link, causing us to rebuild the page with the new time.
With your favorite desktop Web browser, you have some sort of “settings” or “preferences” or “options” window. Between that and the toolbar controls, you can tweak and twiddle the behavior of your browser, from preferred fonts to the behavior of Javascript.
Similarly, you can adjust the settings of your WebView widget as you see fit, via the WebSettings instance returned from calling the widget’s getSettings() method.
There are lots of options on WebSettings to play with. Most appear fairly esoteric (e.g., setFantasyFontFamily()). However, here are some that you may find more useful:
• Control the font sizing via setDefaultFontSize() (to use a point size) or setTextSize() (to use constants indicating relative sizes like LARGER and SMALLEST)
• Control Javascript via setJavaScriptEnabled() (to disable it outright) and setJavaScriptCanOpenWindowsAutomatically() (to merely stop it from opening pop-up windows)
• Control Web site rendering via setUserAgent() — 0 means the WebView gives the Web site a user-agent string that indicates it is a mobile browser, while 1 results in a user-agent string that suggests it is a desktop browser
The settings you change are not persistent, so you should store them somewhere (such as via the Android preferences engine) if you are allowing your users to determine the settings, versus hard-wiring the settings in your application.
Sometimes your activity (or other piece of Android code) will need to speak up.
Not every interaction with Android users will be neat, tidy, and containable in activities composed of views. Errors will crop up. Background tasks may take way longer than expected. Something asynchronous may occur, such as an incoming message. In these and other cases, you may need to communicate with the user outside the bounds of the traditional user interface.
Of course, this is nothing new. Error messages in the form of dialog boxes have been around for a very long time. More-subtle indicators also exist, from task-tray icons to bouncing dock icons to a vibrating cell phone.
Android has quite a few systems for letting you alert your users outside the bounds of an Activity-based UI. One, notifications, is tied heavily into intents and services and, as such, is covered in Chapter 32. In this chapter, you will see two means of raising pop-up messages: toasts and alerts.
A Toast is a transient message, meaning that it displays and disappears on its own without user interaction. Moreover, it does not take focus away from the currently active Activity, so if the user is busy writing the next Great American Programming Guide, they will not have keystrokes be “eaten” by the message.
Since a Toast is transient, you have no way of knowing if the user even notices it. You get no acknowledgment from them, nor does the message stick around for a long time to pester the user. Hence, the Toast is mostly for advisory messages, such as indicating a long-running background task is completed, the battery has dropped to a low-but-not-too-low level, etc.
Making a Toast is fairly easy. The Toast class offers a static makeText() that accepts a String (or string resource ID) and returns a Toast instance. The makeText() method also needs the Activity (or other Context) plus a duration. The duration is expressed in the form of the LENGTH_SHORT or LENGTH_LONG constants to indicate, on a relative basis, how long the message should remain visible.
If you would prefer your Toast be made out of some other View, rather than be a boring old piece of text, simply create a new Toast instance via the constructor (which takes a Context), then call setView() to supply it with the view to use and setDuration() to set the duration.
Once your Toast is configured, call its show() method, and the message will be displayed.
If you would prefer something in the more classic dialog-box style, what you want is an AlertDialog. As with any other modal dialog box, an AlertDialog pops up, grabs the focus, and stays there until closed by the user. You might use this for a critical error, a validation message that cannot be effectively displayed in the base activity UI, or something else where you are sure that the user needs to see the message and needs to see it now.
The simplest way to construct an AlertDialog is to use the Builder class. Following in true builder style, Builder offers a series of methods to configure an AlertDialog, each method returning the Builder for easy chaining. At the end, you call show() on the builder to display the dialog box.
Commonly used configuration methods on Builder include the following:
• setMessage() if you want the “body” of the dialog to be a simple textual message, from either a supplied String or a supplied string resource ID
• setTitle() and setIcon() to configure the text and/or icon to appear in the title bar of the dialog box
• setPositiveButton(), setNeutralButton(), and setNegativeButton() to indicate which button(s) should appear across the bottom of the dialog, where they should be positioned (left, center, or right, respectively), what their captions should be, and what logic should be invoked when the button is clicked (besides dismissing the dialog)
If you need to configure the AlertDialog beyond what the builder allows, instead of calling show(), call create() to get the partially built AlertDialog instance, configure it the rest of the way, then call one of the flavors of show() on the AlertDialog itself.
Once show() is called, the dialog box will appear and await user input.
To see how these work in practice, take a peek at Messages/Message (available from the Source Code section of the Apress Web site), containing the following layout:
<?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" >
<Button
android:id="@+id/alert"
android:text="Raise an alert"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/toast"
android:text="Make a toast"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
and the following Java code:
public class MessageDemo extends Activity implements View.OnClickListener {
Button alert;
Button toast;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
alert = (Button)findViewById(R.id.alert);
alert.setOnClickListener(this);
toast = (Button)findViewById(R.id.toast);
toast.setOnClickListener(this);
}
public void onClick(View view) {
if (view==alert) {
new AlertDialog.Builder(this)
.setTitle("MessageDemo")
.setMessage("eek!")
.setNeutralButton("Close", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dlg, int sumthin) {
// do nothing – it will close on its own
}
})
.show();
} else {
Toast
.makeText(this, "<clink, clink>", Toast.LENGTH_SHORT)
.show();
}
}
}
The layout is unremarkable — just a pair of buttons to trigger the alert and the Toast.
When the Raise an Alert button is clicked, we use a builder (new Builder(this)) to set the title (setTitle("MessageDemo)"), message (setMessage("eek!")), and neutral button (setNeutralButton(Close, new OnClickListener() ...) before showing the dialog. When the button is clicked, the OnClickListener callback does nothing; the mere fact the button was pressed causes the dialog to be dismissed. However, you could update information in your activity based upon the user action, particularly if you have multiple buttons for the user to choose from. The result is a typical dialog box like the one in Figure 14-1.
Figure 14-1. The MessageDemo sample application, after clicking the Raise an Alert button
When you click the Make a Toast button, the Toast class makes us a text-based Toast(makeText(this, "<clink, clink>", LENGTH_SHORT)), which we then show(). The result is a short-lived, non-interrupting message (see Figure 14-2).
Figure 14-2. The same application, after clicking the Make a Toast button
Ideally, you want your activities to be downright snappy, so your users don’t feel that your application is sluggish. Responding to user input quickly (e.g., 200ms) is a fine goal. At minimum, though, you need to make sure you respond within 5 seconds, or the ActivityManager could decide to play the role of the Grim Reaper and kill off your activity as being non-responsive.
Of course, your activity might have real work to do, which takes non-negligible amounts of time. There are two ways of dealing with this:
• Do expensive operations in a background service, relying on notifications to prompt users to go back to your activity
• Do expensive work in a background thread
Android provides a veritable cornucopia of means to set up background threads yet allow them to safely interact with the UI on the UI thread. These include Handler objects and posting Runnable objects to the View.
The most flexible means of making an Android-friendly background thread is to create an instance of a Handler subclass. You only need one Handler object per activity, and you do not need to manually register it or anything — merely creating the instance is sufficient to register it with the Android threading subsystem.
Your background thread can communicate with the Handler, which will do all of its work on the activity’s UI thread. This is important because UI changes, such as updating widgets, should only occur on the activity’s UI thread.
You have two options for communicating with the Handler: messages and Runnable objects.
To send a Message to a Handler, first invoke obtainMessage() to get the Message object out of the pool. There are a few flavors of obtainMessage(), allowing you to just create empty Message objects, or ones populated with message identifiers and arguments. The more complicated your Handler processing needs to be, the more likely it is you will need to put data into the Message to help the Handler distinguish different events.
Then, you send the Message to the Handler via its message queue, using one of the following sendMessage...() family of methods:
• sendMessage() puts the message on the queue immediately
• sendMessageAtFrontOfQueue() puts the message on the queue immediately, and moreover puts it at the front of the message queue (versus the back, as is the default), so your message takes priority over all others
• sendMessageAtTime() puts the message on the queue at the stated time, expressed in the form of milliseconds based on system uptime (SystemClock.uptimeMillis())
• sendMessageDelayed() puts the message on the queue after a delay, expressed in milliseconds
To process these messages, your Handler needs to implement handleMessage(), which will be called with each message that appears on the message queue. There, the handler can update the UI as needed. However, it should still do that work quickly, as other UI work is suspended until the Handler is done.
For example, let’s create a ProgressBar and update it via a Handler. Here is the layout from the Threads/Handler sample project. This sample code along with all others in this chapter can be found in the Source Code section at http://apress.com.
<?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"
>
<ProgressBar android:id="@+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
The ProgressBar, in addition to setting the width and height as normal, also employs the style property, which I won’t cover in detail in this book. Suffice it to say, style property indicates this ProgressBar should be drawn as the traditional horizontal bar showing the amount of work that has been completed.
Here is the Java:
package com.commonsware.android.threads;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.ProgressBar;
public class HandlerDemo extends Activity {
ProgressBar bar;
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
bar.incrementProgressBy(5);
}
};
boolean isRunning = false;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
bar = (ProgressBar)findViewById(R.id.progress);
}
public void onStart() {
super.onStart();
bar.setProgress(0);
Thread background = new Thread(new Runnable() {
public void run() {
try {
for (int i=0; i<20 && isRunning; i++) {
Thread.sleep(1000);
handler.sendMessage(handler.obtainMessage());
}
} catch (Throwable t) {
// just end the background thread
}
}
});
isRunning = true;
background.start();
}
public void onStop() {
super.onStop();
isRunning = false;
}
}
As part of constructing the Activity, we create an instance of Handler, with our implementation of handleMessage(). Basically, for any message received, we update the ProgressBar by 5 points, then exit the message handler.
In onStart(), we set up a background thread. In a real system, this thread would do something meaningful. Here, we just sleep one second, post a Message to the Handler, and repeat for a total of 20 passes. This, combined with the 5-point increase in the ProgressBar position, will march the bar clear across the screen, as the default maximum value for ProgressBar is 100. You can adjust that maximum via setMax(), such as setting the maximum to be the number of database rows you are processing, and updating once per row.
Note that we then leave onStart(). This is crucial. The onStart() method is invoked on the activity UI thread, so it can update widgets and anything else that affects the UI, such as the title bar. However, that means we need to get out of onStart(), both to let the Handler get its work done, and also so Android does not think our activity is stuck.
The resulting activity is simply a horizontal progress bar (see Figure 15-1).
Figure 15-1. The HandlerDemo sample application
If you would rather not fuss with Message objects, you can also pass Runnable objects to the Handler, which will run those Runnable objects on the activity UI thread. Handler offers a set of post...() methods for passing Runnable objects in for eventual processing.
Just as Handler supports post() and postDelayed() to add Runnable objects to the event queue, you can use those same methods on View. This slightly simplifies your code, in that you can then skip the Handler object. However, you lose a bit of flexibility, and the Handler has been around longer in the Android toolkit and may be more tested.
Sometimes, you may not know if you are currently executing on the UI thread of your application. For example, if you package some of your code in a JAR for others to reuse, you might not know whether your code is being executed on the UI thread or from a background thread.
To help combat this problem, Activity offers runOnUiThread(). This works similar to the post() methods on Handler and View, in that it queues up a Runnable to run on the UI thread, if you are not on the UI thread right now. If you already are on the UI thread, it invokes the Runnable immediately. This gives you the best of both worlds: no delay if you are on the UI thread, yet safety in case you are not.
Background threads, while eminently possible using the Android Handler system, are not all happiness and warm puppies. Background threads not only add complexity, but they have real-world costs in terms of available memory, CPU, and battery life.
To that end, there are a wide range of scenarios you need to account for with your background thread, including
• The possibility that users will interact with your activity’s UI while the background thread is chugging along. If the work that the background thread is doing is altered or invalidated by the user input, you will need to communicate this to the background thread. Android includes many classes in the java.util.concurrent package that will help you communicate safely with your background thread.
• The possibility that the activity will be killed off while background work is going on. For example, after starting your activity, the user might have a call come in, followed by a text message, then a need to look up a contact — all of which might be sufficient to kick your activity out of memory. Chapter 16 will cover the various events Android will take your activity through; hook the proper ones and be sure to shut down your background thread cleanly when you have the chance.
• The possibility that your user will get irritated if you chew up a lot of CPU time and battery life without giving any payback. Tactically, this means using ProgressBar or other means of letting the user know that something is happening. Strategically, this means you still need to be efficient at what you do — background threads are no panacea for sluggish or pointless code.
• The possibility that you will encounter an error during background processing. For example, if you are gathering information off the Internet, the device might lose connectivity. Alerting the user of the problem via a Notification and shutting down the background thread may be your best option.
While this may sound like a broken record please remember that Android devices, by and large, are phones. As such, some activities are more important that others — taking a call is probably more important to users than is playing Sudoku. And, since it is a phone, it probably has less RAM than does your current desktop or notebook.
As a result, your activity may find itself being killed off because other activities are going on and the system needs your activity’s memory. Think of it as the Android equivalent of the “circle of life” — your activity dies so others may live, and so on. You cannot assume that your activity will run until you think it is complete, or even until the user thinks it is complete.
This is one example — perhaps the most important example — of how an activity’s lifecycle will affect your own application logic. This chapter covers the various states and callbacks that make up an activity’s lifecycle and how you can hook into them appropriately.
An activity, generally speaking, is in one of four states at any point in time:
• Active: The activity was started by the user, is running, and is in the foreground. This is what you’re used to thinking of in terms of your activity’s operation.
• Paused: The activity was started by the user, is running, and is visible, but a notification or something is overlaying part of the screen. During this time, the user can see your activity but may not be able to interact with it. For example, if a call comes in, the user will get the opportunity to take the call or ignore it.
• Stopped: The activity was started by the user, is running, but it is hidden by other activities that have been launched or switched to. Your application will not be able to present anything meaningful to the user directly, only by way of a Notification.
• Dead: Either the activity was never started (e.g., just after a phone reset) or the activity was terminated, perhaps due to lack of available memory.
Android will call into your activity as the activity transitions between the four states previously listed, using the methods shown in this section. Some transitions may result in multiple calls to your activity, and sometimes Android will kill your application without calling it. This whole area is rather murky and probably subject to change, so pay close attention to the official Android documentation as well as this section when deciding which events to pay attention to and which you can safely ignore.
Note that for all of these, you should chain upward and invoke the superclass’ edition of the method, or Android may raise an exception.
We have been implementing onCreate() in all of our Activity subclasses in every example. This will get called in three situations:
• When the activity is first started (e.g., since a system restart), onCreate() will be invoked with a null parameter.
• If the activity had been running, then sometime later was killed off, onCreate() will be invoked with the Bundle from onSaveInstanceState() as a parameter.
• If the activity had been running and you have set up your activity to have different resources based on different device states (e.g., landscape versus portrait), your activity will be re-created and onCreate() will be called.
Here is where you initialize your user interface and set up anything that needs to be done once, regardless of how the activity gets used.
On the other end of the lifecycle, onDestroy() may be called when the activity is shutting down, either because the activity called finish() (which “finishes” the activity) or because Android needs RAM and is closing the activity prematurely. Note that onDestroy() may not get called if the need for RAM is urgent (e.g., incoming phone call) and that the activity will just get shut down regardless. Hence, onDestroy() is mostly for cleanly releasing resources you obtained in onCreate() (if any).
An activity can come to the foreground either because it is first being launched, or because it is being brought back to the foreground after having been hidden (e.g., by another activity or by an incoming phone call).
The onStart() method is called in either of those cases. The onRestart() method is called in the case where the activity had been stopped and is now restarting.
Conversely, onStop() is called when the activity is about to be stopped.
The onResume() method is called just before your activity comes to the foreground, either after being initially launched, being restarted from a stopped state, or after a pop-up dialog (e.g., incoming call) is cleared. This is a great place to refresh the UI based on things that may have occurred since the user was last looking at your activity. For example, if you are polling a service for changes to some information (e.g., new entries for a feed), onResume() is a fine time to both refresh the current view and, if applicable, kick off a background thread to update the view (e.g., via a Handler).
Conversely, anything that steals your user away from your activity — mostly, the activation of another activity — will result in your onPause() being called. Here, you should undo anything you did in onResume(), such as stopping background threads, releasing any exclusive-access resources you may have acquired (e.g., camera), and the like.
Once onPause() is called, Android reserves the right to kill off your activity’s process at any point. Hence, you should not be relying upon receiving any further events.
Mostly, the aforementioned methods are for dealing with things at the application-general level (e.g., wiring together the last pieces of your UI in onCreate(), closing down background threads in onPause()).
However, a large part of the goal of Android is to have a patina of seamlessness. Activities may come and go as dictated by memory requirements, but users are, ideally, unaware that this is going on. If, for example, they were using a calculator, and come back to that calculator after an absence, they should see whatever number(s) they were working on originally — unless they themselves took some action to close down the calculator.
To make all this work, activities need to be able to save their application-instance state, and to do so quickly and cheaply. Since activities could get killed off at any time, activities may need to save their state more frequently than one might expect. Then, when the activity restarts, the activity should get its former state back, so it can restore the activity to the way it appeared previously.
Saving instance state is handled by onSaveInstanceState(). This supplies a Bundle into which activities can pour whatever data they need (e.g., the number showing on the calculator’s display). This method implementation needs to be speedy, so do not try to be too fancy — just put your data in the Bundle and exit the method.
That instance state is provided to you again in:
• onCreate()
• onRestoreInstanceState()
It is your choice when you wish to re-apply the state data to your activity — either callback is a reasonable option.
http://commonsware.com/Android/
http://code.google.com/android/reference/packages.html
http://droiddraw.org/
http://windowssdk.msdn.microsoft.com/en-us/library/ms752059.aspx
http://www.adobe.com/products/flex/
http://www.mozilla.org/projects/xul/
http://www.zkoss.org/
http://www.onjava.com/pub/a/onjava/2002/09/18/relativelayout.html
http://www.ascendercorp.com/oha.html
http://moorstation.org/typoasis/designers/klein07/text01/handmade.htm