androidandroid-jetpack-compose

How to align two texts, one on the left margin and one on the right margin in Jetpack Compose?


I have two texts and I want the first one to be placed at the beginning of the left margin and the other one stuck to the right margin.

I'm trying this:

Row {
    Text(
        modifier = Modifier.weight(1f).padding(top = 16.dp, bottom = 8.dp),
        text = title,
        style = titleStyle,
        color = MaterialTheme.colorScheme.error
    )
    Text(
        modifier = Modifier.weight(1f).padding(top = 16.dp, bottom = 8.dp).fillMaxSize(),
        text = texts[1],
        color = MaterialTheme.colorScheme.error,
        style = style
    )
}

As you can see in the screenshot, the text on the right is not placed on the far right.

enter image description here

The desired result would be:

|LECTURA BREVE                   Ex 19, 4-6a| <- Right margin

How could I achieve this?


Solution

  • Please try to use the horizontalArrangement attribute of the Row:

    Row(
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            modifier = Modifier.padding(top = 16.dp, bottom = 8.dp),
            text = "Lectura Breve",
            color = MaterialTheme.colorScheme.error
        )
        Text(
            modifier = Modifier.padding(top = 16.dp, bottom = 8.dp),
            text = "Ex 19,4-6a",
            color = MaterialTheme.colorScheme.error,
        )
    }
    

    If you rather want to solve this using weights, then you should only assign the weight Modifier to the first Text Composable:

    Row {
        Text(
            modifier = Modifier.padding(top = 16.dp, bottom = 8.dp).weight(1f),
            text = "Lectura Breve",
            color = MaterialTheme.colorScheme.error
        )
        Text(
            modifier = Modifier.padding(top = 16.dp, bottom = 8.dp),
            text = "Ex 19,4-6a",
            color = MaterialTheme.colorScheme.error,
        )
    }