Android Spinner Example

0

In this article, we will see an example of Android’s spinner widget.

A spinner widget holds a list of values, by default, it will show the first entry. On touching the spinner, the list of values will show up in a dropdown menu from which the user can select a new one.

By default, the display style will be in form of dropdown menu. We can also show the spinner in a dialog form. We will see both the form of widgets in this example.

Main Screen

We will display a list of languages, Java, Python etc.
Let’s first add the items in strings.xml.

strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">JavArticles</string>
    <string name="welcome">Spinner Example</string>
    <string-array name="languages">
        <item>Java</item>
        <item>Python</item>
        <item>Scala</item>
        <item>Perl</item>
        <item>Ruby</item>
    </string-array>
    <string name="languages_prompt">Languages</string>
</resources>

Our main screen consists of two spinner widgets. Once touched. one shows up in the default mode and the second one will be shown in dialog form. We want the second spinner to show the values in dialog mode, we do this by setting android:spinnerMode to “dialog”.

welcome.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.DatePickerExample" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <Spinner
        android:id="@+id/spinner_languages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Spinner
        android:id="@+id/spinner_languages_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:spinnerMode="dialog"
        android:prompt="@string/languages_prompt"/>

</LinearLayout>

Main Activity

We retrieve the array of languages, create ArrayAdapter and set the spinner’s data using setAdapter method. We want the spinner to have the android provided layout android.R.layout.simple_spinner_item so we pass it to ArrayAdapter‘s constructor.
We also set the item’s layout by calling setDropDownViewResource(int). We set it to android provided simple_spinner_dropdown_item.
For comparison sake, we don’t set the item layout to our second spinner.

The first spinner shows up with the first array element ‘Java’. For the second spinner, we set the selection to the third element spinnerLanguagesDialog.setSelection(2) so it shows the current selected item as ‘Scala’.

Finally, we set OnItemSelectedListener objects to both the spinner widgets so that we know the item selected.

MainActivity:

package com.javarticles.android;

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 MainActivity extends Activity {
	private Spinner spinnerLanguages;
	private Spinner spinnerLanguagesDialog;
	private String[] languages;
	
	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);	
		setContentView(R.layout.welcome);
		spinnerLanguages = (Spinner) findViewById(R.id.spinner_languages);
		spinnerLanguagesDialog = (Spinner) findViewById(R.id.spinner_languages_dialog);

		languages = getResources().getStringArray(R.array.languages);
		spinnerLanguages.setAdapter(new ArrayAdapter(this, android.R.layout.simple_spinner_item, languages));
		spinnerLanguagesDialog.setAdapter(new ArrayAdapter(this, android.R.layout.simple_spinner_item, languages));
		spinnerLanguagesDialog.setSelection(2);
		
		spinnerLanguages.setOnItemSelectedListener(new SpinnerItemSelectedListener());
		spinnerLanguagesDialog.setOnItemSelectedListener(new SpinnerItemSelectedListener());		
	}
	
	private class SpinnerItemSelectedListener implements OnItemSelectedListener {
		@Override
		public void onItemSelected(AdapterView<?> parent, View view,
				int position, long id) {
			Toast.makeText(parent.getContext(), "Item selected is " + languages[position], Toast.LENGTH_SHORT).show();
		}

		@Override
		public void onNothingSelected(AdapterView<?> parent) {
			Toast.makeText(parent.getContext(), "No Item selected" , Toast.LENGTH_SHORT).show();
		}
	}
}

Run the application

Main screen with the spinners

Spinners

Spinners

Click on the first spinner.

Spinner with dropdown menu

Spinner with dropdown menu

Select one of the value.

Select Item

Select Item

Click on the second spinner. It shows up in form of dialog.

Spinner in dialog mode

Spinner in dialog mode

Download source code

This was an example about Android’s spinner widget. You can download the source code here: spinnerExample.zip

Share.

Comments are closed.