DropdownMenu Padding

Question

In the making of a dropdown menu in compose, I ran across a problem where my DropdownMenu will always fillMaxWidth as given in the modifier. my goal is to add padding so it will match the content of the screen, however adding padding to the modifier did not work...

@Composable
fun PriorityDropDown(
    priority: Priority,
    onPrioritySelected: (Priority) -> Unit
) {

    var expanded by remember { mutableStateOf(false) }
    val dropDownIconAngle: Float by animateFloatAsState(targetValue = if (expanded) 0f else -90f)

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.background)
            .height(PRIORITY_DROPDOWN_HEIGHT)
            .clickable { expanded = true }
            .border(
                width = 1.dp,
                shape = MaterialTheme.shapes.small,
                color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Canvas(
            modifier = Modifier
                .size(PRIORITY_INDICATOR_SIZE)
                .weight(1.5f),
            onDraw = {
                drawCircle(color = priority.color)
            }
        )

        Text(
            text = priority.name,
            style = MaterialTheme.typography.subtitle2,
            modifier = Modifier.weight(8f)
        )

        IconButton(
            onClick = { expanded = true },
            modifier = Modifier.weight(2f)
        ) {
            Icon(
                imageVector = Icons.Filled.ArrowDropDown,
                contentDescription = stringResource(R.string.drop_down_arrow),
                modifier = Modifier
                    .alpha(ContentAlpha.medium)
                    .rotate(dropDownIconAngle)
            )
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
        ) {
            // ...
        }
    }
}

What it's like without padding:

What it's like with hardcoding .fillMaxWidth(fraction = 0.942f)

It isn't clear what you want. Do you want the dropdown menu items and its container to align like you've shown in the second image? If so, it's not working? — Johann, Nov 12 '21 at 08:36
Does this answer your question? [How to control DropDownMenu position in Jetpack Compose](https://stackoverflow.com/questions/68728375/how-to-control-dropdownmenu-position-in-jetpack-compose) — Phil Dukhov, Nov 12 '21 at 08:44
as I said, the second picture is with hardcoded code, using a fraction. its not a viable solution — Emek Cohen, Nov 12 '21 at 08:50

score 11 · Accepted Answer · answered Nov 12 '21 at 09:00

adding var rowSize by remember { mutableStateOf(Size.Zero) }

to the Row modifier adding:

.onGloballyPositioned { layoutCoordinates ->
    rowSize = layoutCoordinates.size.toSize()
}

Then to the DropDown Modifier:

.width(with(LocalDensity.current) { rowSize.width.toDp() })

solved the problem

DropdownMenu Padding

1 Answers1