Android Kotlin Styling Spinner Drop Down

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 , In the previous tutorial we have seen example of spinner as dropdown and dialog .

In this tutorial we will how to style the dropdown view of spinner widget.

String

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

<resources>
    <string name="app_name">AndroidCustomSpinner</string>
    <string-array name="mode">
        <item>option0</item>
        <item>option1</item>
        <item>option2</item>
        <item>option3</item>
        <item>option4</item>
        <item>option5</item>
        <item>option6</item>
        <item>option7</item>
    </string-array>
    <string name="prompt">Select Mode</string>
</resources>

Main 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 

<?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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:padding="30dp">

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Custom Spinner"
              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:layout_marginTop="16dp"
            android:id="@+id/spinner03"
    />
</LinearLayout>

Styling Spinner Item

We will define two xml layout for spinner item

1. Custom XML Layout For Selected Item

The below xml layout is applied to selected spinner (or when spinner is not in dropdownView) .

file:  simple_spinner_item.xml

<?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="18sp"
        android:gravity="start"
        android:padding="10dip"/>

2. Custom XML Layout for DropDownViewResource

The below xml layout is applied to spinner item , when it is in dropdownview .

file:  simple_spinner_drop_down.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/text1"
        style="@style/spinnerDropDownItemStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:padding="10dip"
        android:singleLine="true"/>

Style

Add the below Style inside style.xml

   <style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
        <item name="android:textStyle">italic</item>
        <item name="android:background">#79ACD6</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#FFFFFF</item>
    </style>

Applying Above Defined Custom XML Layout to Spinner

val stringArr: Array<String> = resources.getStringArray(R.array.mode);
val dataAdapter = ArrayAdapter<String>(this, R.layout.simple_spinner_item, stringArr)
dataAdapter.setDropDownViewResource(R.layout.simple_spinner_drop_down)
spinner03.adapter = dataAdapter

Main Activity

file : MainActivity.kt

package com.tutorialsbuzz.androidcustomspinner

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

        //custom spinner
        val stringArr: Array<String> = resources.getStringArray(R.array.mode);
        val dataAdapter = ArrayAdapter<String>(this, R.layout.simple_spinner_item, stringArr)
        dataAdapter.setDropDownViewResource(R.layout.simple_spinner_drop_down)
        spinner03.adapter = dataAdapter


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

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

    }

}

Download

Spinner Related

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