Visual guidelines example for Android Jetpack Compose ConstraintLayout

Guideline ConstraintLayout Compose Android

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

@Composable
fun Playground() {
    ConstraintLayout(
        constraintSet = ConstraintSet {
            val startGuideline = createGuidelineFromStart(100.dp)

            val button = createRefFor("button")
            val text = createRefFor("text")

            constrain(button) {
                top.linkTo(parent.top)
                start.linkTo(startGuideline)
                end.linkTo(startGuideline)
                horizontalBias = 0.5f
            }

            constrain(text) {
                top.linkTo(button.bottom)
                start.linkTo(startGuideline)
                end.linkTo(startGuideline)
                horizontalBias = 0.5f
            }

            val startLine = createRefFor("startLine")

            constrain(startLine) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(startGuideline)
                width = Dimension.value(2.dp)
                height = Dimension.fillToConstraints
            }
        },
        modifier = Modifier.fillMaxSize()
    ) {
        Button(onClick = {}, modifier = Modifier.layoutId("button")) {
            Text("Button")
        }
        Text(
            text = "aligned with guidelines",
            modifier = Modifier
                .layoutId("text")
                .background(Color.LightGray)
        )

        DebugLines()
    }
}

@Composable
private fun DebugLines() {
    Box(
        modifier = Modifier
            .layoutId("startLine")
            .background(Color.Red)
    )
}