Popup Menus and Dropdowns in Jetpack Compose

Popup menus are essential for contextual options and dropdowns. Jetpack Compose provides built-in composables for both use cases.

Basic Dropdown Menu

@Composable
fun SimpleDropdown() {
    var expanded by remember { mutableStateOf(false) }
    var selectedText by remember { mutableStateOf("Option 1") }

    Box(modifier = Modifier.fillMaxSize()) {
        Button(onClick = { expanded = !expanded }) {
            Text(selectedText)
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = {
                    selectedText = "Option 1"
                    expanded = false
                }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = {
                    selectedText = "Option 2"
                    expanded = false
                }
            )
        }
    }
}

Exposed Dropdown Menu

For form inputs:

@Composable
fun ExposedDropdownExample() {
    var expanded by remember { mutableStateOf(false) }
    var selectedOption by remember { mutableStateOf("") }
    val options = listOf("Android", "iOS", "Web")

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = it }
    ) {
        TextField(
            value = selectedOption,
            onValueChange = { selectedOption = it },
            label = { Text("Platform") },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
            },
            modifier = Modifier.menuAnchor()
        )

        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            options.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = {
                        selectedOption = option
                        expanded = false
                    }
                )
            }
        }
    }
}

Custom Popup Menu

@Composable
fun CustomPopupMenu() {
    var offset by remember { mutableStateOf(IntOffset(0, 0)) }

    Box {
        Button(onClick = { /* Show popup */ }) {
            Text("Menu")
        }

        Popup(
            offset = offset,
            onDismissRequest = { /* Close popup */ }
        ) {
            Surface(
                shape = RoundedCornerShape(4.dp),
                shadowElevation = 4.dp
            ) {
                Column(modifier = Modifier.padding(8.dp)) {
                    Text("Custom Option 1")
                    Text("Custom Option 2")
                }
            }
        }
    }
}

Popups and dropdowns provide compact solutions for options and selections.

---

8 Android app templates available on Gumroad