Spinner in Android Example

A Spinner is one of the most commonly used tools in Android development. Because it has a name with a misleading nature, beginners are often wrong when they are asked about a spinner. After hearing the word “Spinner,” a layman would picture a spinning wheel (similar to the one we see when a video is buffering on YouTube) in his mind. However, an Android Spinner is very much different from that in terms of appearance and function both.

Now that you know how confusing this topic can be, especially for newcomers, it will be easier for you to understand how important learning about Spinner in Android is. Moreover, you will not face any difficulty while learning how to create a Spinner in Android from scratch.

Spinner in Android

In Android development, a spinner control allows a user to choose one from a set of items quickly and easily. It has proved to be a very handy UI (user interface) element for this reason, which is why we see it so often in Android applications these days. An Android Spinner fulfils its purpose of giving choices with the help of a drop down list.

In its default state, an Android Spinner shows a pre-selected default item. Clicking on the Spinner displays a drop down menu that shows all the available items to the user, from which he can select only one. An Android Spinner is particularly useful for Android developers when they have a lot of entries available but want the users to be able to select only one of them.

Examples of Spinner in Android

For those who still cannot visualize an Android Spinner in their minds, a few examples may help. A good example of a Spinner can be seen on the Gmail application. The Gmail app shows us a drop down menu to select only one out of a few options, such as reply and forward.

We also see an Android Spinner in many apps when we are making a new account. If the application wants the user to enter his country name, it uses a drop down menu that has all country names, out of which the user can select only one. Sometimes, this Spinner even shows a pre-selected default country name before the user starts interacting with this UI element.

In the same situation, an app also asks the user to enter his date of birth using a Spinner. In the same manner as before, this Spinner also shows a pre-selected default date of birth. The user, then, changes this date by using the drop down menus provided by the Spinner.

Spinner vs Progress Indicator

You must be wondering what that spinning thing is called. Although an appropriate name for that UI element should be Spinner, it is actually called a Progress Indicator. As the name suggests, a Progress Indicator shows progress. If you look up Progress Indicators, you’ll see that it has two types: determinate and indeterminate.

Determinate Progress Indicators are used when the progress time is known, so they show the progress and the time required to complete it. Indeterminate Progress Indicators are used when the waiting time is unknown, so they usually show an animation moving in circular motion until the progress finishes.

Your confusion is valid, and we respect it. Beginners will be happy know to that the word Spinner is not commonly used, even in material guidelines. Instead, only detailed usage of “drop-down” is seen. For some reason, the older graphical interface elements used the name “Spinner” for showing a vertical list of choices. So Android adopted the same term for this purpose; however, “drop-down” has become a more popular term than “Spinner” with time.

Spinner in Android Steps

Now that everything has been clarified, it is time for you to learn how a Spinner is used to create a drop down menu in Android.

First, open Android Studio, and create a new project as shown in our earlier tutorials. Name your project “Spinner.” Select a suitable package name for your project. We have used “com.androidaura.spinner” as our package name.

Now, open your MainActivity.java file to add the following code in it:

// MainActivity.java

package com.androidaura.spinner;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements
        AdapterView.OnItemSelectedListener {

    Spinner sp;

    String[] color = {"Red", "Blue", "Green", "Yellow"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sp = (Spinner) findViewById(R.id.spinner);
        sp.setOnItemSelectedListener(this);

        ArrayAdapter aa = new ArrayAdapter(this, android.R.layout.simple_spinner_item, color);
        aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        sp.setAdapter(aa);
    }

    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1, int position, long id) {
        Toast.makeText(getApplicationContext(), color[position], Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub
    }
} 

With this file, an Android developer is able to write his java code and define what his application would do. This special java class, known as Activity, will determine which layout is to be used in a given situation. In simpler words, if a layout is designed to have a button, a code in the activity would define what function the button will perform when it is clicked. Therefore, it is highly important to have this file and code. In our activity file, we have added our java code to display color names, such as blue, red and green, when the user taps on the Spinner.

After adding the code in your class file, open your activity_main.xml layout file to enter the following code in it:

// activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="100dp"
        android:layout_height="50dp"/>

</LinearLayout> 

With this file, a developer is able to control the appearance of his application. Coding in this file allows him to add different UI elements in his project. The code above shows that we have used a couple of widgets so that our project can have some specific features, such as vertical orientation, centralized text, width & height of spinner and so on. First of all, we have used the LinearLayout widget in order to arrange the layout of our project as per our requirements. This widget is used with a vertical orientation so that all the contents of our project are arranged in a vertical order. Other than that, we have used the Spinner widget in order to obtain a drop down menu. Along with this widget, we have set the spinner characteristics, such as its 50 dp height and 100 dp width.

After adding both the codes in their respective files, you will be ready to obtain your result. The above mentioned codes will give you an output that looks like this:

Output

spinner

spinner

That was all that a beginner needs to know about the Spinner widget in order to create a basic drop down menu from scratch. However, we would not recommend you to stop there. In fact, you must try and create even more stylized and sophisticated drop down menus from now on. The keys to achieving that feat are experimentation and practice.