Advanced Constraint Layout

A ConstraintLayout is a ViewGroup which allows you to Position and size Views in a flexible way. The Views will be positioned and sized w.r.t other Views with the Use of Constraints.

This article is intended for those who have knowledge of constraint layout and want to learn detailed. Looking at the general sub-themes first, they are as follows.

• Baseline Alignment
• Guideline
• Barriers
• Ration
• Group
• Chains

What is Baseline Alignment ?

Baseline refers to views that contain text. Used to align the text baseline of a view with the text baseline of another view. The order of use is as follows.

What is Guideline ?

A guideline (vertical or horizontal) is used to constrain views. Invisible to the user, guidelines are visible only to the developer. The order of use is as follows.

What is Barriers?

Similar to a guideline, a barrier is an invisible line that you can constrain views to. Except a barrier does not define its own position; instead, the barrier position moves based on the position of views contained within it. This is useful when you want to constrain a view to the a set of views rather than to one specific view.

• For example, C is constrained to the right side of a barrier. The barrier is set to the “end” (or the right side in a left-to-right layout) of both view A and view B. So the barrier moves depending on whether the right side of view A or view B is is farthest right.

The order of use is as follows.

What is Ration ?

Using this layout constraint, we can define one dimension (Height or Width) of a View as a ratio of another dimension. Actually this function is very good because we just set the ratio we want inside the xml without using any Java or Kotlin code for it.

Suppose you have width to ScreenWidth and Image Aspect Ratio should be 16:9, then layout_constraintDimensionRatio will be useful to fulfill above requirement. The following code will demonstrate how to use this.

What is Group?

If you schedule an appointment within the same group, you can perform the same action on all appointments at the same time. This will save you from long codes.

• For example We have two different textViews and every time we want to make them both invisible we “android:visibility= gone” them separately, instead it would be better to set them inside a group and give the group this code,Like the example below

What is Chains?

A chain is a group of interconnected views with bidirectional constraints.

1. Spread: The views are evenly distributed (after margins are accounted for). This is the default.
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.
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.
4. Weighted: The views are distributed according to the weights set on the screen

The order of use is as follows.

I hope this information is helpful to you. If you have any queries or feedback please write back. Always happy to help.