Android Spinner Tutorial/ Android Dropdown List Tutorial

0

This tutorial explains, how to create spinner layout, add values in dropdown list and user can select value from the dropdown menu.

Introduction

The Spinner is a ui-element as similar to dropdown list. A tap on spinner opens a dropdown menu with available values and from that list. We can easily select value from pre-defined set of values.





Create a New Project

Create a new Project in android Studio goto File ⇒ New ⇒ New Projects.

Creating Layout

We will create layout of spinner and also textview to display selected value of Spinner. Open activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="in.studytutorial.androidspinner.MainActivity">

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/spinner"
        android:gravity="left"
        android:layout_marginTop="10dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text"
        android:layout_centerInParent="true"
        android:textSize="18dp"
        android:textColor="#000000"/>
</RelativeLayout>

Android Spinner

Creating an Array List

We need to define SpineAdapter, to populate list in dropdown. We can provided values to SpinnerAdapter in various ways such as ArrayAdapter if values are stored in array or through CursorAdapter. We will use ArrayAdapter to provide list to SpinnerAdapter. Add the following code to your MainActivity.java file.

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    Spinner spinner;
    List<String> list;
    ArrayAdapter<String> SpinnerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner = (Spinner) findViewById(R.id.spinner);
        list = new ArrayList<String>(); // List of Items
        list.add("All State");
        list.add("New Delhi");
        list.add("Haryana");
        list.add("Bihar");
        list.add("Gujrat");
        list.add("Kerala");

        // Calling the ArrayAdapter with argument context, 
        // layout resource and list of items.
        SpinnerAdapter = new ArrayAdapter<String>
                (this, android.R.layout.simple_spinner_item, list){
            //By using this method we will define how 
           // the text appears before clicking a spinner
            public View getView(int position, View convertView,
                                ViewGroup parent) {
                View v = super.getView(position, convertView, parent);
                ((TextView) v).setTextColor(Color.parseColor("#E30D81"));
                return v;
            }
            //By using this method we will define 
            //how the listview appears after clicking a spinner
            public View getDropDownView(int position, View convertView,
                                        ViewGroup parent) {
                View v = super.getDropDownView(position, convertView,
                        parent);
                v.setBackgroundColor(Color.parseColor("#E30D81"));
                ((TextView) v).setTextColor(Color.parseColor("#ffffff"));
                return v;
            }
        };
        SpinnerAdapter.setDropDownViewResource(
             android.R.layout.simple_spinner_dropdown_item);
         // Set Adapter in the spinner
        spinner.setAdapter(SpinnerAdapter);  
    }
}

Android Spinner

Set Listener

When we will select an item from the dropdown list, we need to add listener for spinner, which call the setOnItemSelectedListener method. The setOnItemSelectedListener listens for selections of list of items.

 spinner.setOnItemSelectedListener(new 
           AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parentView, 
                       View selectedItemView, int position, long id) {
                // selected item in the list
                String state = parentView.getItemAtPosition(position).toString(); 
                ((TextView) findViewById(R.id.text)).setText(state);
            }
            @Override
            public void onNothingSelected(AdapterView<?> parentView) {
                // your code here
            }
        });

Android Spinner

Final Code

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    Spinner spinner;
    List<String> list;
    ArrayAdapter<String> SpinnerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner = (Spinner) findViewById(R.id.spinner);
        list = new ArrayList<String>(); // List of Items
        list.add("All State");
        list.add("New Delhi");
        list.add("Haryana");
        list.add("Bihar");
        list.add("Gujrat");
        list.add("Kerala");

        // Calling the ArrayAdapter with argument context, 
        //layout resource and list of items.
        SpinnerAdapter = new ArrayAdapter<String>
                (this, android.R.layout.simple_spinner_item, list){
            //By using this method we will define how 
           //the text appears before clicking a spinner
            public View getView(int position, View convertView,
                                ViewGroup parent) {
                View v = super.getView(position, convertView, parent);
                ((TextView) v).setTextColor(Color.parseColor("#E30D81"));
                return v;
            }
            //By using this method we will define 
            //how the listview appears after clicking a spinner
            public View getDropDownView(int position, View convertView,
                                        ViewGroup parent) {
                View v = super.getDropDownView(position, convertView,
                        parent);
                v.setBackgroundColor(Color.parseColor("#E30D81"));
                ((TextView) v).setTextColor(Color.parseColor("#ffffff"));
                return v;
            }
        };
        SpinnerAdapter.setDropDownViewResource(
                  android.R.layout.simple_spinner_dropdown_item);
      // Set Adapter in the spinner
        spinner.setAdapter(SpinnerAdapter); 
        spinner.setOnItemSelectedListener(new 
                   AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parentView, 
                       View selectedItemView, int position, long id) {
                // selected item in the list
                String state = parentView.getItemAtPosition(position).toString(); 
                ((TextView) findViewById(R.id.text)).setText(state);
            }
            @Override
            public void onNothingSelected(AdapterView<?> parentView) {
                // your code here
            }
        });
    }
}