Box
A layout that stacks children on top of each other, with powerful alignment options.
Properties
Box Properties
Children Properties
Preview
A
B
C
Generated Code
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
@Composable
fun MyBox() {
// The children are stacked in the order they are declared.
// The last child is drawn on top.
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopStart,
propagateMinConstraints = false
) {
Box(
modifier = Modifier
.size(96.dp)
// This aligns this specific child, overriding the Box's alignment
.align(Alignment.TopStart)
.background(Color.Red)
) {
Text(
text = "A",
modifier = Modifier.align(Alignment.Center)
)
}
Box(
modifier = Modifier
.size(64.dp)
// This aligns this specific child, overriding the Box's alignment
.align(Alignment.Center)
.background(Color.Green)
) {
Text(
text = "B",
modifier = Modifier.align(Alignment.Center)
)
}
Box(
modifier = Modifier
.size(128.dp)
// This aligns this specific child, overriding the Box's alignment
.align(Alignment.BottomEnd)
.background(Color.Blue)
) {
Text(
text = "C",
modifier = Modifier.align(Alignment.Center)
)
}
}
}