Alignment and Weight

Alignment, Arrangement and Weight

Along the main axis a Row or Column takes an arrangement (justify-content); across it, an alignment (align-items), which a child can override with Modifier.align. Modifier.weight(n) shares the leftover space in proportion, like flex-grow:

ui/LayoutDemos.kt: three arrangements, then weights and per-child alignmentKotlin

@Composable
fun ArrangementDemo() {
  val chip = Modifier.background(Color(0xFFE3F2FD)).padding(8.dp)
  Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    for ((name, arr) in listOf("SpaceBetween" to Arrangement.SpaceBetween,
                               "SpaceEvenly" to Arrangement.SpaceEvenly,
                               "End" to Arrangement.End)) {
      Row(Modifier.fillMaxWidth().border(1.dp, Color.Gray), horizontalArrangement = arr) {
        Text(name, chip); Text("B", chip); Text("C", chip)
      }
    }
    Row(Modifier.fillMaxWidth().height(56.dp).border(1.dp, Color.Gray)) {
      Text("weight 2", chip.weight(2f).align(Alignment.Top))
      Text("weight 1", chip.weight(1f).align(Alignment.CenterVertically))
      Text("fixed", chip.align(Alignment.Bottom))
    }
  }
}

Arrangement.spacedBy(12.dp) is gap. After "fixed" takes what it needs, "weight 2" gets twice the width of "weight 1":

The modifier chains of Modifier Order, and the arrangements and weights above

MENU