Layouts In Compose

Introduction

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. In this tutorial, we will explore various layouts in Jetpack Compose and how to use them to create responsive and dynamic user interfaces.

Column Layout

The Column layout arranges its children in a vertical sequence. It is similar to a vertical LinearLayout in the traditional Android View system.

@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

The above code will produce a column with three text items arranged vertically with some spacing between them.

Row Layout

The Row layout arranges its children in a horizontal sequence. It is analogous to a horizontal LinearLayout in the traditional Android View system.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("Item A")
        Text("Item B")
        Text("Item C")
    }
}

The above code will produce a row with three text items arranged horizontally with some spacing between them.

Box Layout

The Box layout is used to stack its children on top of each other. It is similar to a FrameLayout in the traditional Android View system.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text("Bottom Text", modifier = Modifier.align(Alignment.BottomStart))
        Text("Center Text", modifier = Modifier.align(Alignment.Center))
        Text("Top Text", modifier = Modifier.align(Alignment.TopEnd))
    }
}

The above code will produce a box with three text items positioned at different alignments within the box.

ConstraintLayout

The ConstraintLayout is a powerful layout that allows you to position and size widgets in a flexible way. It is similar to the ConstraintLayout in the traditional Android View system.

@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (text1, text2, text3) = createRefs()

        Text("Top Center", modifier = Modifier.constrainAs(text1) {
            top.linkTo(parent.top)
            centerHorizontallyTo(parent)
        })

        Text("Center", modifier = Modifier.constrainAs(text2) {
            centerTo(parent)
        })

        Text("Bottom End", modifier = Modifier.constrainAs(text3) {
            bottom.linkTo(parent.bottom)
            end.linkTo(parent.end)
        })
    }
}

The above code will produce a ConstraintLayout with three text items positioned at the top center, center, and bottom end of the layout.

Custom Layout

Sometimes, you may need a custom layout to meet specific design requirements. Jetpack Compose allows you to create custom layouts using the Layout composable.

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }

        layout(constraints.maxWidth, constraints.maxHeight) {
            var yPosition = 0

            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

@Composable
fun CustomLayoutExample() {
    CustomLayout(
        modifier = Modifier.padding(16.dp)
    ) {
        Text("Custom Item 1")
        Text("Custom Item 2")
        Text("Custom Item 3")
    }
}

The above code demonstrates how to create a custom layout that arranges its children vertically without any spacing.

Conclusion

In this tutorial, we covered various layouts available in Jetpack Compose, including Column, Row, Box, ConstraintLayout, and creating custom layouts. Each layout serves different purposes and can be used based on the UI requirements. Experiment with these layouts to build dynamic and responsive user interfaces for your Android applications.