CODEWITHSUNDEEP
androidkotlinalignmentrowandroid-jetpack-compose
Saul
Saul

Reputation: 119

How to align two texts from different rows in Jetpack Compose

I have 3 texts in one row and then another three in another row inside a LazyColumn

image

I want to align the "text" in the center of the first row with "15.025" value in the second row

I've used

TextAlign.Center

on both of the Texts and

             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically

set this on the Row but it doesn't work. Any tips please?

I'm pretty new in Compose, sorry for the basic question.

Upvotes: 4

Views: 8762

Answers (2)

Saul
Saul

Reputation: 119

This is what I wanted to achieve and with the help of @Linh I did

enter image description here

Here's how I did it.

Column(Modifier.fillMaxSize()) {
    Row(Modifier.fillMaxWidth()) {
        Text(
            text = "Start",
            modifier = Modifier.weight(1.5f),
            textAlign = TextAlign.Start
        )
        Text(
            text = "Center",
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.Start
        )
        Text(
            text = "End",
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.End
        )
    }
}

Thanks again for the help.

Upvotes: 3

Linh
Linh

Reputation: 60913

You can use Modifier.weight to make the width of "left view" equals to the width of "right view". It will make the middle text on each row always center.

Row(Modifier.fillMaxWidth()) {
    Text(
        text = "Start",
        modifier = Modifier.weight(1f)
    )
    Text(
        text = "Center",
        textAlign = TextAlign.Center, // you can also fixed the width of center text
    )
    Text(
        text = "End",
        modifier = Modifier.weight(1f),
        textAlign = TextAlign.End
    )
}

If your text content is always short, you can also use Box to make the middle text always center.

Box(Modifier.fillMaxWidth()) {
    Text(text = "Start", modifier = Modifier.align(Alignment.CenterStart))
    Text(text = "Center", modifier = Modifier.align(Alignment.Center))
    Text(text = "End", modifier = Modifier.align(Alignment.CenterEnd))
}

Upvotes: 10

Related Questions