In modern Android development, Jetpack Compose has simplified UI creation with its declarative approach. Today, we’ll look into creating a dropdown menu in Jetpack Compose using Material3 components: ExposedDropdownMenuBox and ExposedDropdownMenu. These components provide a convenient way to implement dropdowns that can be used for various selections in your app.

Prerequisites

Ensure that you have the following dependencies in your app build.gradle file for Jetpack Compose with Material3:

1
2
3
4
5

// get the latest version, use the android studio Projet Structure Dialog to get the dependecies
implementation("androidx.compose.material3:material3:<latest_version>")

// my version
implementation("androidx.compose.material3:material3:1.3.0")

Make sure to replace <latest_version> with the most recent version of the Compose Material3 library.

Step 1: Understanding ExposedDropdownMenuBox and ExposedDropdownMenu

• ExposedDropdownMenuBox: A container that holds a text field and a dropdown menu. It automatically aligns the dropdown under the text field.
• ExposedDropdownMenu: A composable that displays the actual dropdown menu with items. These components work together to create a seamless dropdown experience in your Compose app.

Step 2: Creating the Dropdown Menu

Let’s start with an example where we will create a dropdown that allows users to select an item from a list of options.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

ExposedDropdownMenuBox(
        expanded = expanded, // this is val expanded by remember {mutableStateOf(false)}
        onExpandedChange = { expanded = !expanded },
        modifier = modifier
    ) {
        OutlinedTextField(
            readOnly = true,
            value = selectedValue, // the value that user will select, it is remember {mutableStateOf("")}
            onValueChange = {}, // keep this empty
            label = { Text(text = label) },
            trailingIcon = {
	            // this will automatically handle the trailing arrow icon
                ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
            },
            colors = OutlinedTextFieldDefaults.colors(),
            modifier = Modifier
                .menuAnchor()
                .fillMaxWidth()
        )

        ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            options.forEach { option: String ->
                DropdownMenuItem(
                    text = { Text(text = option) },
                    onClick = {
                        expanded = false
                        // here update that selected value
                        onValueChangedEvent(option)
                    }
                )
            }
        }
	}

Step 3: Putting It All Together

Incorporating this dropdown into your Compose app is simple. You can place the DropdownMenuExample composable wherever you need the dropdown functionality. Whether it’s for selecting categories, sorting options, or filtering data, dropdown menus are a great UI component.

Conclusion

Jetpack Compose makes it easy to implement custom dropdown menus using ExposedDropdownMenuBox and ExposedDropdownMenu. With a declarative UI approach, you can quickly create a smooth and intuitive experience for users. This blog demonstrated how to create a simple dropdown, but the flexibility of Compose allows for even more complex use cases as needed.

Happy Composing! 🎨