Introduction

This article explains how to create a Spinner in Android. A Spinner is similar to a drop-down list. It provides a quick way to select a value from a list. It displays the currently selected value and touching the spinner gives a drop-down list from which we can choose the required value.
Step 1
"strings.xml" used in this project is:
  1. <resources>
  2. <string name="app_name">Spinner</string>
  3. <string name="action_settings">Settings</string>
  4. <string name="hello_world">Hello world!</string>
  5. <string name="choose_chocolate">Choose Chocolate</string>
  6. <string-array name="chocolate">
  7. <item>Crackles</item>
  8. <item>Fruit and Nut</item>
  9. <item>Dairy milk silk</item>
  10. </string-array>
  11. </resources>
Note that there are two ways to add items to a Spinner, one through the string array and the other programmatically. We will be using both techniques. The Chocolate Spinner will get its list as a string array and Ice Cream Spinner will get it's list programmatically.
Step 2
Open the "activity_main" layout file and add the following code to it:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:paddingLeft="@dimen/activity_horizontal_margin"
  7. android:paddingRight="@dimen/activity_horizontal_margin"
  8. android:paddingTop="@dimen/activity_vertical_margin"
  9. android:paddingBottom="@dimen/activity_vertical_margin"
  10. tools:context=".MainActivity"
  11. android:orientation="vertical">
  13. <RelativeLayout
  14. android:layout_height="wrap_content"
  15. android:layout_width="fill_parent">
  16. <TextView
  17. android:text="Chocolate"
  18. android:id="@+id/txtChoco"
  19. android:layout_height="wrap_content"
  20. android:layout_width="wrap_content"
  21. android:layout_marginTop="20dp"
  22. android:textSize="30dp"/>
  23. <Spinner
  24. android:id="@+id/chocolate_spinner"
  25. android:layout_height="wrap_content"
  26. android:layout_width="fill_parent"
  27. android:entries="@array/chocolate"
  28. android:prompt="@string/choose_chocolate"
  29. android:layout_toRightOf="@+id/txtChoco"
  30. android:layout_marginLeft="10dp"
  31. android:layout_marginTop="15dp"/>
  32. </RelativeLayout>
  34. <RelativeLayout
  35. android:layout_height="wrap_content"
  36. android:layout_width="fill_parent"
  37. android:layout_marginTop="30dp">
  38. <TextView
  39. android:text="Ice Cream"
  40. android:id="@+id/txtIce"
  41. android:layout_height="wrap_content"
  42. android:layout_width="wrap_content"
  43. android:layout_marginTop="20dp"
  44. android:textSize="30dp"/>
  46. <Spinner
  47. android:id="@+id/ice_cream_spinner"
  48. android:layout_height="wrap_content"
  49. android:layout_width="fill_parent"
  50. android:layout_toRightOf="@+id/txtIce"
  51. android:layout_marginLeft="10dp"
  52. android:layout_marginTop="15dp"
  53. />
  54. </RelativeLayout>
  56. <Button
  57. android:layout_width="wrap_content"
  58. android:layout_height="wrap_content"
  59. android:text="Done"
  60. android:layout_marginLeft="130dp"
  61. android:layout_marginTop="100dp"
  62. android:id="@+id/done"/>
  64. </LinearLayout>
Note that a Spinner is added to create a Spinner in the layout. We have two Spinners here, one for chocolates and the other for Ice Creams.
The layout looks like:
im1.jpg
Step 3
Create a new layout file.
Right-click on layout then select "New" -> "Layout Resource File". Name it "selected_layout".
This file layout shows the selected values of spinners in a button click.
Add the following code to it:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:orientation="vertical"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="#ffd088" >
  6. <TextView android:id="@+id/display_choco"
  7. android:layout_height="wrap_content"
  8. android:layout_width="fill_parent"
  9. android:textSize="30dp"
  10. android:layout_marginTop="30dp"
  11. android:layout_marginLeft="30dp"/>
  12. <TextView android:id="@+id/display_ice"
  13. android:layout_height="wrap_content"
  14. android:layout_width="fill_parent"
  15. android:textSize="30dp"
  16. android:layout_marginTop="30dp"
  17. android:layout_marginLeft="30dp"/>
  18. </LinearLayout>
Step 4
Open "MainActivity" and add the following code to it:
  1. package com.chhavi.spinner;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.app.Activity;
  6. import android.view.Menu;
  7. import android.view.View;
  8. import android.widget.ArrayAdapter;
  9. import android.widget.Button;
  10. import android.widget.Spinner;
  11. import android.widget.TextView;
  12. import android.widget.Toast;
  13. import java.util.ArrayList;
  14. import java.util.List;
  16. public class MainActivity extends Activity {
  18. private Spinner choco, ice;
  19. private Button done;
  20. TextView choco_display, ice_display;
  22. @Override
  23. protected void onCreate(Bundle savedInstanceState) {
  24. super.onCreate(savedInstanceState);
  25. setContentView(R.layout.activity_main);
  27. addIceCream();
  29. choco = (Spinner) findViewById(R.id.chocolate_spinner);
  30. choco.setOnItemSelectedListener(new SelectingItem());
  31. done=(Button)findViewById(R.id.done);
  32. ice=(Spinner)findViewById(R.id.ice_cream_spinner);
  34. done.setOnClickListener(new View.OnClickListener() {
  35. @Override
  36. public void onClick(View v) {
  37. setContentView(R.layout.selected_layout);
  38. choco_display=(TextView)findViewById(R.id.display_choco);
  39. ice_display=(TextView)findViewById(R.id.display_ice);
  40. choco_display.setText("Chocolate: "+String.valueOf(choco.getSelectedItem()));
  41. ice_display.setText("Ice cream: "+String.valueOf(ice.getSelectedItem()));
  42. }
  43. });
  44. }
  46. public void addIceCream()
  47. {
  48. ice = (Spinner) findViewById(R.id.ice_cream_spinner);
  49. List<String> list = new ArrayList<String>();
  50. list.add("Vanilla");
  51. list.add("Fruit and Nut");
  52. list.add("Choco chips");
  53. ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, list);
  54. dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  55. ice.setAdapter(dataAdapter);
  56. }
  58. @Override
  59. public boolean onCreateOptionsMenu(Menu menu) {
  60. // Inflate the menu; this adds items to the action bar if it is present.
  61. getMenuInflater().inflate(R.menu.main, menu);
  62. return true;
  63. }
  64. }
In the code above, the "addIceCream" method adds a list of items to the Spinner for Ice Cream. Note the two ways of adding values to the Spinner. The SpinnerObject.getSelectedItem method returns the item currently selected.
Step 5
Create a new Java class in the same package. Name it "SelectingItem" and add the following code to it:
  1. package com.chhavi.spinner;
  3. import android.view.View;
  4. import android.widget.AdapterView;
  5. import android.widget.Toast;
  7. public class SelectingItem implements AdapterView.OnItemSelectedListener {
  9. public void onItemSelected(AdapterView<?> parent, View view, int pos,long id) {
  10. Toast.makeText(parent.getContext(),
  11. "Selecting Item : " + parent.getItemAtPosition(pos).toString(), Toast.LENGTH_SHORT).show();
  12. }
  14. @Override
  15. public void onNothingSelected(AdapterView<?> arg0) {
  16. // TODO Auto-generated method stub
  17. }
  18. }
Output snapshots:
im2.jpg
Clicking on the first spinner we will get it's drop-down list as:
im3.jpg
Selecting one item from the list above:
im4.jpg
Similarly, selecting a value from the second list and clicking on done gives:
im5.jpg
Thank you