Learning Xamarin–Spinner Control

By October 1, 2013Xamarin
[Please see the Table of Contents for this series.]

Spinner OpenIn this post, I’ll explore how you might add a Spinner control to your application.  Spinner is one of dozens of controls available to Xamarin.Android applications.  With the latest versions of Xamarin for Visual Studio and Xamarin Studio, adding controls has become very easy – simply a matter of dragging them on to the design surface and setting their properties (though you can still create them directly in XML if you like).

The spinner control, as you can see in the illustration, offers a scrollable list of what are essentially RadioButtons. When you make a selection the spinner is closed and the selection is reflected in a TextBox, as shown in an illustration below.

To get started, fire up Visual Studio and create a new Android application named SpinnerDemonstration.  Open the Resources Folder and right-click on the Layout folder. Choose Add->New Item->Android Layout and name it spinner.axml.

Open the toolbox and scroll down to spinner. Drag it onto the design surface.  Switch over to source view and notice that a Spinner widget has been added.  Change its id to bookSpinner

 

<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/bookSpinner" />

Below the spinner drag or add via the HTML a TextView widget, setting its height and width and text as shown,

<TextView
android:id="@+id/bookTextView"
android:layout_width="350px"
android:layout_height="40px"
android:text="Ready…" />

Switch back to design view. You should see Item 1 and below that “Ready…”

Adding the Logic

Open Activity1.cs and rename the class from Activity1 to SpinnerActivity (make sure the file is renamed as well). 

Delete the count private member variable and all the code after SetContentView. Change the target on SetContentView from Main to spinner,

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

SetContentView(Resource.Layout.spinner);

Add three private membrer variables to the class,

public class SpinnerActivity : Activity
{
private Spinner books;
private TextView textView;
private ArrayAdapter<String> adapter;

The first two will hold references to the widgets in spinner.axml, the third to an adapter that will allow us to add items to the spinner.  Add the logic for this below the call to SetContentView,

books = FindViewById<Spinner>(Resource.Id.bookSpinner);
textView = FindViewById<TextView>(Resource.Id.bookTextView);
adapter = new ArrayAdapter<string>(this,
Android.Resource.Layout.SimpleSpinnerDropDownItem);

With this in place, we need only set the Adapter property of the spinner to the adapter we just created,

books.Adapter = adapter;

We can now add books to the spinner through the adapter,

adapter.Add("Please choose");
adapter.Add("As I Lay Dying");
adapter.Add("War and Peace");
adapter.Add("The Brothers Karamazov");
adapter.Add("Anathem");
adapter.Add("Cryptonomicon");
adapter.Add("Parting the Waters");
adapter.Add("Dr. Sleep");
adapter.Add("Macbeth");
adapter.Add("The Stranger");

Notice that the first item added says “Please choose” and acts as a prompt to the user.  In production code you’ll want to check to see if the user has made a choice by testing for the string “Please choose”

The spinner has an ItemSelected event, which we can set to an event handler,

books.ItemSelected +=
new EventHandler<AdapterView.ItemSelectedEventArgs>(
ItemSelectedHandler);

This allows us to respond to a selection by writing the name of the selected book into the textView control using the member variable textView,

void ItemSelectedHandler(
object sender,
AdapterView.ItemSelectedEventArgs e)
{
textView.Text = Convert.ToString(adapter.GetItem(e.Position));
}

When the user clicks on a book, the spinner collapses and the chosen book is displayed in the textView,

Spinner Closed Cropped

Observations

All of this felt very natural to a .NET programmer. The work flow and the logic was very similar to working with Web Forms, WPF or Windows Phone.  The syntax was a bit different, but there were no significant surprises.  This flattens the learning curve and allows for more intuitive leaps when creating Xamarin.Android applications. 

About the Author

JesseJesse Liberty is a Master Consultant for Falafel Software, an author and he creates courses for Pluralsight.    Liberty  hosts the popular Yet Another Podcast and his blog is required reading. He was a Senior Evangelist for Microsoft,  a XAML Evangelist for Telerik, a Microsoft MVP, Distinguished Software Engineer at AT&T; Software Architect for PBS and Vice President of Information Technology at Citibank. Jesse can be followed on twitter at @JesseLiberty

The following two tabs change content below.
  • WHAMSY KRYSHNA

    hey Jesse ..,, Is it possible to implement Spinner in Xaml in xamarin Studio? If so please help me out…..!!!!!!!!!