Android Spinner Example

This article will show you examples about how to use android.widget.Spinner to show item selection list in android application. The selection list can be shown in either drop down list or popup dialog.

1. Basic Spinner Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/8W2UkSh4lSM

In above gif image, there are two Spinners. The First one is just demo a basic Spinner. To implement it, you just need to add below xml in your android app layout file.

<Spinner
    android:id="@+id/emailSpinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    android:entries="@array/email_array"
    android:spinnerMode="dropdown"
    android:dropDownSelector="@color/colorGreen"
    android:prompt="@string/title_choose_email"
    android:popupBackground="@color/colorYellow"/>

2. Spinner Properties Introduce.

  1. spinnerMode: The value is either dropdown or dialog. The default value is dropdown. It controls how to show the spinner item list.
  2. entries : A string array variable defined in app / res / values / arrays.xml file like below. Then you can display those array string as spinner items.
    <resources>
        <string-array name="email_array">
            <item>[email protected]</item>
            <item>[email protected]</item>
            <item>[email protected]</item>
            <item>[email protected]</item>
            <item>[email protected]</item>
            <item>[email protected]</item>
            <item>[email protected]</item>
            <item>[email protected]</item>
        </string-array>
    
        <string-array name="country_array">
            <item>China</item>
            <item>Japan</item>
            <item>India</item>
            <item>Korea</item>
            <item>United Kingdom</item>
            <item>United State</item>
        </string-array>
    </resources>
  3. dropDownSelector : Color or drawable resource id. It will be shown as one item background when user select an item.
  4. popupBackground : Color or drawable resource id. It will be shown as the item list background.
  5. prompt : This is a string variable which will be shown in the dialog title. It is only effective when spinnerMode value is dialog.

3. Spinner Example Source Code.

In this example, android.widget.AdapterView.OnItemSelectedListener is used to listen user select Spinner item event.

3.1 activity_spinner.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="8dp">

    <!-- Basic Spinner Example-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">

        <TextView
            android:id="@+id/textViewBasicSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Basic Spinner Example"
            android:textSize="15dp"
            android:background="@color/colorGreen"/>

        <Spinner
            android:id="@+id/emailSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:entries="@array/email_array"
            android:spinnerMode="dropdown"
            android:dropDownSelector="@color/colorGreen"
            android:prompt="@string/title_choose_email"
            android:popupBackground="@color/colorYellow"/>

    </LinearLayout>

    <!-- Custom Spinner Example -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">

        <TextView
            android:id="@+id/textViewCustomizeSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Custom Spinner Example"
            android:textSize="15dp"
            android:background="@color/colorGreen"/>

        <Spinner
            android:id="@+id/customSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:spinnerMode="dialog"/>

    </LinearLayout>

    <!--Custom Spinner Adapter Buttons-->
    <Button
        android:id="@+id/customAdapterButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Custom Adapter" />

</LinearLayout>

3.2 SpinnerActivity.java

package com.dev2qa.example;

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

public class SpinnerActivity extends AppCompatActivity {

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

        // Get custom Spinner object.
        final Spinner customSpinner = (Spinner)findViewById(R.id.customSpinner);
        // Set on item select lister code.
        this.setSpinnerOnItemSelectListener(customSpinner);

        // Load spinner items in java code.
        this.customSpinner(customSpinner);

        // Get custom spinner adapter use text button.
        Button customSpinnerAdapterButton = (Button)findViewById(R.id.customAdapterButton);
        customSpinnerAdapterButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                customAdapter(customSpinner);
            }
        });
    }

    /* This method show you how to manipulate a Spinner use java code.
       Include customize it's items and listen it's select item event. */
    private void customSpinner(Spinner customSpinner)
    {
        // Get custom Spinner items array.
        String customSpinnerItemArr[] = getResources().getStringArray(R.array.country_array);
        // Set Spinner list items in array adapter..
        ArrayAdapter<String> customSpinnerItemArrAdaptor = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, customSpinnerItemArr);
        customSpinnerItemArrAdaptor.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        // Set Spinner adapter.
        customSpinner.setAdapter(customSpinnerItemArrAdaptor);
    }

    /* This method use a custom adapter to render Spinner items with image and text. */
    private void customAdapter(Spinner customSpinner)
    {
        // Set custom adapter in Spinner.
        customSpinner.setAdapter(new BaseAdapter() {
            @Override
            public int getCount() {
                return 10;
            }

            @Override
            public Object getItem(int i) {
                return String.valueOf(i);
            }

            @Override
            public long getItemId(int i) {
                return i;
            }

            @Override
            public View getView(int i, View view, ViewGroup viewGroup) {
                // Create a LinearLayout to contain image an text.
                LinearLayout itemView = new LinearLayout(SpinnerActivity.this);
                itemView.setOrientation(LinearLayout.HORIZONTAL);

                // Create an ImageView.
                ImageView imageView = new ImageView(SpinnerActivity.this);
                imageView.setImageResource(R.mipmap.ic_launcher);

                // Create a TextView.
                TextView textView = new TextView(SpinnerActivity.this);
                textView.setText(String.valueOf(i));
                textView.setTextSize(25);
                textView.setTextColor(Color.RED);

                // Add image and text in the item object.
                itemView.addView(imageView);
                itemView.addView(textView);

                return itemView;
            }
        });
    }

    // This method will implement on item select listener java code.
    private void setSpinnerOnItemSelectListener(Spinner customSpinner)
    {
        // Set Spinner on item select listener.
        customSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                // When item select.
                Object selectedItem = adapterView.getAdapter().getItem(i);
                AlertDialog alertDialog = new AlertDialog.Builder(SpinnerActivity.this).create();
                alertDialog.setMessage((String)selectedItem);
                alertDialog.show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {
                AlertDialog alertDialog = new AlertDialog.Builder(SpinnerActivity.this).create();
                alertDialog.setMessage("You select nothing.");
                alertDialog.show();
            }
        });
    }
}

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.