Android Jetpack Compose Trying to Align a Text inside a Box-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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