Beginning Android

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

Grid Your Lions (or Something Like That…)

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