6 reasons why I fell in love with Constraint layout!!

Jul 22, 2019

This is an article I’ve decided to work on after witnessing the power of Constraint layout my self, seeing how flexible it is, and interacting with the great options it offers. I just fell in love. Not only because Constraint Layout allows you to create optimized large and complex layouts with a flat view hierarchy (no nested view groups), nor that it is — similarly to Relative Layout (Which is the layout I used to prefer before using Constraint layout) deal with all views according to relationships between sibling views and the parent layout with more flexibility and simplicity, But also because of 6 options that made it as it is which are :

Match Constraints (the power of 0 dp):

When a dimension is set to “Match_Constraint” or “0 dp”, the default behavior is to make the view expands as much as possible to meet the constraints on each side (after accounting for the view’s margins).

This simply my favorite feature, It allows you to control the dimensions of the views responsively according to the screen sizes in different devices. It just took the dimensions handling in Android Development to a next level.

Baseline alignment

Align the text baseline of a view to the text baseline of another view.

I won’t talk much about this one because it’s definition says it all, It allows you to align views according to the text it self, and that’s just awesome!!!

Constrain to a guideline

There is 2 types of guidelines, vertical and horizontal guidelines to which you can constrain views, and the guideline will be invisible to app users. You can position the guideline within the layout based on either dp units or percent, relative to the layout’s edge.

The guidelines feature simplifies making everything responsive in your layout, since it offers you the possibility to position different views using percentages relatively to the layout’s edge, and this is a wonderful option to be honest.

Constrain to a barrier

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 one is just amazing, using it you can handle the unpredictable behavior of dynamically filled views, let’s say you have a text view, just set and put it inside the barrier then position the other views relatively to the barrier and everything will be handled automatically. That’s it, no more complicated links to think about. It’s true power appears when used with multiple views.

Control linear groups with a chain

A chain is a group of views that are linked to each other with bi-directional position constraints. The views within a chain can be distributed either vertically or horizontally.

Chains provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently. It offers a fast easy way to dynamically link views without thinking static, it comes in both directions horizontal and vertical. It has several types shown in the figure up there.

Circular positioning

Circular positioning is to constrain a widget center relatively to another widget center, at an angle and a distance. This allows you to position a widget on a circle.

Circular position is a whole new level of positioning in android, it links the center of a view to the center of another view according to a specific angle which allows you not only to position complicated views easily but also animate them changing just the angle.

Those 6 features are not all what constraint layout offers, nor the usages are limited to what I mentioned. Using constraint layout creatively can create pretty cool layouts, all you have to do is unleashing your imagination and some coding…

Useful links:

• https://developer.android.com/training/constraint-layout
• https://developer.android.com/reference/android/support/constraint/ConstraintLayout