ConstraintLayout: Core concepts

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

The fundamental building block of ConstraintLayout is creating constraints. A constraint defines a relationship between two widgets in the layout and controls how those widgets will be positioned within the layout.

constraintlayout.com

Creating and deleting constraints can be done very easily from the Design Layout editor.

From Google's codelab

Layout editor - View attributes

1. Close/open the attributes panel

2. Margin values

3. the constrained width and length

4. Use sliders to change the horizontal and vertical constraint bias for elements with opposing constraints.

The lines in 3 can show as:

Fixed

wrap content

Match Constraints

Guidelines

Those who are familiar with graphic design tools will be familiar with the concept of guidelines already because they are commonly used. But for those that are not, a guideline is a visual guide which will not be seen at runtime that is used to align other views.

constraintlayout.com

Widgets can then be constrained to a Guideline, allowing multiple widgets to be positioned easily from one Guideline, or allowing reactive layout behavior by using percent positioning. Thus guidelines play an important role when we use the ConstraintLayout.

creating a guideline from the design mode