Creating A DropDown List Using Spinner In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop the cross-platform and multi-platform apps. (Ex. Windows phone, Android, iOS) in Xamarin platform, where code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Spinner is a widget similar to a dropdown list to select the items.

Prerequisites

• Visual Studio 2015 Update 3

The steps, given below are required to be followed in order to create a DropDown list, using Spinner in Android app, using Visual Studio 2015.

Step1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).

 

 

Step 2

After opening the New project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app; a name (Ex:sample) and give path of your project. Click OK.

 

 

Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and source in your project.

Now, select Resource-->Layout-->double click to open main.axml page. You need to select the source to write XAML code.

If you want design, choose the designer Window and you can design your app.

 

 

Step 4

Afterwards, open the main.axml file and it will open the main page designer. In this page, you can design, as per the page type you want.

 

 

Now, delete the default hello world button.

Go to the source panel and you can see the button coding. You need to delete it.

Afterwards, delete XAML code. Now, delete C# button action code.

Go to the MainActivity.cs page. You need to delete the button code.

Step 5

Now, go to the toolbox Window in the toolbox Window and get all the types of the tools and control. You will go to the toolbox Window. Now, scroll down and you will see all tools the and controls.

You need to drag and drop the TextView.

 

 

 

Step 6

You need to drag and drop the Spinner.

 

Step 7

Now, go to the properties Window. You need to edit Spinner Id value and prompt value (Ex:android:id="@+id/spinner" android:prompt="@string/car_prompt).

 

 

Step 8

In this step, edit the TextView text Value (EX: android:text="@string/car_prompt").

 

Step 9

In this step, go to the Main.axml page Source Panel. Note the Id value and prompt value.

 

Main.axml

<TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="10dip"
   android:text="@string/car_prompt" />
<Spinner
   android:id="@+id/spinner"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:prompt="@string/car_prompt" />

Step 10

In this step, open the String.xml page. Go to Solution Explorer-->Resource-->values-->String.xml.

 

 

Step 11

After opening the String.xml file, write XML code, given below.

 

String.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="car_prompt">Choose a Car</string>
   <string-array name="car_array">
   <item>Scorpio</item>
   <item>xylo</item>
   <item>Innovo</item>
   <item>Benz</item>
   <item>BMW</item>
   <item>Audi</item>
   <item>Jaguar</item>
   <item>ferrari</item>
</string-array>
</resources>

 

 

Step 12

Now, go to the MainActivity.cs page. Write the code, given below.

MainActivity.cs

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.car_array, Android.Resource.Layout.SimpleSpinnerItem);
    adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);
    spinner.Adapter = adapter;
}
private void spinner_ItemSelected(object sender, AdapterView.ItemSelectedEventArgs e) {
    Spinner spinner = (Spinner) sender;
    string toast = string.Format("Selected car is {0}", spinner.GetItemAtPosition(e.Position));
    Toast.MakeText(this, toast, ToastLength.Long).Show();
}

 

Step 13

If you have Android Virtual device, run the app on it, else connect your Android phone and run the app on it.

Simply, connect your phone and go to Visual Studio. The connected phone will show up in the Run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.

 

Output

After a few seconds, the app will start running on your phone. You can click the dropdown list.

 

 

  

Show the dropdown list. You can choose any car.

 

 

 

You will see the selected car.

Summary

Thus, this was the process of creating a dropdown list, using Spinner, using Visual Studio 2015 Update 3.