Stylianos Gakis
03/07/2022, 3:49 PMCard(...) {
Column(...) {
Badge()
Text(padding(8.dp))
}
}
And I can imitate what I am going for this doing something like
Card(...) {
Column(...) {
Badge()
Text(padding(8.dp))
CompositionLocalProvider(LocalContentAlpha provides 0f) {
// This has the exact same height making the Text() look centered
Badge()
}
}
}
Which feels super hacky, especially considering I am inflating Badge again for no reason just to get the exact same space at the bottom too.
First pic shows what it looks like, second how I want it to look like, but preferably without the extra Badge() hack
Any ideas on this? I’ve tried going with a Box() too but that doesn’t really help either since it lets the children overlap which isn’t what I am going forlayout {}
where I can measure the badge and then just add a spacer at the bottom equal to the height it would take, but this feels like extra extra for what I am going forLayout{}
since I don’t feel super comfortable with it so I may be doing things wrong!)
@Composable
fun CenteredTextWithBadge(
centeredText: @Composable (modifier: Modifier) -> Unit,
badge: (@Composable (modifier: Modifier) -> Unit)? = {},
) {
Layout(
content = {
centeredText(Modifier.layoutId("centeredText"))
badge?.invoke(Modifier.layoutId("badge"))
},
) { measurables, constraints ->
val textPlaceable = measurables.first { it.layoutId == "centeredText" }.measure(constraints)
val badgePlaceable = measurables.firstOrNull { it.layoutId == "badge" }?.measure(constraints)
val textHeight = textPlaceable.height
val badgeHeight = badgePlaceable?.height ?: 0
val maxWidth = constraints.maxWidth
val layoutHeight = textHeight + (badgeHeight * 2)
layout(maxWidth, layoutHeight) {
badgePlaceable?.place(
x = (maxWidth - badgePlaceable.width) / 2,
y = 0,
)
textPlaceable.place(
x = (maxWidth - textPlaceable.width) / 2,
y = badgeHeight,
)
}
}
}
CenteredTextWithBadge(
centeredText = { modifier ->
Text(
text = text,
style = MaterialTheme.typography.subtitle2,
textAlign = TextAlign.Center,
modifier = modifier.padding(8.dp)
)
},
badge = if (badge != null) {
{ modifier ->
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(
text = badge,
style = MaterialTheme.typography.caption,
textAlign = TextAlign.Center,
modifier = modifier
)
}
}
} else {
null
}
)
Where text: String, badge: String?
Tunji Dahunsi
03/07/2022, 7:29 PMBox
? You can center the each align within Box
independently, and then put the Box
in the Card
Stylianos Gakis
03/07/2022, 7:38 PMbadge
changes. So if Badge
becomes super tall for whatever reason they will overlapZach Klippenstein (he/him) [MOD]
03/08/2022, 1:07 AMTash
03/09/2022, 1:58 AMbadge
then a custom layout makes sense because you’re programmatically ensuring the two always change in tandem