Android Spinner (DropDown) tutorial

This tutorial shows a simple example on how to use the Android spinner component. The spinner component is one of the most used UI component there is and it’s commonly known as the dropdown list on other platforms. The basic use case for a spinner is a situation where the user needs to choose one option from a list of alternatives.

This tutorials shows you how to do the following things:

  1. Spinner component with a predefined list of options
  2. Spinner component with a dynamic options
  3. React to selections

Prerequisite

This tutorial uses mainly basic ui components and Toast notifications. If Toast is not a familiar class or concept, I suggest that you read the Toast tutorial before continuing.

Resources

res/values/strings.xml

<resources>

    <string name="app_name">Spinner Tutorial</string>
    <string name="spinner_prompt">Choose an item</string>
    <string name="simple_header">Simple Spinner</string>
    <string name="custom_list_header">Custom list Spinner</string>
    <string name="selection_header">Selection Spinner</string>

    <string-array name="cities_array">
        <item>Berlin</item>
        <item>Helsinki</item>
        <item>London</item>
        <item>New York</item>
        <item>Paris</item>
        <item>Stockholm</item>
    </string-array>

</resources>

Strings.xml contains string resources for the application. The spinner_prompt and cities_array are used in the spinner components.

res/layout/activity_spinner.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/simple_header" />

    <Spinner
        android:id="@+id/simple_spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:entries="@array/cities_array"
        android:prompt="@string/spinner_prompt"
        tools:listitem="@android:layout/simple_spinner_item" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="@string/custom_list_header" />

    <Spinner
        android:id="@+id/custom_list_spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:prompt="@string/spinner_prompt"
        tools:listitem="@android:layout/simple_spinner_item" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="@string/selection_header" />

    <Spinner
        android:id="@+id/selection_spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:entries="@array/cities_array"
        android:prompt="@string/spinner_prompt"
        tools:listitem="@android:layout/simple_spinner_item" />

</LinearLayout>

The layout file contains three different spinner components. The simple component is initialized in the layout file with choices from R.string.cities_array and title text from R.string.spinner_prompt. The custom list spinner has the prompt text, but the choices are set in code. On the layout side, the selection spinner is like the simple spinner component.

Code

com.caphal.android.spinner.SpinnerActivity

package com.caphal.android.spinner;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
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;

public class SpinnerActivity extends Activity implements OnItemSelectedListener {

    private Spinner customListSpinner;
    private Spinner selectionSpinner;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spinner);

        initCustomListSpinner();
        initSelectionSpinner();
    }

    private void initCustomListSpinner() {
        customListSpinner = (Spinner) findViewById(R.id.custom_list_spinner);

        // Custom choices
        List<CharSequence> choices = new ArrayList<CharSequence>();
        choices.add("Earth");
        choices.add("Mars");
        choices.add("Venus");
        choices.add("Jupiter");
        choices.add("Mercury");
        choices.add("Uranus");

        // Create an ArrayAdapter with custom choices
        ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(this, android.R.layout.simple_spinner_item, choices);

        // Specify the layout to use when the list of choices appears
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        // Set the adapter to th spinner
        customListSpinner.setAdapter(adapter);
    }

    private void initSelectionSpinner() {
        selectionSpinner = (Spinner) findViewById(R.id.selection_spinner);

        // Set SpinnerActivity as the item selected listener
        selectionSpinner.setOnItemSelectedListener(this);
    }

    public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
        Toast.makeText(this, selectionSpinner.getSelectedItem() + " selected", Toast.LENGTH_SHORT).show();
    }

    public void onNothingSelected(AdapterView<?> parent) {
    }
}

The spinner specific code is split into two methods, initCustomListSpinner and initSelectionSpinner. In initCustomListSpinner the spinner component is first fetched from the view hierarchy. Then an ArrayAdapter is created with a list of custom choices. After setting the view resource, the adapter is set to the spinner component.

In initSelectionSpinner the spinner component is fetched from the view hierarchy and then the parent activity, which implements AdapterView.OnItemSelectedListener, is set as the onItemSelectedListener. The AdapterView.OnItemSelectedListener requires that the activity implements onItemSelected and onNothingSelected methods. So when an item is selected the onItemSelected method is called and a Toast is shown to the user.

Screenshots

Simple Spinner component Custom list spinner Selection spinner 1 Selection spinner 2

Source code

Source code for this tutorial is available here

Further reading

Comments

comments powered by Disqus