Software Development

Pro tip: Take a second look at Android's spinner widget

William J. Francis goes back to basics with this beginner Android tutorial on when and how to use UI kit spinner widgets.

1024px-logoandroid051614.png

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

androidcupcakespinner061714.png

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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:layout_gravity="center"
        android:text="Spinner Widget" />
    
    <Spinner
	    android:id="@+id/spinner_widget"
	    android:layout_gravity="center"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content" />

</LinearLayout>

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<String> adapter = new ArrayAdapter<String>(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

androidjbspinner061714.png

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.

Also see

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

0 comments

Editor's Picks