Is there an easy way to display a collection of `DropdownMenuItem` s where one has a selection state...

# compose

[Jeff Jackson]

Is there an easy way to display a collection of DropdownMenuItem s where one has a selection state (check mark)?

[Chris Sinco [G]]

Not sure what you mean by easy but DropdownMenuItem has a content slot so you are free to put whatever you want on it based on state.

[Chris Sinco [G]]

Do you have a mockup of what you are trying to achieve?

[Jeff Jackson]

enum class City(val title: String) {
    NewYork("New York"),
    London("London"),
    Paris("Paris"),
    Munich("Munich");
}

class MenuTestViewModel: ViewModel() {
    var city by mutableStateOf(City.London)
}

@Composable
fun MenuTest(viewModel: MenuTestViewModel = MenuTestViewModel()) {
    Scaffold (
        topBar = {
            TopAppBar(
                title = { Text(text = viewModel.city.title) },
                actions = {
                    OverflowMenu(viewModel = viewModel)
                }
            )
        }
    ) {
    }
}

@Composable
fun OverflowMenu(viewModel: MenuTestViewModel) {
    var expanded by remember { mutableStateOf(false) }
    
    Button(onClick = {
        expanded = true
    } ) {
        Icon(Icons.Filled.MoreVert, "")
        DropdownMenu(
            expanded = expanded, 
            onDismissRequest = { expanded = false }
        ) {
            City.values().forEach {
                DropdownMenuItem(
                    onClick = {
                        viewModel.city = it
                        expanded = false

                    }
                ) {
                    val alpha = if (it == viewModel.city) 1f else 0f
                    Icon(Icons.Filled.Check, "", modifier = Modifier.alpha(alpha))
                    Box(modifier = Modifier.width(8.dp))
                    Text(it.title)
                }
            }
        }
    }
}

[Chris Sinco [G]]

Your approach is a typical way to do it, albeit minor nits with using Box with width versus a Spacer. How do you feel about this approach?

[Jeff Jackson]

I don’t like it. I can’t get a good layout inside the menu itself. Longer titles get wrapped and I don’t see how to control that. I couldn’t get Spacer to work at all. And it’s a total hack to have to set the alpha of the Icon in order to get the spacing of that right.

[Chris Sinco [G]]

For the Check icon, you can use that alpha approach on the Icon, or use a conditional to hide/show within a Box. Either way, the Box or Icon should have a Modifier.requiredSize(24.dp) or whatever size you want. This should fix the title issues.

[Chris Sinco [G]]

It seems the way DropdownMenuItem is implemented, the intrinsic size is not picking up that the Icon should always be some size. That is why the title is wrapping.

[Chris Sinco [G]]

This also fixes the Spacer issue

[Chris Sinco [G]]

Turns out there's a known bug on the icon sizing specifically when used in DropdownMenu: https://issuetracker.google.com/issues/198206454