CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Emek Cohen
Emek Cohen

Reputation: 283

DropdownMenu Padding

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)

Upvotes: 7

Views: 4949

Answers (2)

Rafael Neves
Rafael Neves

Reputation: 11

Based on Emek answer, you can play with the BoxWithConstrains and maxWidth:

BoxWithConstraints(
    modifier = Modifier.fillMaxWidth(),
) {
    DropdownMenu(
        expanded = true,
        onDismissRequest = { expanded = false },
        modifier = Modifier.width(with(LocalDensity.current) { maxWidth })
    ) { /* ... */ }
}

Upvotes: 1

Emek Cohen
Emek Cohen

Reputation: 283

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

Upvotes: 15

Related Questions