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: July 27, 2022