ConstraintLayout in Compose

WHY IT EXISTS Compose's Row and Column handle linear arrangements well, but some screens need elements positioned relative to each other in ways that do not nest cleanly, for example centering an avatar between two independently sized text labels, or aligning a badge to the corner of an image regardless of that image's size. Building that with nested Row and Column often means fragile Spacer hacks or layouts that break when content changes. ConstraintLayout exists to describe those relationships directly as constraints instead of forcing them into a nested box model.

THE MENTAL MODEL Think of each child as a piece of furniture connected to the walls and to other furniture by adjustable elastic bands. You do not say which room contains which shelf, you say this shelf's top edge attaches to that lamp's bottom edge, and the layout engine stretches or compresses the bands to satisfy every connection at once, rather than you nesting boxes inside boxes to fake the same relationship.

HOW IT WORKS Inside a ConstraintLayout composable, createRefs or createRef generates reference objects, one per child. Each child calls Modifier.constrainAs, passing its reference and a lambda that pins edges, top, bottom, start, end, using linkTo to the parent's edges or another child's reference. Constraints can include bias, controlling where a view sits between two anchors, and dimension behavior like wrapContent or a fixed size. For layouts that change based on screen width, ConstraintSet lets you define separate constraint configurations and animate or swap between them without restructuring the composable tree itself.

WHEN IT MATTERS It matters for screens with cross referential positioning, a profile header where an avatar, name, and follow button must stay aligned to each other as text length varies, or a design handed off from a tool like Figma that specifies constraints natively. The footgun is defaulting to ConstraintLayout for simple linear content: it carries more overhead than Row or Column and reads less clearly for anything that is genuinely just a vertical or horizontal stack.

ONE CONCRETE EXAMPLE A social app builds a post header with an avatar, username, and timestamp. Using ConstraintLayout, the avatar constrains to the parent's start and top, the username's start links to the avatar's end with an eight dp margin, and the timestamp constrains below the username using that same start anchor, so if the username wraps to a second line on a narrow screen, the timestamp automatically shifts down with it instead of overlapping.