ConstraintLayout for Android

AConstraintLayout is very flexible and most supportive Layout for Android UI design. It is similar to RelativeLayout in that it arranges its child views with relative to other views and parent.

Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread)

ConstraintLayout has two main advantage over the RelativeLayout

1. ConstraintLayout Editor is much more supported in Android Studio Layout Editor. i.e. ConstraintLayout can be easily designed visually using Android Studio.

2. allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

Adding ConstraintLayout to an App

To use ConstraintLayout in project, we need to proceed as below:

Ensure you have the maven.google.com repository declared in your module-level build.gradle file:
```
repositories {
    google()
}
```
Add the library as a dependency in the same build.gradle file, as shown in the example below. Note that the latest version might be different than what is shown in the example:
```
dependencies {
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}
```
In the toolbar or sync notification, click Sync Project with Gradle Files

Basic Building Blocks of the ConstraintLayout.

1. Constraints

The basic building block of the ConstriantLayout is constraint. It is the constraint which actually defines the relative position of the view inside the ConstraintLayout.

To define a view's position in ConstraintLayout, we need to add at least one horizontal and one vertical constraint for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view's position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.
When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

As shown in above diagram when a view is dragged and dropped in a layout editor using constraintlayout it shows few symbols arround it . The arrow line is actually a constraint and circular handles are used to define a constraint and Square Box are

When opposite Constraint are added to a views these will change and look a spring and place the view in center of the screen. In order to move the view to one side that to left of it or right of it then we can adjust it using constraint bias from the properties window as shown in below figure

Alignment

Align the edge of a view to the same edge of another view.
In figure 6, the left side of B is aligned to the left side of A. If you want to align the view centers, create a constraint on both sides.
You can offset the alignment by dragging the view inward from the constraint. For example, figure 7 shows B with a 24dp offset alignment. The offset is defined by the constrained view's margin.
You can also select all the views you want to align, and then click Align

in the toolbar to select the alignment type.

Horizontal Alignment

An offset Horizontal alignment

Baseline alignment

Align the text baseline of a view to the text baseline of another view.
In figure 8, the first line of B is aligned with the text in A.
To create a baseline constraint, select the text view you want to constrain and then click Edit Baseline

, which appears below the view. Then click the text baseline and drag the line to another baseline

Learn Android Development