Android 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
)
}

![Box-Preview][1]


[1]:

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.

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

You can check according to here:

@Composable
fun MainScreen() {
.
.
Box(modifier = Modifier.size(height = 90.dp, width = 290.dp)) {
Text("TopStart", Modifier.align(Alignment.TopStart))
Text("TopCenter", Modifier.align(Alignment.TopCenter))
Text("TopEnd", Modifier.align(Alignment.TopEnd))

Text("CenterStart", Modifier.align(Alignment.CenterStart))
Text("Center", Modifier.align(Alignment.Center))
Text(text = "CenterEnd", Modifier.align(Alignment.CenterEnd))

Text("BottomStart", Modifier.align(Alignment.BottomStart))
Text("BottomCenter", Modifier.align(Alignment.BottomCenter))
Text("BottomEnd", Modifier.align(Alignment.BottomEnd))
}
}




[![enter image description here][1]][1]


[1]: