ConstraintLayout is a big revolution in Android layout system. It provides several type of constraints to squeeze/positioning your views. You can see it as a much powerful RelativeLayout or if you familiar with iOS development — AutoLayout. Either way is trying to solve a math problem.
How to position a View
AbsoluteLayout
We knew that we only need x, y, width and hight to label a region in a 2-dimensional coordinates system like our View system. That is also the idea of the ancient AbsoluteLayout if you have heard of it long times ago. As you can imagine the hardcode positioning is not suitable for the variety of Android world.
LinearLayout
Since AbsoluteLayout is deprecate due to lack of flexibility, LinearLayout is another solution to simplify the layout problem. LinearLayout only handle view in one dimension and fill them one by one. It’s an elegant solution especially in mobile world since many layout is a list-like structure.
RelativeLayout
LinearLayout is good but if you want to deal with much complex layout you may need to nest it into different layer and layer which is not recommend. RelativeLayout on the other hand is more care about the relationship of each view, you can decide the view relation to other view to suit your need.
ConstraintLayout
Since RelativeLayout is so great, why do we still need ConstraintLayout?
As a developer, the most important point for me is ConstraintLayout is a library! Have you confusing which fragment you should use? From SDK or import from support library? The answer is support library definitely because it will become much easier to get update for any performance improve, new features and least but not last —bug fix. You’ll never get sucked into certain Android SDK anymore.
The basic idea of ConstraintLayout is we provide sufficient constraint for each view then the layout will automatically construct.
<EditText
android:id="@+id/editView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/textView"
app:layout_constraintBottom_toTopOf="@id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>Here the editText will be place below textView , above button and stretch the 0dp width to match parent position. Although the naming is very long you can leverage on the autocomplete in Android Studio to speed up a bit.
Here are some handy constraint in ConstraintLayout:
Ratio
You can use layout_constraintDimensionRatio config the ratio of the view itself. It’s really useful when you want to keep the ratio but stretch the width of image.
Bias
You can set either layout_constraintHorizontal_bias or layout_constraintVertical_bias to shift the space ratio in left/right or top/down.
Chains
When you want to place a set of views with same space, you can use CHAIN_SPREAD, CHAIN_SPREAD_INSIDE or CHAIN_PACKED in either layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle attribute in the first view of your chains.
Other constraint like circular positioning, barrier or group is also time saving feature and I believe that there will be more in the future.
Conclusion
ConstraintLayout provide a much flexible way for Android layout development. It highly recommend to use it as a replacement of RelativeLayout as it provide more functionality and better performance. If you already start using ConstraintLayout, congratulation and keep going! If you haven’t start yet, give it a try and you won’t regret it.
