Mastering Box Layout in Android Jetpack Compose: Align Child Elements with 9 Alignments

Mastering Box Layout in Android Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UI, and the Box layout is one of its most versatile components. 

In this post, we'll explore how to use the Box layout to align child elements precisely with 9 different alignments.

Child Alignments in a Box Layout

Jetpack Compose's Box supports 9 alignment options for child elements:

• TopStart (⬉): Aligns the child to the top-left corner of the Box.
• TopCenter (⬆): Aligns the child to the top-center of the Box.
• TopEnd (⬈): Aligns the child to the top-right corner of the Box.
• CenterStart (⬅): Aligns the child to the center-left of the Box.
• Center (🎯): Aligns the child to the center (both horizontally and vertically).
• CenterEnd (➡): Aligns the child to the center-right of the Box.
• BottomStart (⬋): Aligns the child to the bottom-left corner of the Box.
• BottomCenter (⬇): Aligns the child to the bottom-center of the Box.
• BottomEnd (⬊): Aligns the child to the bottom-right corner of the Box.

Here's a complete example demonstrating the 9 alignments within a Box layout: 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
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
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}



@Composable
fun MainContent() {

    Box(
        modifier = Modifier
            .background(color = Color.LightGray)
            .fillMaxSize()
    ) {

        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.TopStart),
            text = "TopStart"
        )
        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.TopCenter),
            text = "TopCenter"
        )
        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.TopEnd),
            text = "TopEnd"
        )

        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.CenterStart),
            text = "CenterStart"
        )

        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.Center),
            text = "Center"
        )
        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.CenterEnd),
            text = "CenterEnd"
        )

        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.BottomStart),
            text = "BottomStart"
        )
        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.BottomCenter),
            text = "BottomCenter"
        )
        Text(
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .background(Color.White)
                .padding(10.dp)
                .align(Alignment.BottomEnd),
            text = "BottomEnd"
        )
    }
}

..