Migrate to Constraint Layout
Ditch nested layouts forever
If you are still using linear and relative layouts in android xmls, it’s never too late to migrate to Constraintlayout. But why do we need to migrate when we already have linear and relative layouts that fit our needs?
Here’s an excellent article explaining the need for flat view hierarchy:
In case you need a short answer for the question, here it is:
When we use linear and relative layouts, often times we need to keep relative layout in a linear layout or vice versa several times. Whenever you want to align two views you need to wrap those in either linear or relative layout based on the kind of alignment we need. What we end up in is a huge nested layout even for a simple UI.
So what’s the problem with this?
Nested hierarchies can adversely affect performance. Rendering nested views take more time than a flat view.
Moreover, Relative layout and linear layout are preferred one over the other based on the kind of alignment that we need. But constraint layout is the best of both worlds and even more. You’ll discover why by the end of this article.
Assuming that you’re now convinced about using Constraint layout, let’s dive in.
Dependency for ConstraintLayout
Add this dependency in app level build.gradle to start using Constraint Layout.
implementation 'androidx.constraintlayout:constraintlayout:2.0.1'I have started using Constraint layout a while ago in my projects. I’m very glad that I did migrate to this layout. I felt intimidated to start using it. So I gathered the attributes that I found highly useful below.
Any view that you put in a constraint layout must be constrained both horizontally and vertically.
Attributes of a ConstraintLayout
You can constrain a desired view using a combination of the below attributes:
- layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
- layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
- layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
- layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
- layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
- layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
- layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
- layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
- layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
- layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
- layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
- layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
- If desired, attributes supporting start and end are also available in place of left and right alignment. You can refer the below SO thread to find out the difference between margin start/end and margin left/right.
The higher number of attributes compared to the traditional linear, relative layouts also makes constraint layout flexible and offers more control to the developer in designing the layout. It is also backwards compatible to API level 9.
When you open the design view in xml, you can draw handles to drag and drop from the desired view. This is how a view looks when you click on it in the xml design:
The zigzag lines are the handles. You can click on the hollow white dots and drag to the desired constraint: parent, a particular view, guideline or a barrier. You will learn about guidelines and barriers in the following part of the article.
Sizing
0dp in constraint layout represents that the views obeys the constraints and takes all the available space within the constraints. You can opt for wrap_content in case you don’t want the view to take up all the available space.
Bias
If you have put the constraints over a view but want it more to the right, left, top or bottom: that’s when you can make use of bias. The name ‘bias’ describes itself here. You can either change the bias by dragging the slider in the attributes section or by manually adding the code:
app:layout_constraintHorizontal_bias="0.5"Baseline Constraint
The baseline constrain allows us to align the baseline of multiple textviews, regardless of their text sizes.
If you have two textviews which you want to align the baseline for, right click on the one whose baseline you want to consider and select show baseline. Then You see a horizontal tab at the bottom of the view. you can then drag it and attach to the baseline of the other textview.
app:layout_constraintBaseline_toBaselineOf="@+id/text_title"Chains
You can chain multiple views together so that they move together. It’s like packing the views similar to a linear layout. You can also decide how to spread the views inside the package. You can use the packing style to be one of these: spread-inside, spread and packed. spread evenly distributes the views. spread-inside fixes the first and last ones at the start and end and evenly distributes the remaining. packed keeps all the views together and then you can vary its bias.
app:layout_constraintHorizontal_chainStyle="spread_inside"Here’s a detailed blogpost on Constraint layout chains:
Guidelines
Guideline helps us align views based on weighted percentage. It’s like a linear layout with weight of one view as 0.75 and the other as 0.25. You can either have a horizontal guideline or a vertical guideline. It sits at the mentioned position. It doesn’t show up on the UI. You can constrain views either to the top, bottom, left or right of the guideline.
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />Barriers
When you have multiple views in the layout, you want to place a particular view to the bottom of 2 views whose width/height changes dynamically: you can place a barrier and add ids of the views with dynamic width/height. It doesn’t show up on the UI
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="pickupTv,deliveryTv" />That’s all for now. I highly recommend that you jump in straight and play with the layout to understand it more deeply.
