DropdownMenu Padding

Viewed 852

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)

1 Answers

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

Related