Skip to content
🤔 Documentation issue? Report or edit

Box

The children of the Box layout will be stacked over each other. You can use the align modifier to specify where the composable should be drawn.

@Composable
fun BoxExample() {
    Box(Modifier.fillMaxSize()) {
        Text("This text is drawn first", modifier = Modifier.align(Alignment.TopCenter))
        Box(
            Modifier.align(Alignment.TopCenter).fillMaxHeight().width(
                50.dp
            ).background( Color.Blue)
        )
        Text("This text is drawn last", modifier = Modifier.align(Alignment.Center))
        FloatingActionButton(
            modifier = Modifier.align(Alignment.BottomEnd).padding(12.dp),
            onClick = {}
        ) {
            Text("+")
        }
    }
}

Content Alignment

You can use the align modifier to set the position of a Composable inside the Box

See also:


Last update: October 13, 2021
Back to top