How to Use Spinners with Arrays in Android Development Environment

Last week I was working in an Android application and I needed to create something like a “list” of options, to click and choose. The easiest way to create this kind of element, is using a Spinner. Let's do it with an example.

Imagine we are working in an application that asks the user for personal information -- Name, Age, Occupation...and “Favorite color” (yes, I know, it sounds stupid, but it's just to create an easy example). Well, we have a list of colors and the user has to choose one. How do we create that list of colors? How do we “attach” it to the spinner? In a spinner we can attach more than Arrays, we can attach “Cursors” (from the Database), but this will be explained in our next article.

First let me introduce how to work with arrays in Android.

We have two ways to create an Array in Android (Array->List of elements). One of them is create as we did in a pure Java code:

String colors[] = {"Red","Blue","White","Yellow","Black", "Green","Purple","Orange","Grey"};

And the “Android-way” is creating the Array in the “Resources” folder.

We need to create a file called “arrays.xml” in the /res/values/ folder. Here we will write an XML with the following structure.

<resources>

<string-array name="colors">

<item>Red</item>

<item>Blue</item>

<item>White</item>

<item>Yellow</item>

<item>Black</item>

<item>Green</item>

<item>Purple</item>

<item>Orange</item>

<item>Grey</item>

</string-array>

</resources>

We are going to use the “Android-way”, It's the cleanest way in my opinion. Here's a look at how to add this array to the Spinner.

In Android, as I have repeated so many times, there are two ways of creating User Interfaces: writing it in Java code, or in the other hand, using the XML resources. I always use XML as it's the cleanest and most organized method (we can easily create a 3-layers application). So, let's create our Spinner in the XML code.

We go inside the XML file we want to add the spinner in, and we put something like this...

…. <XML-Code> (Layouts, Widgets, Whatever)

<Spinner

android:id="@+id/myspinner"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:drawSelectorOnTop="true”

android:prompt="Favorite Color" />

…. </XML-Code> (Layouts, Widgets, Whatever)

If we have worked a bit with Android, some of these attributes are well known, attributes like “android:id”, “android:layout_width”... but there is at least one that is new for us:

android:prompt and maybe android:drawSelectorOnTop

android:prompt is just the title of the list of elements. It is a String and can be something like “Chose your color” or “Favorite Color” as I have written above.

android:drawSelectorOnTop in a “true” value, is just indicating that we are going to draw the selector on the top of the view. What is the meaning of this? Maybe playing with this value we can see the effects on the android screen. It's your homework...and mine!

Well once we have defined the Spinner in XML, let's work a bit in Java code:

Spinner hubSpinner = (Spinner) findViewById(R.id.myspinner);

We create a Spinner Class, using the view we created some lines above.

ArrayAdapter adapter = ArrayAdapter.createFromResource( this, R.array.colors , android.R.layout.simple_spinner_item); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

We create an ArrayAdapter to wrap our xml array (Array of colours) and we put some pre-defined styles.

hubSpinner.setAdapter(adapter);

And we set the adapter to the spinner.

Thats all! We have created our first spinner!! Any question or suggestions are welcome!