Constraint Layout Tutorial Part 1 - Android Studio Tutorial

Constraint Layout.
ConstraintLayout is similar to that of other View Groups which we have seen in Android such as RelativeLayout, LinearLayout, and many more. In this article, we will take a look at using ConstraintLayout in Android.

android: id This is used to give a unique id to the layout.
app:layout_constraintBottom_toBottomOf This is used to constrain the view with respect to the bottom position.
app:layout_constraintLeft_toLeftOf This attribute is used to constrain the view with respect to the left position.
app:layout_constraintRight_toRightOf This attribute is used to constrain the view with respect to the right position.
app:layout_constraintTop_toTopOf This attribute is used to constrain the view with respect to the top position.

Advantages of using ConstraintLayout in Android
ConstraintLayout provides you the ability to completely design your UI with the drag and drop feature provided by the Android Studio design editor.
It helps to improve the UI performance over other layouts.
With the help of ConstraintLayout, we can control the group of widgets through a single line of code.
With the help of ConstraintLayout, we can easily add animations to the UI components which we used in our app.

How ConstraintLayout differs from Linear Layout?
With the help of ConstraintLayout, we can position our UI components in any sort of order whether it may be horizontal or vertical. But in the case of Linear Layout, we can only arrange our UI components either in a horizontal or in a vertical manner.
Linear Layout provides usability with which we can equally divide all the UI components in a horizontal or vertical manner using weight sum but in Constraint Layout, we have to arrange this UI component manually.
In Linear Layout the UI which is actually seen in the Design editor of Android Studio will be the same as that we will get to see in the app, but in the case of Constraint layout if the UI component is not Constrained then the UI will not look the same as that of in design editor.
How ConstraintLayout differs from RelativeLayout?
In Constraint Layout, we have to add constraints to the view on all four sides whereas in Relative Layout we can simply align our UI component relative to its ID using the ids of UI components.
In Relative Layout, the UI which is actually seen in the Design editor of Android Studio will be the same as that we will get to see in the app, but in the case of Constraint layout if the UI component is not Constrained then the UI will not look same as that of in design editor.
How Constraint Layout differs from Grid Layout?
In Grid Layout the UI components are only arranged in Grid Manner and we cannot arrange the UI components according to requirement, whereas in Constraint Layout we can align UI components according to the requirement.
In Grid Layout, the UI which is actually seen in the Design editor of Android Studio will be the same as that we will get to see in the app, but in the case of Constraint layout if the UI component is not Constrained then the UI will not look same as that of in design editor.