Learn ConstraintLayout: ConstraintLayout Tutorial for Android

Source: Android Developer Official

What is ConstraintLayout?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy means there are 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.

All the power of ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.

Now let’s start learning the ConstraintLayout

Add ConstraintLayout to your project

To use ConstraintLayout in your project, proceed as follows:

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 {
androidx.constraintlayout:constraintlayout:1.1.2
}

We have created two video tutorials on the ConstraintLayout to make the learning very simple for you.

Here is the first part.

MindOrks Youtube

The first part covers the following:

  • What is ConstraintLayout?
  • Motivation to use ConstraintLayout: Reduces Nesting of ViewGroups & Easier Maintenance
  • Terminology: Constraints, Anchor Points or Constraints Handles and Base Anchor Point
  • Types of Constraints: Relative Positioning, Center Positioning, and Bias, Circular Positioning, Dimension Positioning, Chains
  • Dimension Constraints: Hardcode value in dp, WRAP_CONTENT, and MATCH_CONSTRAINT

Here is the second part.

MindOrks Youtube

The second part covers the following:

Virtual Helper Object in ConstraintLayout are special widgets that don’t really take part in the layout, yet, they enhance other widgets’ behavior.

The Virtual Helper Objects are as follows:

  • Guideline
  • Barrier
  • Group

So, these things are covered in the video tutorials. I am sure that these videos will help you in learning ConstraintLayout.

Happy Learning :)

Team MindOrks

Clap, share if you like it and follow me for the updates.