CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Faysal Ahmet
Faysal Ahmet

Reputation: 1283

Android Jetpack Compose Trying to Align a Text inside a Box

I created a Box containing an Image and Text. With Box contentAlignment set to TopStart, the Text is not aligning properly with the Image. Horizontally, things look ok, but there is unexpected vertical padding (even after setting it 0).

Similarly, BottomStart alignment sets the Text a few pixels higher 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

Upvotes: 35

Views: 48376

Answers (5)

Ahmad Aghazadeh
Ahmad Aghazadeh

Reputation: 17131

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

Upvotes: 6

sameer_701
sameer_701

Reputation: 21

Before aligning the content inside the box, the box size should be defined.

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

Upvotes: 2

canerkaseler
canerkaseler

Reputation: 7468

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

Upvotes: 32

Faysal Ahmet
Faysal Ahmet

Reputation: 1283

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

Upvotes: 0

Adib Faramarzi
Adib Faramarzi

Reputation: 4054

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.

Upvotes: 19

Related Questions