Android Jetpack Compose Trying to Align a Text inside a Box

Question

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

See how [text drawing works](https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font) — Phil Dukhov, Jan 07 '22 at 04:31

score 16 · Answer 1 · answered Jan 07 '22 at 07:41

16

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.

answered Jan 07 '22 at 07:41

Adib Faramarzi

3,798
3
29
44

I will try your suggestion when I can. Thanks – Faysal Ahmet Jan 07 '22 at 07:57
I tried using both methods you mentioned but none worked. The modifier align is same as text Align property. And i can't use fillmaxsize because it would fill the whole screen not the whole box – Faysal Ahmet Jan 07 '22 at 16:43
1

Have you added the modifier to the `Text`? Also you can try `contentAlignment = Alignment.Center`. If that doesn't fix it, its your `Box` is the exact size as your text (so they match up, regardless of the alignment). – Adib Faramarzi Jan 07 '22 at 17:20
if i add the modifier android studio marks Tet as error . i tried with modifier alone it was same result. what baffles me the most id in the picture the horiizontal borders fot the number 4 are exact sizze with no extra space but the vertical borderss arehigher than the size of number 4 – Faysal Ahmet Jan 07 '22 at 19:09
1

even in content aligment center for the box the number 4 is centered but it is off center approx x +5dp y +5dp . so its off center leaning down and right a little . thats what is driving me insane – Faysal Ahmet Jan 07 '22 at 19:13
If `.align` isn't working, make sure you don't have `propagateMinConstraints` turned on, which can make your content take up more room than expected, messing up the alignment. – frodo2975 Jul 07 '23 at 21:09

score 9 · Answer 2 · answered Dec 01 '22 at 19:43

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

Ahmad Aghazadeh · Answer 3 · 2023-07-26T11:47:19.283

1

We can set the Modifier.fillMaxWidth().fillMaxHeight() for the box to solve this problem.

    Box(modifier =
    Modifier.fillMaxWidth()
        .fillMaxHeight()
        ,contentAlignment = Alignment.Center) {
        Text(text = "Tap")
    }

edited Jul 26 '23 at 11:47

answered Jul 24 '23 at 15:03

Ahmad Aghazadeh

16,571
12
101
98

score 0 · Answer 4 · answered Jan 08 '22 at 11:02

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

answered Jan 08 '22 at 11:02

Faysal Ahmet

743
2
4
10

Android Jetpack Compose Trying to Align a Text inside a Box

4 Answers4

Linked