Part 2: A Guide to Android Constraint Layout

5 min readJan 13, 2021

This is Part 2 of “A Guide to Android Constraint Layout”. I would recommend to read the Part 1 before starting this Part 2 to have a more in-depth understanding of Android Constraint layout. We will cover dimension constraints and chains in this part.

Dimensions Constraints

Min/Max dimensions constraints on ConstraintLayout:

You can define the minimum and maximum sizes for ConstraintLayout itself,

android:minWidth — set the minimum width for the layoutandroid:minHeight — set the minimum height for the layoutandroid:maxWidth — set the maximum width for the layoutandroid:maxHeight — set the maximum height for the layout

These minimum and maximum dimensions will be used by ConstraintLayout when its dimensions are set to WRAP_CONTENT

Widgets dimensions constraints:

The dimensions of the widgets can be specified by setting the attributes android:layout_width and android:layout_height in three different ways

Fixed Size

Fixed Size

Fixed Size (such as 120 dp or Dimension reference) works in similar way as other layouts

Any Size (Match Constraint)

Any Size (Match Constraint)

Any Size will resize the widget in such a way as matching the constraint that are set

Wrap Content

Wrap Content

Wrap Content works in similar way as other layouts

This (a) is Wrap Content

This (b) is 0dp (Any Size or Match Constraint) without margin

This (c) is Any Size or Match Constraint with the margin on the left

WRAP_CONTENT — Enforcing constraints:

In some situations, you might want to use WRAP_CONTENT and keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attributes.

app:layout_constrainedWidth=”true|false”app:layout_constrainedHeight=”true|false”

app:layout_constrainedWidth=”false” will not enforce the constraints as shown in figure

app:layout_constrainedWidth=”true” will enforce the constraints and limit the resulting dimension

MATCH_CONSTRAINTS dimensions:

When a dimension is set to MATCH_CONSTRAINT, the default behaviour is to have the resulting size take all the available space.

Some additional modifiers are also available,

layout_constraintWidth_min and layout_constraintHeight_min : will set the minimum size for this dimension
layout_constraintWidth_max and layout_constraintHeight_max : will set the maximum size for this dimension
layout_constraintWidth_percent and layout_constraintHeight_percent : will set the size of this dimension as a percentage of the parent

Percent dimension:

To use percent, you need to set the following,

The dimension should be set to MATCH_CONSTRAINT (0dp)
Then set the layout_constraintWidth_percent or layout_constraintHeight_percent attributes to a value between 0 and 1

<Button
 android:layout_width=”0dp”
 android:layout_height=”wrap_content”
 android:layout_constraintWidth_percent=”0.7" />

Chains

Chains provide group-like behaviour in a single axis (horizontally or vertically).
The other axis can be constrained independently

Creating a chain:

A set of widgets are considered a chain if they are linked together via a bi-directional connection

Chain heads:

Chains are controlled by attributes set on the first element of the chain (the “head” of the chain)

The head is the left-most widget for horizontal chains, and the top-most widget for vertical chains

Margins in chains:

If margins are specified on connections, they will be taken in account. In the case of spread chains, margins will be deducted from the allocated space.

When using margins on elements in a chain, the margins are ADDITIVE.

For Example: On a horizontal chain, if one element defines a right margin of 10dp and the next element defines a left margin of 5dp, the resulting margin between those two elements is 15dp.

An item plus its margins are considered together when calculating leftover space used by chains to position items
The leftover space does not contain the margins

Chain style:

Setting the attribute layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle on the first element of a chain, the behaviour of the chain will change according to the specified style
Default Chain style is CHAIN_SPREAD

Spread chain

CHAIN_SPREAD — the elements will be spread out (default style)

Spread Chain

Weighted chain

In CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space. In Weighted chain, attributes layout_constraintHorizontal_weight and layout_constraintVertical_weight will control how the space will be distributed among the elements using MATCH_CONSTRAINT

Weighted Chain

Spread Inside Chain

It’s similar to Spread chain, but the endpoints of the chain will not be spread out.

Spread Inside Chain

Packed Chain

The elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements.