0
379
ViewsAndroid Jetpack Compose Trying to Align a Text inside a Box
I created a box and inside it i created an Image and Text. And I set content alignment of the box as TopStart but the issue is the text is not aligning properly relative to the image. horizontally is ok but vertically it looks like it has some kind of padding but i tried to set padding to 0 but the result is still the same.
even aligning it at bottom start it set higher couple of pixels than the image
Box(contentAlignment = Alignment.TopStart,) {
Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = "",
modifier = Modifier.size(125.dp),
colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground)
)
Text(text = "4",
color = MaterialTheme.colors.primary,
fontSize = 44.sp,
textAlign = TextAlign.Center
)
}
2 answers
Answer question0
You need to use the .align() modifier on your Text inside the Box to center/position it. e.g. Text(..., modifier = Modifier.align(Center), ..).
Alternatively, you can make your text fill up the entire Box (by adding .fillMaxSize() to it) and the use the textAlign property.
0
seems i need to use BasicTextField to remove the upper and lower extra padding, it is something related to Material Desgin Layout decoration.
i just used modifier offset to fix my issue by aligning it correctly