Compose Playground

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)
            )
        }
    }
}