How to align two texts from different rows in Jetpack Compose

Solution 1:

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