Part 2: A Guide to Android Constraint Layout
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 (such as 120 dp or Dimension reference) works in similar way as other layouts
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 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)
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
Spread Inside Chain
It’s similar to Spread chain, but the endpoints of the chain will not be spread out.
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.
I will write more about Constraint layout in next Part 3, Stay tuned!
Reference:
https://developer.android.com/reference/android/support/constraint/ConstraintLayout