Android Spinner Tutorial and Examples

Table of Contents

Custom Android Spinner:

Android Spinner Tutorial and Examples - NSC - Full tutorials for beginners step by step free

Android Spinner is a view which display items and users have to select only one item from that. Now to question is arises that we can do this with the help of a Android Radio button than why we need this spinner? So I want to tell you that Radio button occupies more space which depend on the number of Radio button used and also it will display the all items side by side where as in case of Spinner some of item is visible and can be fit in less space.

A Spinner uses a ArrayAdapter class to store the data list, here in this example we will display the Language list in the spinner so let’s see an example:

First of all add a Spinner in your layout file like this:

<Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"/>

First of all create a Language ArrayAdapter in your MainActivity.java like this way:

String[] language = { "Hindi", "English", "Korean", "Japanese", "Other"};

Complete xml layout code is:

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

    <Spinner
        android:id="@+id/chooseLanguage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"/>
</LinearLayout>

The MainActivity.java code is here:

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends Activity implements AdapterView.OnItemSelectedListener {

    String[] language = { "Hindi", "English", "Korean", "Japanese", "Other"};

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

        Spinner spinnerLanguage = (Spinner) findViewById(R.id.chooseLanguage);
        spinnerLanguage.setOnItemSelectedListener(this);
        ArrayAdapter arrayAdapter = new ArrayAdapter(this,android.R.layout.simple_spinner_item,language);
        arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinnerLanguage.setAdapter(arrayAdapter);
    }
    @Override
    public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
        Toast.makeText(this,language[i] , Toast.LENGTH_SHORT).show();
    }

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

    }
}

Android Spinner Tutorial and Examples - NSC — Android Spinner Example

Android Spinner is a view which display items and users have to select only one item from that. — Spinner Dropdown list data

Custom Android Spinner: #

Yes it is very easy to make custom Spinner, first of all add a border box arround to spinner. Create a drawable file using below code and name it boxborder or as you want.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="5dp" />
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent" />
</shape>

<Spinner
        android:id="@+id/chooseLanguage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/boxborder"   //   border box arround the spinner
        android:popupBackground="@drawable/gradeint"   //set the gradient or color to spinner item background
        android:layout_margin="50dp"/>

If you want to change the color of text and size in spinner than create a seprate xml layout as showin in the below screenshot and name it as spinner_item.xml and add below code to this spinner_item.xml file.

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:gravity="start"
    android:textColor="#FFFFFF"
    android:padding="5dip" />

Now replace the below code with lin number 23 & 24 in MainActivity.java which is give above:

ArrayAdapter arrayAdapter = new ArrayAdapter(this,R.layout.spinner_item,language);
arrayAdapter.setDropDownViewResource(R.layout.spinner_item);

Add the below code into your activity_main.xml file to make custom spinner layout

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20sp"
        android:orientation="horizontal">

        <Spinner
            android:id="@+id/chooseLanguage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_gravity="center"
            android:background="@drawable/boxborder"
            android:popupBackground="@drawable/gradeint"
            android:gravity="center"
            android:layout_marginStart="5dp"
            android:spinnerMode="dropdown" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_gravity="center"
            android:src="@drawable/down"
            android:contentDescription="@string/app_name" />

    </RelativeLayout>
</LinearLayout>

It will looks like the below image: