Text Alignment in Jetpack compose

Question

In this attached image 'Tenth' text is not aligned with other text like 'Ninth' etc. How to align that with other text?

My current code:

fun ListItem(){
  Row{
      Text(prefix)
      Text(description)
     }
)

This function is getting called 10 times to create rows shown in image.

Answer 1

One alternative is measuring width of prefix texts and passing maximum width to ListItem

val density = LocalDensity.current

val textMeasurer = rememberTextMeasurer()

val prefixWidth by remember(prefix, prefix.size) {
    derivedStateOf {
        with(density) {
            prefix.maxOf { text ->
                textMeasurer.measure(text).size.width
            }.toDp()
        }
    }
}

Demo

@Preview
@Composable
private fun TextAlignTest() {

    val prefix = listOf("1.", "2.", "3.", "4.", "5.", "6.", "7.", "8.", "9.", "10.")
    val description = listOf(
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "Sixth",
        "Seventh",
        "Eighth",
        "Ninth",
        "Tenth"
    )


val density = LocalDensity.current

val textMeasurer = rememberTextMeasurer()

val prefixWidth by remember(prefix, prefix.size) {
    derivedStateOf {
        with(density) {
            prefix.maxOf { text ->
                textMeasurer.measure(text).size.width
            }.toDp()
        }
    }
}

    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        prefix.forEachIndexed { index, prefix ->
            ListItem(
                prefixWidth = prefixWidth,
                prefix = prefix,
                description = description[index]
            )
        }
    }
}

@Composable
fun ListItem(
    prefixWidth: Dp,
    prefix: String,
    description: String
) {
    Row {
        Text(modifier = Modifier.width(prefixWidth).border(1.dp, Color.Red), text = prefix)
        Spacer(Modifier.width(8.dp))
        Text(description)
    }
}

Answer 2

@Composable
fun test() {
    val list1 = listOf<String>("1","2","3","4","5","6","7","8","9","10")
    val list2 = listOf<String>("one","two","three","four","five","six","seven","eight","nine","ten")

    LazyColumn(horizontalAlignment = Alignment.Start){
        items(10){
            Row( modifier = Modifier.fillMaxWidth()) {
                Text(text = list1[it],Modifier.fillMaxWidth(.2f))
                Text(text = list2[it])
            }
        }
    }
}

Answer 3

This is your code

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun SampleSOF(){
    Column {
        Row{
            Text(text = "1.")
            Text(text = " First")
        }
        Row{
            Text(text = "10.")
            Text(text = " Tenth")
        }
    }
}

Here is one way to solve it

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun SampleSOF(){
    Row{
        Column {
            Text(text = "1.")
            Text(text = "10.")
        }
        Column {
            Text(text = " First")
            Text(text = " Tenth")
        }
    }
    Row{


    }
}

Below Code will work when space width equal to the character width

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun SampleSOF(){
    Column {
        Row{
            Text(text = appendSpacesToString("1.",5))
            Text(text = " First")
        }
        Row{
            Text(text = appendSpacesToString("10.",5))
            Text(text = " Tenth")
        }
    }
}
fun appendSpacesToString(content : String, lenght : Int) : String {
    var contentLenght = content.length
    var newContent = content
    if(lenght > contentLenght){
        var nl : Int = lenght - contentLenght;
        while (nl > 0){
            newContent += " "
            nl--
        }
    }
    return newContent
}

You can maintain fixed width like this also

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun SampleSOF(){
    Column {
        Row{
            Text(text = "1.",modifier = Modifier.width(30.dp))
            Text(text = " First")
        }
        Row{
            Text(text = "10.",modifier = Modifier.width(30.dp))
            Text(text = " Tenth")
        }
    }
}