ConstraintLayout - Comprehensive cheat-sheet

By •  • tagged android

This is a quick cheat-sheet I put together while researching all the capabilities of ConstraintLayout for a complex layout. Most other resources I found were either too basic or focusing only one aspect/functionality of this increasingly powerful layout.

Note that this post is light on actual code - it's just meant to capture what you can do with ConstraintLayout along with brief hints about the how. For detailed docs on each of the attributes and so on, the official ConstraintLayout docs are pretty good.

constraintlayout.com - Good beginner resource
Advanced ConstraintLayout - Talk by tech lead on ConstraintLayout team
ConstraintLayout deep dive - great talk with some advanced layout examples

Constraints and dimensions

  • Constrain to parent: layout_constraintTop_toTopOf="parent"
  • Constrain to sibling: layout_constraintTop_toTopOf="@id/view_xyz"
  • Constrain text baselines: layout_constraintBaseline_toBaselineOf="@id/view_xyz"
  • Size ratio: layout_constraintDimensionRatio="2:1" (can be a float too)
  • MATCH_CONSTRAINT (represented in XML as width/height of 0dp) makes the widget take up space to match its constraints (minus margins)
    • Example: view with width=0dp, constrained to start/end of its parent will resize to occupy all available space (while honoring its own margins and the parent's padding).
    • Another example: view A with width=0dp, sitting above a view B of variable width, view A's start/end is constrained to B's start/end. In this case A will resize to be the same width as view B (which, remember, has a variable width).
    • [v1.1.0] Set a min/max (in dp) for the constrained dimension using layout_constraintWidth_min/max.
    • [v1.1.0] This behaviour can be changed using layout_constraintWidth_default="spread|wrap|percent". "spread" = expand; "wrap" = shrink; "percent" = occupy a percentage of available space, specified using layout_constraintWidth_percent="0.5". Note: this can even be > 1.0.
  • Constrain in a circular arc at some specific distance and angle from a target: layout_constraintCircle

Note about wrap_content: by default, constraints will not limit the size of a wrap_content view. To enforce constraints in addition to wrap_content, use layout_constrainedWidth="true"

Chains

Created by constraining a set of views mutually. Note that all views in the chain must be constrained to their immediate siblings and the head and tail views must be constrained to a stable point (e.g., the parent). Otherwise you will see odd behaviour with some margins within the chain being ignored, etc.

Chaining widgets automatically centers them.

Chain modes

  • layout_constraintHorizontal_chainStyle="spread"
    • In this mode, if some views have width/height = MATCH_CONSTRAINT, they will resize to use available space (as opposed to spreading out without resizing). Use layout_constraintHorizontal_weight to control how much they can grow/shrink.
  • layout_constraintHorizontal_chainStyle="spread_inside"
  • layout_constraintHorizontal_chainStyle="packed"

Bias

Can vary from 0.0 to 1.0. Biases the position of the elements in a packed chain accordingly.

Guidelines

Logical "line" against which constraints can be set. The guideline can be positioned absolutely, relatively, or percent-wise.

Barriers

Used to apply constraints on a set of target widgets, i.e., view A can be constrained to be toEndOf views B, C, and D, whichever one occupies the most horizontal space, by placing a barrier in between. One interesting thing this allows you to do is center the target set (B/C/D) among themselves.

Gone margin behaviour

When a constraint's target is GONE, it collapses into a point object and all of its constraints reduce to 0 (i.e., it will go and stick to its constraint targets).

Therefore other Views whose constraints target this GONE view will move to newly predictable positions. Alternatively, to use different margins for these views affected by the GONE view, use layout_goneMarginTop, etc attributes.

ConstraintSet

Set of constraints that can be applied dynamically, for changing layout at runtime as well as for animations.

Groups (v1.1.0)

Logical group of other views (like ViewGroup, but intangible). For now, they can only be used to set the visibility of "child" views.

Placeholders (v1.1.0)

Placeholder for a view. Can be constrained just like normal views, and other views can take its place using setContentId. So that will make the targeted view use the constraints of the placeholder.

Helpers (v2.0)

Very powerful, can be used for:

  • Layout manipulation: LinearHelper (equivalent to a chain), flexbox (available in v2.0)
  • Post-layout manipulation: layers (virtual grouping of views; other views can target layers in their own constraints)
  • Rendering or decorating: circular reveal of ConstraintLayout's children

Performance

wrap_content / fixed dimensions are cheaper
MATCH_CONSTRAINT (0dp) is expensive - may require another measure pass