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.
Width in content
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.
You can use two-sided binding to align the two View centered.
And you can use the scroll to change the center position.
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.
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.
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.
At this point there are three types of operations on the View
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.
Helps to position View evenly
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.
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
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.