Layering Composables with the Box Layout in Jetpack Compose

Mastering Layouts in Jetpack Compose: The "Box" Composable

Welcome back to our Jetpack Compose series! You've learned how to arrange items vertically with Column and horizontally with Row. Now, it's time to learn the third fundamental layout composable: "Box". This powerful tool allows you to stack components on top of each other and align them with precision.

---

What is a "Box"?

A Box is a layout composable that lets you place its children on top of one another, in the order they are declared (the last child is on top). It's also used to align a single child within a container. Think of it as a painter's canvas where you can place elements at specific positions or layer them to create depth.

• Stacks children in the Z-axis (depth).
• Aligns children within its borders.
• Essential for overlapping UI elements like a play button on a video thumbnail.

@Composable
fun SimpleBoxExample() {
    Box(modifier = Modifier.size(200.dp)) {
        // This Surface is the bottom layer
        Surface(color = Color.Blue, modifier = Modifier.matchParentSize())

        // This Surface is the top layer, drawn over the blue one
        Surface(color = Color.Yellow, modifier = Modifier.size(100.dp))
    }
}

---

When to Use a "Box"?

You'll reach for Box whenever you need to:

• Place a Text label over an Image.
• Put a loading indicator (CircularProgressIndicator) in the center of the screen.
• Overlap a profile picture on top of a background banner.
• Align a small icon to the top-right corner of a container.

---

Customizing a "Box": The "contentAlignment" Modifier

While Row has horizontalArrangement and Column has verticalArrangement, Box uses the contentAlignment parameter to position its children. This single parameter controls both horizontal and vertical alignment simultaneously.

@Composable
fun AlignedBoxExample() {
    Box(
        modifier = Modifier
            .size(250.dp)
            .background(Color.LightGray),
        // This aligns ALL children inside the Box by default.
        contentAlignment = Alignment.BottomEnd
    ) {
        // This Text will be aligned to the bottom-right.
        Text("BottomEnd")

        // You can override the alignment for a specific child
        // using the .align() modifier on that child.
        Text(
            "TopCenter",
            modifier = Modifier.align(Alignment.TopCenter)
        )
    }
}

The key difference to remember is that contentAlignment sets the default for all children, while Modifier.align() gives a specific child individual control over its position.

---

Key Concepts Recap

• Box: A layout for stacking children on top of each other or aligning them within a container.
• Stacking Order: The last composable declared inside a Box appears on top.
• contentAlignment: A parameter of Box that sets the default alignment for all children (e.g., Alignment.Center, Alignment.TopStart).
• Modifier.align(): A modifier used on a child inside a Box to give it a specific alignment, overriding the default.