2

I have a surface (which acts like a card) and at the right top corner I have menu dots. The idea is that when a user taps the menu dots a drop down menu should appear.

The issue I have is that the dropdownmenu is only shown if the surface is large enough to display the dropdown inside of the surface. So I need a way to draw the dropdown menu outside the bounds of the surface.

This is what I'm trying to accomplish: Final design

I have also tried putting the surface inside a box, and the adding the menu dots outside of the surface (even though this feels very hacky) but also couldn't get that to work.

Just a side note, these cards are in a lazycolumn, so there is a chance that the dropdown could go over the next item in the column as well. I just have no idea how to implement something like that.

Here is some example code of what I have tried:

@Composable
fun DropDownDemo() {
var expanded by remember { mutableStateOf(false) }

Surface(
    modifier = Modifier.height(50.dp),
    shape = RoundedCornerShape(dimen_xs),
    color = MaterialTheme.colorScheme.surface,
    elevation = 2.dp
) {
    Row(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = "Some text")
        Box {
            IconButton(
                onClick = { expanded = !expanded }
            ) {
                Icon(Icons.Default.MoreHoriz, "We want more")
            }

            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false },
            ) {
                DropdownMenuItem(onClick = { expanded = false }) {
                    Text("Delete")
                }
                DropdownMenuItem(onClick = { expanded = false }) {
                    Text("Save")
                }
            }

        }
    }
}
}

And this is the result when surface is too small: Result dropdown when surface is too small

And this is the result when the surface is large enough (which doesn't help me): Result dropdown when surface is large enough

Nico Bos
  • 185
  • 1
  • 10
  • If this is just about the Preview, I've seen the preview doesn't work very well with dropdowns. But didn't have that problem with the real app – Iván Jul 30 '23 at 17:16

0 Answers0