How to add DropDown Menu in Android Jetpack Compose

By Mohammed Rashid •  November 19th, 2022 • 

A dropdown menu allows users to choose an option from a list of options. Let’s learn how to add a simple dropdown menu in Jetpack Compose.

You can create dropdown menu using DropDownMenu and DropDownMenuItem. The DropDownMenu is very similar to the popover menu. Instead of DropDownMenu, I am using ExposedDropdownMenuBox in this example. Combining ExposedDropdownMenu with ExposedDropdownMenu and DropdownMenuItem for the desired result.

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    color = MaterialTheme.colors.background,
                    modifier = Modifier.padding(20.dp)
                ) {
                    DropdownMenuExample()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun DropdownMenuExample() {
    val options = listOf("Male", "Female", "Trans", "Other", "Unspecified")
    var expanded by remember { mutableStateOf(false) }
    var selectedOption by remember { mutableStateOf(options[0]) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = {
            expanded = !expanded
        }
    ) {
        OutlinedTextField(
            readOnly = true,
            value = selectedOption,
            onValueChange = { },
            label = { Text("Gender") },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(
                    expanded = expanded
                )
            },
            colors = ExposedDropdownMenuDefaults.textFieldColors()
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = {
                expanded = false
            }
        ) {
            options.forEach { selectionOption ->
                DropdownMenuItem(
                    onClick = {
                        selectedOption = selectionOption
                        expanded = false
                    }
                ) {
                    Text(text = selectionOption)
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        DropdownMenuExample()
    }
}

Remember that ExposedDropdownMenuBox is experimental now. In the above example, I am showing a gender dropdown. The dropdown expands when a user touches the OutlinedTextField. The dropdown closes itself when a drop down item is clicked. The selectedOption variable stores the selected value.

Jetpack Compose drodown menu

I hope this tutorial to create dropdown menu in Jetpack compose is useful for you.

Mohammed Rashid

Keep Reading