Android ConstraintLayout Explained Using a Complex UIBuild a complex and responsive UI for your appamod kantheBlockedUnblockFollowFollowingJun 19ConstraintLayout was introduced to build very complex and responsive UI’s for your app.
I was previously using RelativeLayout for building complex UI’s, until I came across this complex UI.
The screenshot above is the footer of a fragment in an app footer, that describes the login process steps, and at which step the user is.
There are three steps to complete login.
Enter mobile numberOTPProfileThe user is currently on the first step, which is “enter mobile number”.
Take few minutes and try building the UI above, using RelativeLayout or any other layout, and see how it goes.
Let me know in the comments if you were able to build this exact UI, using a layout other than ConstraintLayout.
Those who are new to ConstraintLayout, consider reading the Android ConstraintLayout documentation first.
Let’s start.
First add Gradle dependency to your project.
dependencies { implementation 'com.
android.
support.
constraint:constraint-layout:1.
1.
2'}To explain it further, this is what the UI looks like in design view in Android Studio.
Building this UI was possible with the use of guidelines.
Guidelines are nothing but virtual views — they are not visible as such.
They can be viewed in design previews and blueprints.
In the image above, you can see that I’ve used two guidelines — two dotted lines that can be seen in the centre vertically and horizontally.
After adding the guidelines, this is what the XML looks like.
The line app:layout_constraintGuide_percent=”0.
5" defines where exactly you want the guideline.
In my case, I wanted it in the centre, so the value is 0.
5.
If you want to add a TextView horizontally, after, for example, exactly 3/4 width of your screen, you need to add a vertical guideline.
This would indeed be a vertical guideline.
We’re dividing the screen horizontally, so we’ll use a vertical guideline.
The guideline will look as following:Hopefully that gives you an overview of guidelines.
We’ll go back to the original problem now.
After adding two guidelines — one horizontally and one vertically, exactly in the center — let’s add the first UI element.
First up, we will add ImageView exactly in the center of the guidelines.
Here’s the code:The following code is to place your ImageView exactly in the center, with respect to the horizontal guideline.
app:layout_constraintBottom_toTopOf="@+id/guideline1" app:layout_constraintTop_toTopOf="@+id/guideline1"The next code is to place ImageView exactly in the center, with respect to the vertical guideline.
app:layout_constraintEnd_toStartOf="@+id/guideline"app:layout_constraintStart_toStartOf="@+id/guideline"Now we will add dividers to the left and right of this ImageView, as required by the UI.
The lines below place a divider exactly in the vertical centre, with respect to ImageView ivotp.
app:layout_constraintBottom_toBottomOf and app:layout_constraintTop_toTopOfThis is what our UI looks like now.
At the end of these dividers, we will add two ImageViews as below.
This is what our UI looks like now.
Now, we just need to add three TextView's below each circle ImageView, exactly at the horizontal center.
Here’s the code to add this.
In the code above, app:layout_constraintEnd_toEndOf and app:layout_constraintStart_toStartOf will align the text horizontally, with respect to ImageView.
app:layout_constraintTop_toBottomOf will align the text below ImageView.
Here’s our final UI, and our final XML code.
After building this UI, I realize the importance of using ConstraintLayout.
Now, I try to use ConstraintLayout wherever possible.
.