Android Spinner with Example in Kotlin

Android Spinner provides an option set, where the user can select any one of the options. Like a list of cities, in this case, a user can select the city. The advantage of Spinner is giving more option lists in less space.

The Default state of the spinner is shown currently selected value. The user has to touch the spinner to show the dropdown list of all available values and then touch (click) any one of values.

In this tutorial, you will learn the following:

1. Add a Spinner in XML resource layout file, and load the selection items via XML “values/strings” file also.
2. Add another Spinner in XML and load the selection items via code programmatically  (dynamically).
3. Get the value of selected spinners items, on the click button

You can set values in spinner in 2 ways:

First by using “android:entries” attributes in spinner widget.

Second, using ArrayAdapter, In both case we will use resource values string-array.

Let’s Build a Simple Example of Android Spinner

Step 1. Create new project “Build Your First Android App in Kotlin“

Step 2. Add string array resources in xml

Open “res/values/strings.xml” file, define the list of items that will display in Spinner (dropdown list).

File : res/values/strings.xml

<resources>
    <string name="app_name">Android Spinner</string>

    <string-array name="city_list">
        <item>Bangkok</item>
        <item>London</item>
        <item>Paris</item>
        <item>Singapore</item>
        <item>New York</item>
        <item>Istanbul</item>
        <item>Dubai</item>
        <item>Kuala Lumpur</item>
        <item>Hong Kong</item>
        <item>Barcelona</item>

    </string-array>
</resources>

Step 3. Add below code in “activity_main.xml” resource file

add 2 Spinners in the resource file and add id to both ,one spinner will have onClick attribute to call actions on user touch.

<?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"
    tools:context=".MainActivity">

    <!-- Dynamic -->

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_margin="10dp" />

    <!-- static -->

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/spinner"
        android:layout_margin="10dp"
        android:entries="@array/city_list" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="138dp"
        android:text="Get Values"
        android:onClick="getValues"/>

</RelativeLayout>

Step 4. Open the “MainActivity.kt” and add following code

call getValues function to get values of spinner and show in Toast message.

package `in`.eyehunt.androidspinner

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ArrayAdapter
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Create an ArrayAdapter
        val adapter = ArrayAdapter.createFromResource(this,
                R.array.city_list, android.R.layout.simple_spinner_item)
        // Specify the layout to use when the list of choices appears
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
        // Apply the adapter to the spinner
        spinner.adapter = adapter

    }

    fun getValues(view: View) {
        Toast.makeText(this, "Spinner 1 " + spinner.selectedItem.toString() +
                "\nSpinner 2 " + spinner2.selectedItem.toString(), Toast.LENGTH_LONG).show()
    }
}

Step 5. Now Run the application, in emulator or On you android device

Output screenshot Android Spinner example :

Download source code Android Spinner in kotlin

https://github.com/EyeHunts/AndroidSpinner

Do comment if you have any doubt and suggestion on this tutorial.

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 27: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin