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.
I hope this tutorial to create dropdown menu in Jetpack compose is useful for you.
