Using Spinner in Kotlin XML: Android Drop-Down List Guide

In Android development, providing users with selectable options is a common requirement. The Spinner widget, a staple in Android’s UI arsenal, offers a straightforward way to present a drop-down list of items, allowing users to pick one. While Jetpack Compose offers modern alternatives, many applications still rely on XML-based layouts, and understanding how to effectively use Spinner with Kotlin is essential.

What is a Spinner?

A Spinner is an Android UI element that provides a drop-down list, enabling users to select one option from a set of choices. It is akin to a <select> tag in HTML, making it a familiar component for many developers.

Why Use Spinner in Android XML?

• Familiarity: Traditional Android developers are very familiar with the Spinner widget.
• Simplicity: It is straightforward to implement for basic selection requirements.
• Compatibility: Well-supported across older Android versions.

How to Implement Spinner in Kotlin with XML

Implementing a Spinner involves a few steps: defining the Spinner in XML, preparing data for the Spinner, and handling user selections in Kotlin.

Step 1: Add the Spinner Widget in XML

First, declare the Spinner in your layout XML file. Provide an android:id, android:layout_width, and android:layout_height, as well as any additional styling attributes as needed.

<Spinner
    android:id="@+id/my_spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp" />

Step 2: Prepare Data for the Spinner

Prepare the data that will populate the Spinner. This can be a simple array of strings defined directly in the Kotlin code or retrieved from a resource file.

val items = arrayOf("Option 1", "Option 2", "Option 3", "Option 4")

Alternatively, you can define your array in res/values/strings.xml:

<string-array name="spinner_items">
    <item>Option 1</item>
    <item>Option 2</item>
    <item>Option 3</item>
    <item>Option 4</item>
</string-array>

Step 3: Populate the Spinner with Data

In your Activity or Fragment, populate the Spinner with the prepared data using an ArrayAdapter. This adapter bridges the data source and the Spinner view.

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.Spinner
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

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

        // Get the Spinner view
        val spinner: Spinner = findViewById(R.id.my_spinner)

        // Data source options
        val items = resources.getStringArray(R.array.spinner_items) //Using String Array from XML resources
       

        // Create an ArrayAdapter using the string array and a default spinner layout
        val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, items)

        // 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

        // Set an item selection listener
        spinner.setOnItemSelectedListener(object : AdapterView.OnItemSelectedListener {
        override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
            // An item was selected. You can retrieve the selected item using
            val selectedItem = parent.getItemAtPosition(position).toString()
            Toast.makeText(this@MainActivity, "Selected: $selectedItem", Toast.LENGTH_SHORT).show()
        }

        override fun onNothingSelected(parent: AdapterView<*>) {
            // Another interface callback
        }
        })

        
    }
}

Step 4: Handle User Selection

To react to user selections, implement the OnItemSelectedListener interface and attach it to the Spinner.

import android.view.View
import android.widget.AdapterView

spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
        val selectedItem = parent.getItemAtPosition(position).toString()
        // Handle the selected item, such as displaying a toast or updating a value
        Toast.makeText(this@MainActivity, "Selected: $selectedItem", Toast.LENGTH_SHORT).show()
    }

    override fun onNothingSelected(parent: AdapterView<*>) {
        // Callback invoked when the selection disappears from view
    }
}

Advanced Spinner Customization

The basic Spinner can be customized further by using custom layouts and adapters, allowing for more complex and visually appealing dropdowns.

Using Custom Layouts

Create custom XML layouts for the Spinner‘s items to display more than just text. For instance, include an icon alongside the text.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp">

    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:src="@drawable/ic_option" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#000" />

</LinearLayout>

Creating a Custom Adapter

To use the custom layout, create a custom adapter that inflates the layout for each item in the Spinner.

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.ImageView
import android.widget.TextView
import androidx.annotation.LayoutRes
import androidx.annotation.NonNull

class CustomSpinnerAdapter(context: Context, @LayoutRes private val layoutResource: Int, private val items: List<SpinnerItem>) :
    ArrayAdapter<SpinnerItem>(context, layoutResource, items) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createViewFromResource(position, convertView, parent)
    }

    override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createViewFromResource(position, convertView, parent)
    }

    private fun createViewFromResource(position: Int, convertView: View?, parent: ViewGroup): View {
        val view: View = convertView ?: LayoutInflater.from(context).inflate(layoutResource, parent, false)

        val item: SpinnerItem? = getItem(position)

        val itemIcon = view.findViewById<ImageView>(R.id.item_icon)
        val itemText = view.findViewById<TextView>(R.id.item_text)

        itemIcon.setImageResource(item?.icon ?: R.drawable.ic_option)
        itemText.text = item?.text

        return view
    }
}

data class SpinnerItem(val icon: Int, val text: String)

Implement the SpinnerItem data class and use your custom adapter:

// Sample Data
val items = listOf(
    SpinnerItem(R.drawable.ic_option1, "Option 1"),
    SpinnerItem(R.drawable.ic_option2, "Option 2"),
    SpinnerItem(R.drawable.ic_option3, "Option 3")
)

val adapter = CustomSpinnerAdapter(this, R.layout.custom_spinner_item, items)
spinner.adapter = adapter

Conclusion

Using the Spinner widget in Android XML with Kotlin provides a straightforward method for offering selectable options to users. By following these steps, developers can effectively implement and customize Spinner components in their applications, ensuring both usability and visual appeal.