How to Use Box in Jetpack Compose for Android Layouts

In Jetpack Compose, use the Box composable to stack child components on top of each other. It allows you to position elements freely inside it using modifiers like align or padding. This is useful for overlays, backgrounds, or combining multiple UI elements in the same space.

Syntax

The Box composable creates a container that stacks its children. You can add multiple child composables inside it. Use modifiers to control size, padding, and alignment of the children.

Key parts:

• Box { ... }: The container.
• Child composables inside the curly braces.
• Modifier: Used to style and position the Box or its children.

kotlin

Box(modifier = Modifier.size(100.dp).background(Color.LightGray)) {
  Text("Hello", modifier = Modifier.align(Alignment.TopStart))
  Text("World", modifier = Modifier.align(Alignment.BottomEnd))
}

Output

A 100x100 dp light gray box with "Hello" text at top-left and "World" text at bottom-right inside it.

Example

This example shows a Box with a colored background and two texts positioned at opposite corners using align. It demonstrates stacking and positioning inside Box.

kotlin

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
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 BoxExample() {
  Box(modifier = Modifier.size(150.dp).background(Color.Cyan)) {
    Text("Top Left", modifier = Modifier.align(Alignment.TopStart))
    Text("Bottom Right", modifier = Modifier.align(Alignment.BottomEnd))
  }
}

Output

A 150x150 dp cyan box with "Top Left" text at top-left corner and "Bottom Right" text at bottom-right corner.

Common Pitfalls

Common mistakes when using Box include:

• Not using Modifier.align() on children, causing all children to stack at top-left by default.
• Forgetting to set size or constraints on Box, which may cause it to expand to fill available space unexpectedly.
• Using multiple children without positioning, making them overlap unintentionally.

kotlin

/* Wrong: Children overlap at top-left */
Box {
  Text("First")
  Text("Second")
}

/* Right: Position children explicitly */
Box {
  Text("First", Modifier.align(Alignment.TopStart))
  Text("Second", Modifier.align(Alignment.BottomEnd))
}

Output

In the wrong example, both texts appear overlapped at top-left; in the right example, texts appear at opposite corners.

Quick Reference

Tips for using Box:

• Use Modifier.size() or Modifier.fillMaxSize() to control Box size.
• Use Modifier.align() on children to position them inside Box.
• Box stacks children in order; later children appear on top.
• Use Box for overlays, backgrounds, or combining elements in the same space.

Key Takeaways

Box stacks child composables allowing free positioning inside it.

Use Modifier.align() on children to place them where you want inside the Box.

Without alignment, children stack at the top-left corner by default.

Set size or constraints on Box to control its layout space.

Box is ideal for overlays, backgrounds, and layered UI elements.