William J. Francis goes back to basics with this beginner Android tutorial on when and how to use UI kit spinner widgets.
Prior to developing Android apps, I used a lot of drop-down lists when building user interfaces. Drop-downs provide a way to limit the user’s choices to a list selection, without eating up all the screen real estate that a traditional list view would consume.
When I built my first Android app, I was shocked to discover there wasn’t a drop-down list widget. A quick Google search corrected my vernacular. For whatever reason, the architects of the Android SDK chose to rename what I knew as a drop-down list to a spinner. Whew.
However, my relief didn’t last long. The first time I added a drop-down, I mean spinner, to one of my layouts, I was horrified at the eyesore that appeared on my emulator (Figure A).
Figure A
As a result I decided to go the list view route — but that was five years ago. So several weeks ago when I caught myself implementing a list view when what really made the most sense was a spinner, I decided to see how far things have come. The answer was a long way.
The tutorial that follows is a very simple re-introduction to Android’s spinner widget. Feel free to follow along or import the entire project directly into Eclipse.
1. Create a new project in Eclipse targeting Android 4.0 (ICS) or better.
2. In the /res/layout folder, modify the activity_main.xml file to include a spinner widget wrapped by a linear layout.
activity_main.xml
3. Modify MainActivity.java in the /src folder. The code is very typical of working with Android widgets. Find the resource, assign it some value, and wire up a listener for responding to changes.
package com.authorwjf.spinnerdemo;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;
import android.app.Activity;
public class MainActivity extends Activity implements OnItemSelectedListener {
private String[] colors = {“Red”, “Orange”, “Yellow”, “Green”, “Blue”, “Indigo”, “Violet”};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, colors);
Spinner spinner = (Spinner) findViewById(R.id.spinner_widget);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
spinner.setOnItemSelectedListener(this);
}
@Override
public void onItemSelected(AdapterView parent, View view, int pos, long id) {
Toast.makeText(this, “Selection: “+colors[pos], Toast.LENGTH_SHORT).show();
}
@Override
public void onNothingSelected(AdapterView parent) {
Toast.makeText(this, “Selections cleared.”, Toast.LENGTH_SHORT).show();
}
}
Here is a look at the latest and vastly improved out-of-the box user experience provided by the spinner widget (Figure B).
Figure B
A question I often get asked by developers new to the platform is: When should one use a list activity for a selection, and when is a spinner the appropriate choice? As a rule of thumb I like to think in terms of navigation. If selecting an item will force the user to a new activity or fragment, then generally I go with a list activity; if not, I think a spinner is a better choice — the caveat being if you can get away with only supporting Honeycomb or better. If you must support older versions of Android, then I say do what you must to avoid the offensive original spinner user experience.
