Jeff
09/10/2021, 10:16 AMBox(contentAlignment = Alignment.Center,
modifier = Modifier
.background(colorResource(id = R.color.green_700), shape = CircleShape)
.layout { measurable, constraints ->
// Measure the composable
val placeable = measurable.measure(constraints)
//get the current max dimension to assign width=height
val currentHeight = placeable.height
var heightCircle = currentHeight
if (placeable.width > heightCircle)
heightCircle = placeable.width
//assign the dimension and the center position
layout(heightCircle, heightCircle) {
// Where the composable gets placed
placeable.placeRelative(
0,
(heightCircle - currentHeight) / 2
)
}
}) {
Text(
modifier = Modifier
.padding(1.dp)
.align(Alignment.Center)
.defaultMinSize(4.dp),
text = chatUser.user.unRead.toString(),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.caption,
color = Color.White,
)
}
Albert Chang
09/10/2021, 10:28 AMJeff
09/10/2021, 10:29 AMAlbert Chang
09/10/2021, 10:33 AMplaceable.place(
(heightCircle - placeable.width) / 2,
(heightCircle - currentHeight) / 2
)
PS. it's a good habit to use variable names that describe their usage exactly.Jeff
09/10/2021, 11:01 AMTobias Suchalla
09/10/2021, 11:54 AMsize
and fontSize
):
val size = 24.dp
val fontSize = 12.sp
Box(
modifier = Modifier
.background(colorResource(id = R.color.green_700), CircleShape)
.size(size),
contentAlignment = Alignment.Center
) {
Text(
modifier = Modifier.padding(end = 1.dp), // otherwise slightly off-center
text = chatUser.user.unRead.toString(),
fontSize = fontSize,
style = MaterialTheme.typography.caption,
color = Color.White,
)
}
Albert Chang
09/10/2021, 1:00 PMChris Sinco [G]
09/13/2021, 6:51 PMcontentAlignment
in your Box
?