I have this notification row that has some action ...
# compose
j
I have this notification row that has some action text details on the left, and a column on the right with accept/reject buttons. Code snippets in replies The problem is that the buttons on the right are being squished if the text on the left is too wide, even though I have the
Modifier.weight(1f, false)
for the content on the right. How do I make sure that the buttons are fully rendered, and any content on the left wraps accordingly?
To answer your question, you need to set a weight on the content that need to be measured at last, which is the text in your case.
j
Accept/Reject buttons
Copy code
Column(
    verticalArrangement = Arrangement.SpaceAround,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier.fillMaxHeight()
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .clip(AppTheme.shapes.circleShape)
            .background(AppTheme.colors.caption)
            .clickable(onClick = acceptOnClick)
            .padding(AppTheme.dimensions.paddingSmall)
    ) {
        SmallIcon(
            imageVector = Icons.Default.Check,
            contentDescription = "Accept",
            tint = AppTheme.colors.confirm
        )
    }
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .clip(AppTheme.shapes.circleShape)
            .background(AppTheme.colors.caption)
            .clickable(onClick = rejectOnClick)
            .padding(AppTheme.dimensions.paddingSmall)
    ) {
        SmallIcon(
            imageVector = Icons.Default.Close,
            contentDescription = "Reject",
            tint = AppTheme.colors.deny
        )
    }
}
Notification Row
Copy code
Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = <http://Alignment.Top|Alignment.Top>,
    modifier = modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Min)
        .padding(end = AppTheme.dimensions.paddingSmall)
) {
    Row() {
        ... notification text ...
    }
    if (sideContent != null) {
        Row(modifier = Modifier.weight(1f, false)) {
            sideContent() // Where side content is the accept/reject buttons
        }
    }
}
Oops I was not aware of that, thanks for letting me know. For future reference, if I want one thing to be weighted in a row/column, would I always have to weight everything else in that row/column as well?
a
No, you don't need to. Just set weights on the children that need to be measured after all unweighted children.
j
Awesome, thanks 👍