Understanding Layouts in Jetpack Compose | by Muhammad Ainul Yaqin | Jul, 2024

Layouts in Jetpack Compose are composables that define the structure and arrangement of UI elements. Unlike traditional XML-based layouts, Jetpack Compose layouts are written in Kotlin, allowing you to leverage the full power of the Kotlin language. This makes it easy to create complex UI designs with concise and readable code.

1. Column and Row

The Column and Row composables arrange their children vertically and horizontally, respectively. These are the most basic and commonly used layout composables in Jetpack Compose, it is similar to LinearLayout Android Views.

Column {     
Text("Hello")     
Button(
onClick = {},
content = {
Text(text = "Layout")
})
}  
Row {
Text("Hello")
Button(
onClick = {},
content = {
Text(text = "Layout")
})
}

Let’s explore Them

When you have multiple children inside a Column or Row, their children arrange vertically or horizontally, respectively. Here’s the implementation:

horizontalArrangement Defines how the horizontal space available in the container is distributed among its children.

verticalAlignment Determines how elements are positioned within their available vertical space in the container.

verticalArrangement Defines how the vertical space available in the container is distributed among its children.

horizontalAlignment Determines how elements are positioned within their available horizontal space in the container.

1. Box

The Box composable allows you to stack UI elements on top of each other. This is useful for creating overlays or combining multiple elements into a single visual unit. It is similar to FrameLayout in Android Views.

Box { 
Image(
painterResource(id = R.drawable.ic_launcher_background),
contentDescription = null
)     
Text("Overlay Text")
}

Let’s Dive into Box

contentAlignment allows you to set the default Alignment to its children. If you want to have different Alignments between each child, you need to set Alignment by using Modifier.align() on a child.

propagateMinConstraints defines if the minimal constraints should be passed and used for the content too. By default, the constraints of the Box() won’t be taken into account when measuring the children.

That’s Probably the most Used Component in Jetpack Compose, Jetpack Compose’s layout system is powerful and flexible, enabling developers to create complex and responsive UI designs with ease. By understanding and utilizing the various layout composables, you can build beautiful and intuitive user interfaces that enhance the user experience. Start experimenting with these layouts in your projects to see the benefits of Jetpack Compose firsthand.

Keep Learning And Happy Coding

references :

Android Official

Fun Of Box

Alignment And Arrangement