ConstraintLayout Chains

With the help of ConstraintLayout , we can create complex and lengthy layouts with a flat view hierarchy. It means there is no need to nest multiple view groups (LinearLayout or RelativeLayout). It’s similar to RelativeLayout but much more flexible than RelativeLayout. All views are placed according to relationship between sibling views. Also its easier to use with new Android Studio’s Layout Editor.

When using ConstraintLayout I came across a problem that is easily solvable using LinearLayout but I wanted to be consistent and have a flat hierarchy of views.

Problem

Center 3 views vertically using ConstraintLayout as show below in Figure 1.

Figure 1

Solution

Solved using Chains feature available in ConstraintLayout

A chain is a group of views that are linked to each other with bi-directional position constraints. For example, figure 2 shows two views that both have a constraint to each other, thus creating a horizontal chain.

Figure 2

Creating a chain is really easy, we can click and drag to select views or press ctrl and select views from Component Tree. And then right click on selected views in Editor Or Component Tree to apply constraints. You can see that in action in following screen records.

Figure 3: Setting Vertical Chains

XML layout for vertical chains

Figure 4: Setting Horizontal Chains

XML layout for horizontal chains

Once chains are set, we can distribute the views horizontally or vertically with the following styles.

1. Spread: The views are evenly distributed. E.g.
   app:layout_constraintHorizontal_chainStyle=”spread”
app:layout_constraintVertical_chainStyle=”spread”
2. Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed. E.g.
   app:layout_constraintHorizontal_chainStyle=”spread_inside”
app:layout_constraintVertical_chainStyle=”spread_inside”
3. Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain’s bias (left/right or up/down) by changing the chain’s head view bias. E.g.
   app:layout_constraintHorizontal_chainStyle=”packed”
app:layout_constraintVertical_chainStyle=”packed”
4. Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to “match constraints” (0dp). By default, the space is evenly distributed between each view that's set to "match constraints," but you can assign a weight of importance to each view using thelayout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you're familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.

Figure 5: Examples of each chain style

Conclusion: ConstraintLayout is all in one package. We can set views relative to each other like RelativeLayout or set weights for the views as we used to in LinearLayout (layout_weight). If we use ConstraintLayout then one flat view can handle large and complex views and no nested view groups are needed.

Reference:
https://developer.android.com/training/constraint-layout/index.html

If you liked this, click the 💚 below so other people will see this here on Medium.