Android Spinner or Drop Down List

Total Views : 159
Zoom In Zoom Out Read Later Print

Spinners provide an easy way to select one value from a values set. In the default state, a spinner shows its currently selected value or first element from the set. Touching the spinner view displays a dropdown menu (list) with all other available values, from which the user can select an option he/she needs.

This tutorial will give you hands-on experience in using Spinner as a drop-down menu in your Android application, it is used to display multiple fields to the user and allows to select one of them,  passing data using android bundle and then showing a popup notification using android toast.

We will create a simple android application that consists of a simple spinner that allows the user to selecting an item from a drop-down list. We will display static data in the spinner defined in a list. Selecting an item from spinner (drop-down) would display a toast message.

Android Spinner

Android Spinner is just a drop-down list similar to seen in other programming languages such as in HTML websites.

In Android, Spinner is used to selecting one value from a set of values. In the default state, a spinner shows its currently selected value or we can set one in our code during initializing of spinner view.  Touching the spinner view displays a dropdown menu (list) with all other available values, from which the user can select an option he/she needs.

Step #1 

1.1 Creating XML Layout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".SecondActivity"
        tools:showIn="@layout/activity_main" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:text="Select Country :"
            android:layout_marginBottom="5dp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/grey_40" />

        <Spinner
            android:id="@+id/spinner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="200dp"
            android:text="SUBMIT"
            android:id="@+id/button"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="100dp"
            android:textColor="@color/white"
            android:background="@color/colorPrimary"
            android:textStyle="bold" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
1.2 Java code for the first screen

MainActivity.java

package com.prodevsblog;


import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity  {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        init();
    }

    void init() {

        // Spinner Drop down elements
        List<String> categories = new ArrayList<>();
        categories.add("Item Row 1");
        categories.add("Item Row 2");
        categories.add("Item Row 3");
        categories.add("Item Row 4");
        categories.add("Item Row 5");
        categories.add("Item Row 6");


        // Spinner element
        final Spinner spinner = findViewById(R.id.spinner);


        ArrayAdapter<String> dataAdapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, categories);

        dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        // attach data adapter to spinner
        spinner.setAdapter(dataAdapter);


        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                String item = parent.getItemAtPosition(position).toString();

                Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });

        (findViewById(R.id.button)).setOnClickListener(v -> {
            Intent intent= new Intent(MainActivity.this, SecondActivity.class);
            intent.putExtra("data",String.valueOf(spinner.getSelectedItem()));
            startActivity(intent);
        });
    }
}
1.3 Second Screen XML code

activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="10dip"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".SecondActivity"
        tools:showIn="@layout/activity_main"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pro Devs"
            android:layout_gravity="center_horizontal"
            android:id="@+id/txtData"/>

    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
1.4 Java code for the second screen

SecondActivity.java

package com.prodevsblog;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextWatcher;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class SecondActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        init();
    }

    void init() {

        String data = getIntent().getStringExtra("data");
        ((TextView) findViewById(R.id.txtData)).setText(data);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_setting, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        } else {
            Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
        }
        return super.onOptionsItemSelected(item);
    }
}

ScreenShots

2.1 First Screen

2.2 

2.3

You can download the android project from below link.

See More

Latest Photos