Skip to main content

How to implement cascading Spinners in Kotlin Android

How to implement cascading Spinners in Kotlin Android.

Here's a step-by-step tutorial on how to implement cascading spinners in Kotlin for Android.

Step 1: Create a new Android project​

Start by creating a new project in Android Studio. Choose an appropriate name and set the minimum SDK version to 21 or higher. Select an empty activity template for your project.

Step 2: Design the layout​

In the layout XML file, add two spinners and a text view. The first spinner will be used to select a category, and the second spinner will display the subcategories based on the selected category. The text view will display the selected subcategory.

<LinearLayout
    ...
    android:orientation="vertical">

    <Spinner
        android:id="@+id/categorySpinner"
        ... />

    <Spinner
        android:id="@+id/subcategorySpinner"
        ... />

    <TextView
        android:id="@+id/selectedSubcategoryText"
        ... />

</LinearLayout>

Step 3: Create data models​

Create two data models: Category and Subcategory. Each model will have an id and a name.

data class Category(val id: Int, val name: String)

data class Subcategory(val id: Int, val name: String)

Step 4: Populate the category spinner​

In the MainActivity class, create a list of categories and populate the category spinner with the category names.

val categories = listOf(
    Category(1, "Category 1"),
    Category(2, "Category 2"),
    Category(3, "Category 3")
)

val categorySpinner = findViewById<Spinner>(R.id.categorySpinner)
val categoryAdapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, categories.map { it.name })
categorySpinner.adapter = categoryAdapter

Step 5: Handle category selection​

When a category is selected, update the subcategory spinner with the corresponding subcategories.

categorySpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>, view: View?, position: Int, id: Long) {
        val selectedCategory = categories[position]
        val subcategories = getSubcategoriesForCategory(selectedCategory)
        
        val subcategorySpinner = findViewById<Spinner>(R.id.subcategorySpinner)
        val subcategoryAdapter = ArrayAdapter(this@MainActivity, android.R.layout.simple_spinner_item, subcategories.map { it.name })
        subcategorySpinner.adapter = subcategoryAdapter
    }

    override fun onNothingSelected(parent: AdapterView<*>) {
        // Do nothing
    }
}

Step 6: Get subcategories for category​

Define a function to retrieve the subcategories for a selected category. This function should return a list of Subcategory objects.

private fun getSubcategoriesForCategory(category: Category): List<Subcategory> {
    // Replace the logic here with your own implementation to retrieve subcategories based on the selected category
    return when (category.id) {
        1 -> listOf(
            Subcategory(1, "Subcategory 1.1"),
            Subcategory(2, "Subcategory 1.2"),
            Subcategory(3, "Subcategory 1.3")
        )
        2 -> listOf(
            Subcategory(4, "Subcategory 2.1"),
            Subcategory(5, "Subcategory 2.2")
        )
        3 -> listOf(
            Subcategory(6, "Subcategory 3.1"),
            Subcategory(7, "Subcategory 3.2"),
            Subcategory(8, "Subcategory 3.3"),
            Subcategory(9, "Subcategory 3.4")
        )
        else -> emptyList()
    }
}

Step 7: Display the selected subcategory​

When a subcategory is selected, update the text view with the selected subcategory name.

subcategorySpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>, view: View?, position: Int, id: Long) {
        val selectedSubcategory = subcategories[position]
        val selectedSubcategoryText = findViewById<TextView>(R.id.selectedSubcategoryText)
        selectedSubcategoryText.text = selectedSubcategory.name
    }

    override fun onNothingSelected(parent: AdapterView<*>) {
        // Do nothing
    }
}

That's it! You have successfully implemented cascading spinners in Kotlin for Android. Run the app on a device or emulator to see the cascading spinners in action.