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.