Lesson 181. ConstraintLayout: match_constraints, toolbar tools, guidelines, aspect ratio

Lesson 181. ConstraintLayout: match_constraints, toolbar tools, guidelines, aspect ratio

We continue to consider ConstraintLayout.


At ConstraintLayout, we can still use wrap_content as a width / height View or specify a fixed size in dp. But match_parent is not recommended here. The help is written as follows:
You should not use match_parent for any view in a ConstraintLayout. Instead of using “match constraints” (0dp)

Instead of match_parent, we are offered to use match_constraints, aka 0dp. If match_parent extends View to its parent size, match_constraints View will take up space available between the objects to which it is attached.

Let’s look at all three modes in the TextView example, which is tied to the left border on the left and the button to the right.

wrap content

Width in content

fixed size

We explicitly specify a width of 150dp

match constraints (0dp)

TetxView is stretched between binding objects.

These modes can be switched to Properties not only by layout_width property, but also by clicking on a special icon

Note that this icon varies depending on the mode. With wrap_content it looks like a Christmas tree, with a fixed size – like a segment, and with match_constraints – like a spring.

Because match_constraints stretches your View between binding objects, it needs a two-sided binding. If your View is anchored, for example, only to the left, and no right anchors, match_constraints will work as wrap_content.

Center alignment

You can use two-sided binding to align the two View centered.

And you can use the scroll to change the center position.

Text alignment

Let’s say we have two TextViews with different font sizes. And we need to put them next so that the texts are on the same line.

View can be aligned on the bottom border by binding between the bottom borders

But in this case the texts will not be on one line.

You can use text alignment to correct this

In this case, the texts are on the same line and the lower boundaries are not.

Tools in the toolbar

There are several tools in the toolbar that can help.

I numbered them in the screenshot. Let’s go in order.

1) Show / hide bindings

If enabled, you will see all your bindings on the screen. If disabled, only the bindings of the selected View will be visible.

2) auto-bindings

If enabled, you can create parental bindings if you bring View to the parental boundary.

Or you can create a double-sided bindings by bringing View to the parent center

3) Remove all bindings

Clicking this button will remove all your snaps on the screen. If you accidentally pressed, then press CTRL + Z and it will return.

4) Create bindings

Creates snaps for all View on the screen. But it does not do very well. It may be corrected in the future, but for now I do not recommend using it.

5) Indentation

Here you can automatically specify which indent will be used by default when creating the binding.

The first bind was created with an indent of 8. Then I changed the default value to 24. And the second bind was created with an indent of 24.

6) Miscellaneous

At this point there are three types of operations on the View

to collect

Put together a few selected View, first horizontally, then vertically.

This operation does not create any bindings.


Stretches the View between nearby objects.

You can stretch several objects evenly

This operation does not create any bindings.

Place evenly

Helps to position View evenly

7) Alignment

Horizontal: Left, Center, Right

Vertical: text, bottom edge, center, top edge

The bottom row of buttons is centering. It creates a two-sided binding. There are two modes.

Normal when an anchor is created to nearby objects

And parental, when an attachment is created to the boundaries of the father.

8) Guides

These are the lines you can use to create bindings.

Consider an example with vertical guides. Add it to the screen and adjust the position

You can position it either by indenting to the left, or indenting to the right, or by the percentage of parent width.

Let’s look at some use cases


Use the guide to split the screen width into two TextViews

the example is more complicated

Here are some guides that we used to build the TextView grid

Aspect ratio

Consider the example of View height. If View has two-sided vertical bindings and height is set to match_constraints (0dp), View will be stretched in height between the bind objects. We can adjust it so that the height in this case does not stretch but depends on the width of the View.

This is done so

For the Two Sided Vertical View, we set the height to 0dp. View stretches in height. Then, turn on the aspect ratio by clicking on the triangle. Set the ratio of width to height – 3 to 1. That is, the height will now be three times less than the width.

We change the width by adding text to the TextView

As the width changes, so does the height to maintain a set aspect ratio of 3: 1.

If you have horizontal and vertical two-sided bindings for View, and match_constraints is set to height and width, then you can toggle aspect ratio: height depends on width or width on height. To switch, click on the triangle

Initially, the aspect ratio is off

The height and width of the View are independent of each other.

Then we turn on the mode when the height depends on the width. A bold vertical line appears in the square to the top right.

As the width changes, the height changes. And manually change the height does not work.

Then the width depends on the height. A bold horizontal line appears in the square to the top right.

As the height changes, the width changes. And manually changing the width does not work.

There are a couple more cool ConstraintLayout features: chains and barriers. The next lesson will be about them.

Discuss in the forum [0 replies]

Leave a Comment