Pro tip: Take a second look at Android's spinner widget.
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 <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
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.
Source: www.bing.com
Images credited to www.bing.com and weeklytechnology.com
