Spinner

PDF for offline use

Let us know how you feel about this

Translation Quality


0/250

last updated: 2017-05

Spinner is a widget similar to a drop-down list for selecting items.

In this tutorial, you'll create a simple spinner widget that displays a list of planets. When one is selected, a toast message will display the selected item.

  1. Start a new project named HelloSpinner.

  2. Open the Resources/Layout/Main.axml file and insert the following:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:padding="10dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:text="@string/planet_prompt"
        />
        <Spinner 
            android:id="@+id/spinner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:prompt="@string/planet_prompt"
        />
    </LinearLayout>

    Notice that the TextView's android:text attribute and the Spinner's android:prompt attribute both reference the same string resource. This text behaves as a title for the widget. When applied to the Spinner, the title text will appear in the selection dialog that appears upon selecting the widget.

  3. Create a Strings.xml file in Resources/Values and edit the file to look like this:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="planet_prompt">Choose a planet</string>
        <string-array name="planets_array">
            <item>Mercury</item>
            <item>Venus</item>
            <item>Earth</item>
            <item>Mars</item>
            <item>Jupiter</item>
            <item>Saturn</item>
            <item>Uranus</item>
            <item>Neptune</item>
        </string-array>
    </resources>

    The <string> element defines the title string referenced by the TextView and Spinner in the layout above. The <string-array> element defines the list of strings that will be displayed as the list in the Spinner widget.

  4. Now open the MainActivity.cs file and insert the following code for the OnCreate() method:

    protected override void OnCreate (Bundle bundle)
    {
        base.OnCreate (bundle);
    
        // Set our view from the "Main" layout resource
        SetContentView (Resource.Layout.Main);
    
        Spinner spinner = FindViewById<Spinner> (Resource.Id.spinner);
    
        spinner.ItemSelected += new EventHandler<AdapterView.ItemSelectedEventArgs> (spinner_ItemSelected);
        var adapter = ArrayAdapter.CreateFromResource (
                this, Resource.Array.planets_array, Android.Resource.Layout.SimpleSpinnerItem);
    
        adapter.SetDropDownViewResource (Android.Resource.Layout.SimpleSpinnerDropDownItem);
        spinner.Adapter = adapter;
    }

    After the Main.axml layout is set as the content view, the Spinner widget is captured from the layout with FindViewById<>(int). The CreateFromResource() method then creates a new ArrayAdapter, which binds each item in the string array to the initial appearance for the Spinner (which is how each item will appear in the spinner when selected). The Resource.Array.planets_array ID references the string-array defined above and the Android.Resource.Layout.SimpleSpinnerItem ID references a layout for the standard spinner appearance, defined by the platform. Then SetDropDownViewResource is called to define the appearance for each item when the widget is opened (SimpleSpintem is another standard layout defined by the platform). Finally, the ArrayAdapter is set to associate all of its items with the Spinner by setting the Adapter property.

  5. Now provide a callback method that will notify your application when an item has been selected from the Spinner. Here's what this method should look like:

    private void spinner_ItemSelected (object sender, AdapterView.ItemSelectedEventArgs e)
    {
        Spinner spinner = (Spinner)sender;
    
        string toast = string.Format ("The planet is {0}", spinner.GetItemAtPosition (e.Position));
        Toast.MakeText (this, toast, ToastLength.Long).Show ();
    }

    When an item is selected, we cast the sender to a Spinner so we can access the its items. Using the Position property on the ItemEventArgs, we can find out the text of the selected object, and use it to display a Toast.

  6. Run the application.

It should look like this:

Screenshot example of Spinner with Mars selected as the planet

Resources

Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.