(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
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.