ConstraintLayout in Jetpack Compose: Advanced Layouts

#android #kotlin #compose #tutorial

ConstraintLayout in Compose provides powerful positioning capabilities for complex UI layouts, perfect for responsive design.

Basic Constraint Setup

@Composable
fun ComplexLayout() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (topBox, centerBox, bottomBox) = createRefs()

        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
                .constrainAs(topBox) {
                    top.linkTo(parent.top, margin = 16.dp)
                    start.linkTo(parent.start, margin = 16.dp)
                }
        )
    }
}

Chains for Equal Distribution

Use chains to distribute elements evenly:

@Composable
fun ChainLayout() {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
        val (btn1, btn2, btn3) = createRefs()

        createHorizontalChain(btn1, btn2, btn3, chainStyle = ChainStyle.Spread)

        Button(
            onClick = {},
            modifier = Modifier.constrainAs(btn1) {
                top.linkTo(parent.top)
            }
        ) { Text("1") }

        Button(
            onClick = {},
            modifier = Modifier.constrainAs(btn2) {
                top.linkTo(parent.top)
            }
        ) { Text("2") }

        Button(
            onClick = {},
            modifier = Modifier.constrainAs(btn3) {
                top.linkTo(parent.top)
            }
        ) { Text("3") }
    }
}

Barriers and Guidelines

Create barriers and guidelines for alignment:

@Composable
fun BarrierLayout() {
    ConstraintLayout {
        val (img, title, desc) = createRefs()
        val guideline = createGuidelineFromStart(0.3f)

        Image(
            painter = painterResource(R.drawable.ic_image),
            contentDescription = null,
            modifier = Modifier.constrainAs(img) {
                start.linkTo(parent.start)
                top.linkTo(parent.top)
            }
        )

        Text(
            text = "Title",
            modifier = Modifier.constrainAs(title) {
                start.linkTo(guideline)
                top.linkTo(parent.top)
            }
        )
    }
}