different alignments in compose row

Question

(I'm pretty new to compose, so this might be a dumb question, beware :D)

I'm trying to achieve a layout that looks like this:

--------------------------
|          Text1         |
|     Text2ABitSmaller  +|
|                        |
--------------------------

This "box" (as I will refer to it), should be max width and contain 2 centered texts (one below the other) and one icon at the end of the box (at the height of the text views)

I've tried different approaches (one row, which contains 3 columns; one row with spacing(Modifier.weight(1f)); one row with 2 columns) and none of them worked well (either got strange results or the placement was messed up), is the approach using row as the "base" for the box even reasonable? It does not seem to be able to Arrange things in 2 ways at once (Arragement.Center & Arragement.End)

Any tips / links / hints will be appreciated, thanks in advance

Answer 1

You can use a Box in your 2nd Row to put the Text in the center and the Icon at the end.

Something like:

Column(

) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ){
        Text("Text1")
    }
    Row(){
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Text("Text2ABitSmaller")
            Icon(Icons.Filled.Add,"contentDescription",
               modifier = Modifier.align(Alignment.CenterEnd)
            )
        }
    }
}

Note that the align modifier will have priority over the Box's alignment parameter.