Spinner in Android is a quick way to select a single value from a given set of values. Spinner shows the currently selected value in its default state. When a user clicks a spinner it displays a dropdown list of items from where a user can select a different value. A spinner provides a quick and easy way to select one value from the given list of values.
Lets understand Spinner in Android with a step by step Example:
1- Make a new Android Studio project and name it “AndroidSpinner” and select KOTLIN as the default language for your project.
2- Go to activity_main.xml and first change your default layout from Constraint Layout to Relative Layout.
3- Then add a spinner in your activity_main.xml. layout_width should be “wrap_content” and layout_height should be “wrap_content”. Add marginTop of 100dp and and set layout_centerHorizontal=”true”. The id of our spinner is “spinner”.
|
1 2 3 4 5 6 7 |
<Spinner android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="100dp"/> |
4- After adding the spinner this is our final activity_main.xml
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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"> <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="100dp"/> </RelativeLayout> |
5- So, after completing activity_main.xml now we have to add some values in our strings.xml file to display in spinner. For doing this go to res –> values –> strings.xml. Here we create a String Array to display the values in our spinner.
|
1 2 3 4 5 6 7 8 9 10 |
<string-array name="cities"> <item>Mumbai</item> <item>California</item> <item>Karachi</item> <item>Las Vegas</item> <item>Ottawa</item> <item>Cairo</item> <item>London</item> <item>Melbourne</item> </string-array> |
6- The complete strings.xml file will be like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<resources> <string name="app_name">AndroidSpinner</string> <string-array name="cities"> <item>Mumbai</item> <item>California</item> <item>Karachi</item> <item>Las Vegas</item> <item>Ottawa</item> <item>Cairo</item> <item>London</item> <item>Melbourne</item> </string-array> </resources> |
Android Spinner
(MainActivity.kt)
7- So now in our MainActivity.kt we will populate the spinner and set a Toast message when a spinner item is clicked. We will make use of a Toast variable.
|
1 |
var toast: Toast? = null |
8- After that we define our Spinner View using findViewById and make use of our String array from our Strings.xml file. Then we populate our array items into the Spinner using an ArrayAdapter.
|
1 2 3 4 5 6 7 8 |
val cities = resources.getStringArray(R.array.cities) val spinner = findViewById<Spinner>(R.id.spinner) if (spinner != null) { val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, cities) spinner.adapter = adapter } |
9- To add a click listener on a single item in the spinner we will make use of AdapterView.OnItemSelectedListener interface because this interface has two callback methods. You must implement these methods otherwise you’ll face an error. When you implement AdapterView.OnItemSelectedListener interface you will see a red line error under your MainActivity class. Press ALT+ENTER and implement both methods to avoid errors.
|
1 |
class MainActivity : AppCompatActivity(), AdapterView.OnItemSelectedListener |
|
1 2 3 4 5 6 7 8 9 |
override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) { } override fun onNothingSelected(parent: AdapterView<*>?) { } |
10- We set a Toast message inside our onItemSelected function.
|
1 2 3 4 5 |
override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) { toast = Toast.makeText(this,"You Selected:\n "+parent?.getItemAtPosition(position),Toast.LENGTH_SHORT) toast?.show() } |
11- Finally you have to make use of setOnItemSelectedListener() on Spinner inside onCreate() function. Hence will specify the implementation of the interface.
|
1 |
spinner.onItemSelectedListener = this |
12- So here we complete our Spinner example. Here is the final MainActivity.kt class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
package com.example.androidspinner import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.AdapterView import android.widget.ArrayAdapter import android.widget.Spinner import android.widget.Toast class MainActivity : AppCompatActivity(), AdapterView.OnItemSelectedListener { var toast: Toast? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val cities = resources.getStringArray(R.array.cities) val spinner = findViewById<Spinner>(R.id.spinner) if (spinner != null) { val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, cities) spinner.adapter = adapter } spinner.onItemSelectedListener = this } override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) { toast = Toast.makeText(this,"You Selected:\n "+parent?.getItemAtPosition(position),Toast.LENGTH_SHORT) toast?.show() } override fun onNothingSelected(parent: AdapterView<*>?) { }} |
So, I hope now you understand Android Spinner after this Android Studio Spinner example. But if you face any difficulty regarding Spinner Android then you can ask in comments section below.
OUTPUT
More Android Posts