Android Kotlin Spinner

Android Spinner Provides a quick way to select one value from a set , Touching the spinner displays all available value from which user can select one , Spinner has two different mode drop-down and dialog lets see with an example .




Project Detail
Project Name AndroidSpinner
Package com.tutorialsbuzz.androidspinner
Min Sdk Version 22
Target Sdk Version 28
Compile Sdk Version 28
Theme Theme.AppCompat.Light.DarkActionBar

1. String


Add string-array to string.xml , this will be used as entries for spinner

file : string.xml
<resources>
    <string name="app_name">AndroidSpinner</string>
 
    <string-array name="entries">
        <item>Option 1</item>
        <item>Option 2</item>
        <item>Option 3</item>
        <item>Option 4</item>
    </string-array>
 
    <string name="prompt">Select Mode</string>
 
</resources>


2. XML Layout


  1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
  2. Add Spinner Widget "AppCompatSpinner" to xml layout. 
  3. android:entries="@array/entries" is used to set the values for spinner 

file : activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:padding="30dp"
        android:orientation="vertical">

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Spinner As Drop Down"
              android:textSize="20sp"
              android:textStyle="bold"/>

    <androidx.appcompat.widget.AppCompatSpinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/entries"
            android:spinnerMode="dropdown"
            android:layout_marginTop="16dp"
            android:id="@+id/spinner01"
    />

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Spinner As Dialog"
              android:layout_marginTop="20dp"
              android:textSize="20sp"
              android:textStyle="bold"/>

    <androidx.appcompat.widget.AppCompatSpinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/entries"
            android:spinnerMode="dialog"
            android:prompt="@string/prompt"
            android:layout_marginTop="16dp"
            android:id="@+id/spinner02"
    />
</LinearLayout>


Spinner Mode


The Spinner Widget has two different mode

1. DropDown Mode

 By Default Spinner Widget will be in dropdown mode

android:spinnerMode="dropdown"      

     
2. Dialog Mode

 To display spinner as dialog

android:spinnerMode="dialog"

Note : when spinner is set to dialog mode the android:prompt="@string/prompt" property is used for settings the prompt of the dialog 



Settings onItemSelectedListerner for Spinner


 spinner01.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
                Toast.makeText(this@MainActivity, resources.getStringArray(R.array.entries)[position], Toast.LENGTH_SHORT)
                    .show()
            }

            override fun onNothingSelected(parent: AdapterView<*>?) {
            }
        }


2. Activity


file : MainActivity.kt
package com.tutorialsbuzz.androidspinner

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.AdapterView
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)

        //spinner as drop down
        spinner01.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
                Toast.makeText(this@MainActivity, resources.getStringArray(R.array.entries)[position], Toast.LENGTH_SHORT)
                    .show()
            }

            override fun onNothingSelected(parent: AdapterView<*>?) {
            }
        }

        //spinner as dialog
        spinner02.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
                Toast.makeText(this@MainActivity, resources.getStringArray(R.array.entries)[position], Toast.LENGTH_SHORT)
                    .show()
            }

            override fun onNothingSelected(parent: AdapterView<*>?) {
            }

        }
    }
}



Spinner Related
  1. Spinner DropDown With Image and Text
  2. Spinner as DropDown and Dialog
  3. Styling Spinner Drop Down

No comments:

Post a Comment