androidandroid-jetpack-composeandroid-jetpackmaterial-components-android

How to custom left/right align items in android jetpack compose Row


I want a Row in Jetpack Compose, something like this:

----------------------------------------------------
| A |   B   |                                  | C |
----------------------------------------------------

I want A & B to be left aligned, next to each other and C at the end. I don't know if the existing horizontal arrangement has ways to do this. Also I think, nesting Rows may not be a good idea. What's the best way to achieve this?


Solution

  • You can use Spacer with Modifier.weight:

    Row {
        Text("a")
        Text("b")
        Spacer(Modifier.weight(1f))
        Text("c")
    }
    

    In more complex scenario, when your first text is multiline, you can apply Modifier.weight to this item itself - and making sure content inside is aligned as you expect, e.g. Start in this case by default:

    Row {
        Text(
            "some\nmultiline\ntext",
            modifier = Modifier
                .weight(1f)
        )
        Text("c")
    }