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.

The desired result would be:

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

How could I achieve this?

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.

The desired result would be:

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

How could I achieve this?

• android
• kotlin
• android-jetpack-compose

Share Improve this question Follow edited Mar 11 at 1:29 Edric 26.9k1313 gold badges8787 silver badges9595 bronze badges asked Mar 10 at 12:04 A. CedanoA. Cedano 1,0011717 silver badges5050 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

Please try to use the horizontalArrangement attribute of the Row:

Row(
    modifier = Modifier.fillMaxWidth(),
    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,
    )
}