1 page.title=Spinner 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>{@link android.widget.Spinner} is a widget similar to a drop-down list for selecting items.</p> 7 8 <p>In this tutorial, you'll create 9 a simple spinner widget that displays a list of planets. When one is selected, a toast message 10 will display the selected item.</p> 11 12 <ol> 13 <li>Start a new project named <em>HelloSpinner</em>.</li> 14 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 15 <pre> 16 <?xml version="1.0" encoding="utf-8"?> 17 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 18 android:orientation="vertical" 19 android:padding="10dip" 20 android:layout_width="fill_parent" 21 android:layout_height="wrap_content"> 22 <TextView 23 android:layout_width="fill_parent" 24 android:layout_height="wrap_content" 25 android:layout_marginTop="10dip" 26 android:text="@string/planet_prompt" 27 /> 28 <Spinner 29 android:id="@+id/spinner" 30 android:layout_width="fill_parent" 31 android:layout_height="wrap_content" 32 android:prompt="@string/planet_prompt" 33 /> 34 </LinearLayout> 35 </pre> 36 <p>Notice that the {@link android.widget.TextView}'s <code>android:text</code> attribute and the 37 {@link android.widget.Spinner}'s <code>android:prompt</code> attribute both reference the same 38 string resource. This text behaves as a title for the widget. When applied to the {@link 39 android.widget.Spinner}, the title text will appear 40 in the selection dialog that appears upon selecting the widget.</p> 41 </li> 42 43 <li>Create a <code>strings.xml</code> file in <code>res/values/</code> and edit the file to look 44 like this: 45 <pre> 46 <?xml version="1.0" encoding="utf-8"?> 47 <resources> 48 <string name="planet_prompt">Choose a planet</string> 49 <string-array name="planets_array"> 50 <item>Mercury</item> 51 <item>Venus</item> 52 <item>Earth</item> 53 <item>Mars</item> 54 <item>Jupiter</item> 55 <item>Saturn</item> 56 <item>Uranus</item> 57 <item>Neptune</item> 58 </string-array> 59 </resources> 60 </pre> 61 <p>The {@code <string>} element defines the title string referenced by the {@link 62 android.widget.TextView} and {@link android.widget.Spinner} in the layout above. The {@code 63 <string-array} element defines the list of strings that will be displayed as the list in 64 the {@link android.widget.Spinner} widget.</p> 65 </li> 66 67 <li>Now open the <code>HelloSpinner.java</code> file and insert the following code for the {@link 68 android.app.Activity#onCreate(Bundle) onCreate()} method: 69 <pre> 70 @Override 71 public void onCreate(Bundle savedInstanceState) { 72 super.onCreate(savedInstanceState); 73 setContentView(R.layout.main); 74 75 Spinner spinner = (Spinner) findViewById(R.id.spinner); 76 ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource( 77 this, R.array.planets_array, android.R.layout.simple_spinner_item); 78 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); 79 spinner.setAdapter(adapter); 80 } 81 </pre> 82 <p>After the {@code main.xml} layout is set as the content view, the {@link 83 android.widget.Spinner} widget is captured from the layout with {@link 84 android.app.Activity#findViewById(int)}. The {@link 85 android.widget.ArrayAdapter#createFromResource(Context,int,int) createFromResource()} method then 86 creates a new {@link android.widget.ArrayAdapter}, which binds each item in the string array 87 to the initial appearance for the {@link android.widget.Spinner} (which is how each item will 88 appear in the spinner when selected). The {@code 89 R.array.planets_array} ID references the {@code string-array} defined above and the 90 {@code android.R.layout.simple_spinner_item} ID references a layout for the standard spinner 91 appearance, defined by the platform. Then {@link 92 android.widget.ArrayAdapter#setDropDownViewResource(int)} is called to define the appearance for 93 each item when the widget is opened ({@code simple_spinner_dropdown_item} is 94 another standard layout defined by the platform). Finally, the {@link android.widget.ArrayAdapter} 95 is set to associate all of its items with the {@link android.widget.Spinner} by calling {@link 96 android.widget.AdapterView#setAdapter(T)}.</p> 97 </li> 98 99 <li>Now create a nested class that implements {@link 100 android.widget.AdapterView.OnItemSelectedListener}. This will provide a callback method that will 101 notify your application when an item has been selected from the {@link 102 android.widget.Spinner}. Here's what this class should look like: 103 <pre> 104 public class MyOnItemSelectedListener implements OnItemSelectedListener { 105 106 public void onItemSelected(AdapterView<?> parent, 107 View view, int pos, long id) { 108 Toast.makeText(parent.getContext()), "The planet is " + 109 parent.getItemAtPosition(pos).toString(), Toast.LENGTH_LONG).show(); 110 } 111 112 public void onNothingSelected(AdapterView<?> parent) { 113 // Do nothing. 114 } 115 } 116 </pre> 117 <p>The {@link android.widget.AdapterView.OnItemSelectedListener} requires the {@link 118 android.widget.AdapterView.OnItemSelectedListener#onItemSelected(AdapterView,View,int,long) 119 onItemSelected()} and {@link 120 android.widget.AdapterView.OnItemSelectedListener#onNothingSelected(AdapterView) 121 onNothingSelected()} callback methods. The former is called when an item from the {@link 122 android.widget.AdapterView} is selected, in which case, a short {@link android.widget.Toast} 123 message displays the selected text; and the latter is called when a selection disappears from the 124 {@link android.widget.AdapterView}, which doesn't happen in this case, so it's ignored.</p> 125 </li> 126 127 <li>Now the {@code MyOnItemSelectedListener} needs to be applied to the {@link 128 android.widget.Spinner}. Go back to the {@link android.app.Activity#onCreate(Bundle) onCreate()} 129 method and add the following line to the end: 130 <pre> 131 spinner.setOnItemSelectedListener(new MyOnItemSelectedListener()); 132 </pre> 133 <p>This creates a new anonymous instance of the {@code MyOnItemSelectedListener} and sets it as the 134 listener for the {@link android.widget.Spinner}.</p> 135 </li> 136 137 <li>Run the application.</li> 138 </ol> 139 <p>It should look like this:</p> 140 <img src="images/hello-spinner.png" width="150px" /> 141 142 143 <h3>Resources</h3> 144 <ul> 145 <li>{@link android.R.layout}</li> 146 <li>{@link android.widget.ArrayAdapter}</li> 147 <li>{@link android.widget.Spinner}</li> 148 </ul> 149 150
