CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack
Shreyash.K
Shreyash.K

Reputation: 1138

Drop down menu clips/shrinks items Jetpack Compose

I am creating a dropdown menu where the items contain a text element and an icon (a spacer in between); but only the first text is shown completely. The icon is only visible when there is another item taking more space.

@Preview(showSystemUi = true)
@Composable
fun MyScreen() {
    Box(Modifier.fillMaxSize(), Alignment.Center) {

        Box() {
            var expanded by remember { mutableStateOf(false) }

            IconButton(onClick = { expanded = !expanded }) {
                Icon(imageVector = Icons.Default.MoreVert, contentDescription = null)
            }

            DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
                MyMenuItem("item 1")           // Icon visible
                MyMenuItem("item 2")           // Icon visible
                MyMenuItem("item 3 long text") // Icon width shrunk to 0
                MyMenuItem("item 4 long te")   // Icon visible but shrunk
            }

        }
    }
}

@Composable
fun MyMenuItem(text: String) {
    DropdownMenuItem(onClick = { }) {
        Text(text)
        Spacer(modifier = Modifier.weight(1f))
        Icon(imageVector = Icons.Default.Check, contentDescription = null) // <-- Icon
    }
}

Note :

  1. I have also tried using Row() and Surface() in place of DropdownMenuItem() but the result is similar.
  2. Giving width to the MyMenuItem() works; but I want it to size itself automatically based on content.

Upvotes: 3

Views: 2429

Answers (2)

Rashko Dimitrov
Rashko Dimitrov

Reputation: 11

Try with a leading/trailing Icon like this:

DropdownMenuItem(
            text = { Text("New") },
            onClick = { onNewClicked() },
            trailingIcon = {
                Icon(imageVector = Icons.TwoTone.RestartAlt, contentDescription = "New Item")
            }
        )

Upvotes: 1

Phil Dukhov
Phil Dukhov

Reputation: 87864

Generally speaking, to create such a layout you just need to apply Modifier.weight(1f) to your Text.

You also need Modifier.width(IntrinsicSize.Max) for your Column to make the width equal to the widest item, but in your case it's already built into DropdownMenu.

But then this bug pops up, which doesn't allow you to properly size your MyMenuItem with Icon inside. Please put a star to draw more attention to it.

As a temporary solution until this bug is fixed, you can specify the size of the icon manually, like this:

// copied from the source code as it's internal
const val MaterialIconDimension = 24f

@Composable
fun MyMenuItem(text: String) {
    DropdownMenuItem(
        onClick = { }
    ) {
        Text(text, Modifier.weight(1f))
        Icon(
            imageVector = Icons.Default.Check, 
            contentDescription = null, 
            modifier = Modifier.size(MaterialIconDimension.dp)
        )
    }
}

Result:

Upvotes: 6

Related Questions