Android Studio by default suggests that we use ConstraintLayout when creating screen layout. Let’s see what this is for a piece and how to deal with it.
Although this is a 180th lesson, it will be honed for beginners because it will provide links from the very first lessons. Therefore, I ask the experienced developers not to be surprised at the style of presentation of the material, the beginning you can miss.
a little theory
Let’s start with the basics themselves. You need to use a special container to place different components (buttons, input boxes, checkboxes, etc.) on the screen. It is where you will place the components. In Android, components are called View and the container is ViewGroup.
There are several types of ViewGroup: LinearLayout, RelativeLayout, FrameLayout, TableLayout, ConstraintLayout, etc.
They differ in how they arrange the components within themselves. LinearLayout, for example, builds them horizontally or vertically. And TableLayout – as a table. You can read more about this in Lesson 6.
In this lesson, we will understand how the components in the ConstraintLayout container will behave.
Generally, the word Constraint translates as constraint, coercion. But to me, it does not accurately reflect the content. The most successful word I can pick up here is bind. I will use it.
To help you practice yourself, I recommend creating a module for this lesson. We already talked about how to create a module in Lesson 3.
In the studio menu: File > New > New modules
Application / Library name: ConstraintLayoutIntro
Module name: p0180constraintlayoutintro
Package name: ru.startandroid.p0180constraintlayoutintro
So, we have a module in Android Studio. And it has the file res> layout> activity_main.xml.
We will open this file with a double click. It looks like this
Make sure the Design tab on the left and bottom of the flyer and the view is Design, not Blueprint.
You now see Hello World text on the screen. This text is displayed using a View called TextView.
You can see it in the Component Tree (bottom left).
Note that TextView seems to be embedded in ConstraintLayout. This is what I was talking about in the beginning. ConstraintLayout is a container, and inside it are different View, in our case – TextView. You can also say that ConstraintLayout is the parent or parent of TextView’s ViewGroup.
Let’s remove TextView from the screen. To do this simply select it on the screen or in the Component Tree and press the Del button on the keyboard.
Now ConstraintLayout is blank and the screen does not display anything.
If you suddenly deleted something by mistake, you can always restore it by pressing Ctrl + Z.
And if you did something wrong there and you can’t cancel it, open the Text tab (left and bottom) and paste this code there:
Your screen will return to its original state.
Why bindings are needed
Let’s add some component to the screen, for example, TextView again. To do this, simply drag the component with the mouse from the Palette to the screen.
TextView then appeared on the screen and in Component Tree.
Let’s launch the application and see what this text will look like.
We see that TextView has gone left and up. Something clearly went wrong.
If you open a text view of your screen (the Text tab on the bottom left), you will see that the TextView element is highlighted with a red line.
Hovering over it will show an error:
This view is not restricted, it only has designtime positions, so it will jump to (0,0) unless you add constraints.
The studio tells us that View is not tethered. Its current status on the screen is relevant only for development (ie only in the studio). And when the application is running, this position will be ignored, and View will go to the point (0,0), that is, left-up (which is what we observed at startup).
How to make sure that View in ConstraintLayout stays in place and does not angle? Constraints must be added. They will set View positions on the screen with respect to any other items or parent View.
How to Add Bindings
Let’s add bindings to our TextView.
If you highlight on the TextView screen, you can see 4 circles on its sides.
These circles are used to create bindings.
There are two types of bindings: one puts the View horizontally and the other vertically.
Let’s create a horizontal binding. We tie the TextView position to the left edge of its parent. Let me remind you that the parent of TextView is ConstraintLayout, which in our case occupies the entire screen. Therefore, the edges of ConstraintLayout coincide with the edges of the screen.
To create an anchor, click on TextView to highlight it. Then left-click the left circle and drag it to the left border.
TextView also went left. He was tied to his father’s left border.
But not necessarily they should be close. We can retreat. To do this, simply left-click TextView, drag to the right, and release.
Note the number that is changing. This is the value of TextView indentation from the object to which it is attached (in our case, from the parent’s left border).
let’s launch the application
Previously, TextView used to go up to us, but now it just went up. He did not go to the left because we created a horizontal binding for him. And TextView now knows that it has to be horizontal with some indentation from the left edge.
Let’s create a vertical bind to anchor TextView vertically.
We use the upper circle and pull it to the upper limit. TextView binds vertically to the parent’s top border. You can then drag TextView wherever you need to adjust horizontal and vertical indentation. When you drag, you see the value of the indentation.
TextView is now tied both horizontally and vertically. That is, he knows exactly where he should be on the screen while the program is running.
Run to check
TextView has not gone anywhere, but is where we have set up using bindings.
Let’s add another View, for example, the Button button.
If you launch the application now, the button will go left and up because it is not tied to anything.
We can bind not only to the borders of the parent, but also to other View. Let’s tie the button to TextView.
We tied the button to TextView, creating two bindings
1) Vertical binding. The upper border of the button is tied to the lower border of the TextView. Indent = 82.
That is, we can say that the vertical axis:
button top = TextView + 82 bottom
2) Horizontal binding. The left border of the button is tied to the right border of TextView. Indent 103.
left border of button = right border of TextView + 103
Since the button is tied to TextView, if we now move TextView, then the button will also move.
We’ll add View. For example, CheckBox.
Let’s make it horizontal to the same level as TextView. To do this, we need to bind the left border of CheckBox to the left border of TextView and make a zero indent. And vertically tied to the lower boundary of the father.
Now the checkbox and TextView are left-aligned.
How to remove a bind
To remove the bind, just click on the appropriate circle. We remove the bindings from the buttons.
There is a special button to remove all the bindings at once
Binding on both sides
We have looked at examples where View was tied to each axis on one side only. That is, only left or right horizontally, and vertically above or below. But we can bind View on both sides of each axis.
So far, let’s just look at the horizontal snap. But, of course, all this will work for vertical binding as well.
For example, let’s try to tie the left edge to the parent parent border and the right edge to the parent parent border.
Let’s clear the screen from all View and add a new TextView without any bindings. Now let’s tie it to the left and right borders of the father.
TextView initially went left because it was anchored to the left border, but after creating an anchor to the right border, it aligned and is now centered. That is, the bindings are aligned with each other, and the View is exactly in the middle between what it is tied to the left and what it is attached to the right. That is, in our case, the View is in the middle between the left and right boundaries of its parent.
Note that such two-sided bindings appear as springs, not lines.
Let’s complicate the example a bit by adding a button and adjusting the bindings
The button is tied to the right edge. And TextView is tied to the left edge and to the button.
If we now move the button, then TextView will remain exactly midway between the left edge and the button.
We can adjust the two-sided binding so that the View is not located in the middle, but closer to the left edge or to the button. It is convenient to use a special scroll in Properties.
With this scroll you set the proportion. The default value is 50. This is half of 100. Accordingly, View is half the distance between the objects to which it is attached. In our case, at value = 50, TextView is in the middle between the left edge and the button.
If you set a value of, for example, 25, then TextView will be at the left edge at a quarter of the distance between the left edge and the button. If you set 75, the TextView will be 3/4 of the distance between the left edge and the button from the left edge.
And as far as the distance between the left edge and the button is concerned, these proportions will always be maintained.
In the next lesson, we will continue to explore the possibilities of ConstraintLayout.
If you came in this lesson from the first lesson, you can now go back and continue your studies. This information will be enough for you.