How to Create an Exposed Dropdown Menu in Jetpack Compose

Summary

This article provides a step-by-step guide on how to create an Exposed Dropdown Menu in Jetpack Compose.

Abstract

The article begins by introducing the concept of creating an Exposed Dropdown Menu using Jetpack Compose. It then proceeds to provide a detailed code walkthrough, starting with the creation of the GenderDropdownMenu composable and the initialization of the isExpanded and gender variables. The article then explains how to add the ExposedDropdownMenuBox and create a read-only TextField with an animated icon that shows when the dropdown is expanded. Finally, the article demonstrates how to create the ExposedDropdownMenu that holds a list of DropdownMenuItem.

Opinions

The author believes that creating an Exposed Dropdown Menu using Jetpack Compose is a valuable skill for developers.
The author encourages readers to stay updated on their latest content by following them and subscribing to the newsletter.
The author suggests that readers consider trying out the AI service they recommend, which provides the same performance and functions as ChatGPT Plus(GPT-4) but at a more cost-effective price.

Code

We will create a gender dropdown menu so, let’s start by creating the GenderDropdownMenu composable and initialize the isExpanded and the gender variables.

@Composable
fun GenderDropdownMenu() {
    var isExpanded by remember {
        mutableStateOf(false)
    }

    var gender by remember {
        mutableStateOf("")
    }
}

Now add the ExposedDropdownMenuBox. This enables us to anchor the dropdown box to the TextField that we will create in a moment.

ExposedDropdownMenuBox(
    expanded = isExpanded,
    onExpandedChange = { newValue ->
        isExpanded = newValue
    }
) { /*TODO*/ }

In the ExposedDropdownMenuBox we will create a TextField that will be read-only otherwise, we won’t be able to trigger the dropdown menu when we click on it. Also, we will use the ExposedDropdownMenuDefaults that gives us an animated icon that shows when the dropdown is expanded and the default TextField colors.

TextField(
    value = gender,
    onValueChange = {},
    readOnly = true,
    trailingIcon = {
        ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
    },
    placeholder = {
        Text(text = "Please select your gender")
    },
    colors = ExposedDropdownMenuDefaults.textFieldColors(),
    modifier = Modifier.menuAnchor()
)

Below the TextField we will create the ExposedDropdownMenu which holds a list of DropdownMenuItem.

ExposedDropdownMenu(
    expanded = isExpanded,
    onDismissRequest = { 
        isExpanded = false 
    }
) {
    DropdownMenuItem(
        text = {
            Text(text = "Male")
        },
        onClick = {
            gender = "Male"
            isExpanded = false
        }
    )
    DropdownMenuItem(
        text = {
            Text(text = "Female")
        },
        onClick = {
            gender = "Female"
            isExpanded = false
        }
    )
    DropdownMenuItem(
        text = {
            Text(text = "Other")
        },
        onClick = {
            gender = "Other"
            isExpanded = false
        }
    )
}

I hope this article helped in your development journey. Remember to stay updated on my latest content by following me and subscribing to the newsletter. Thank you for reading!

How to Create an Exposed Dropdown Menu in Jetpack Compose

Code

Stackademic