Compose ConstraintLayout DSL Syntax

A quick reference on how to implement some typical ConstraintLayout cases in Compose.

ConstraintSet DSL vs Modifier DSL

Both syntax work very much alike with a slight difference in setup.

ConstraintSet

    val constraintSet = ConstraintSet {
        val titleText = createRefFor("title")
        // Helpers are defined in this scope
        createStartBarrier(titleText)

        constrain(titleText) {
            // constraints, dimensions, transforms
        }
    }
    ConstraintLayout(constraintSet) {
        Text(text = "", modifier = Modifier.layoutId("title"))
    }

Modifier

    ConstraintLayout {
        val title = createRef()
        // Helpers are defined in this scope
        createStartBarrier(title)

        Text(text = "", modifier = Modifier.constrainAs(title) {
            // constraints, dimensions, transforms
        })
    }

• Note that only the immediate children Composables can be constrained
• Prefer ConstraintSet for more manageable and reusable Layouts

ConstrainScope

The available API under the ConstrainScope, ie:

constraint(createRefFor("id")) {
    // The API here
}

Constraints

Constrain a Composable to another using Anchorable.linkTo()

constrain(title) {
   start.linkTo(parent.start, margin = 10.dp)
}

Or align a Composable with center...()

constrain(title) {
   centerTo(parent)                          // Center around or inside the given reference
   centerHorizontallyTo(parent, bias = 0.5f) // Constrain start & end to the same anchors at the given reference
   centerVerticallyTo(parent, bias = 0.5f)   // Constrain top & bottom to the same anchors at the given reference
}

Dimension Behavior

Use androidx.constraintlayout.compose.Dimension to define the dimension behavior of a Composable.

constrain(title) {
   width = Dimension.value(10.dp)
}

The typical use-cases:

• Dimension.value(Dp)
• Dimension.wrapContent
• Dimension.matchParent
• Dimension.fillToConstraints - Equivalent to "match_constraints" in the View system

See the Dimension interface documentation for more.

Ratio

You can use Dimension.ratio(String) to define a dimension as a proportion to the other.

Where the String is a Width:Height ratio.

   height = Dimension.value(10.dp)
   width = Dimension.ratio("4:1")    // The width will be 40dp
// ---------
   width = Dimension.wrapContent
   height = Dimension.ratio("1:0.25")   // The height will be a fourth of the resulting wrapContent width

Visibility

As with the View system, you can set the visibility of a Composable.

• Visibility.Visible - The default Visibility of Composables in ConstraintLayout
• Visibility.Invisible - Effectively the same as setting the alpha to 0.0f
• Visibility.Gone - The dimensions of the Composable will collapse to 0, and constraints will still be considered

Composables constrained to another with visibility Gone will use goneMargin instead:

constrain(title) {
   visibility = Visibility.Gone
}
constrain(name) {
   start.linkTo(title.end, margin = 4.dp, goneMargin = 8.dp)  // The margin in the layout will be 8dp
}

Helpers

Chains

Guidelines

Barriers