Android Jetpack Compose Trying to Align a Text inside a Box

user_17851467 0
Viewed 4732

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

android-jetpack-compose kotlin android
2 Answers

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.

user_4503560

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

user_178514670
Related