https://kotlinlang.org logo
#compose
Title
# compose
j

Jeff Jackson

02/09/2022, 9:04 PM
Is there an easy way to display a collection of
DropdownMenuItem
s where one has a selection state (check mark)?
c

Chris Sinco [G]

02/10/2022, 4:52 PM
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.
Do you have a mockup of what you are trying to achieve?
j

Jeff Jackson

02/10/2022, 6:52 PM
Copy code
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)
                }
            }
        }
    }
}
c

Chris Sinco [G]

02/10/2022, 7:37 PM
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?
j

Jeff Jackson

02/11/2022, 4:46 PM
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.
c

Chris Sinco [G]

02/11/2022, 5:53 PM
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.
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.
This also fixes the Spacer issue
Turns out there's a known bug on the icon sizing specifically when used in DropdownMenu: https://issuetracker.google.com/issues/198206454
👍 1
3 Views