‫Welcome back.
‫In this video we're going to learn about constraint layouts.
‫A constraint layout is a versatile and powerful layout manager introduced in Android that allows you
‫to create complex and flexible UI designs with ease.
‫It's designed to make it easier to create responsive and dynamically out, adapt to various screen sizes
‫and orientations, and reduce the need of nested layouts.
‫The core concept of constraint layout is constraints, which define how child views are positioned and
‫sized relative to each other and to the parent layout.
‫Constraints are set by specifying the connections between the edges of a view and other views, or the
‫parent layout.
‫Views and widgets such as buttons, texts, and others are added inside the constraint layout tag,
‫which then becomes the parent to all the nested elements.
‫In constraint layout, each of you has four sides, which are called anchor points.
‫The blue circles.
‫These anchor points operate as a source or a target.
‫For constraints.
‫To define the view's position, we have to add at least one horizontal and one vertical constraint for
‫it, and to set horizontal or vertical positions of the view, you will need to use some constraints
‫provided in a constraint layout.
‫These constraints are written as shown in this general formula.
‫This is the general syntax of defining constraints in Xaml.
‫We start with app layout constraint and we need to specify the source anchor, which is the start and
‫top or bottom.
‫Then we have two underscore two target anchor which is in this case start end top or bottom of equals
‫to the target ID, which is in this case can be the ID of any view.
‫Or the parent parent for the root layout will be the device itself.
‫And in this case you are setting the root layout.
‫If you specify a parent and if you have nested layouts, parent will be the layout containing that particular
‫view.
‫Now let's see the different types of constraints.
‫The constraint layout top to top.
‫This constraint tells that the top of the source view should be the same as the top of the target view.
‫The top layer of both green and the blue views are in the same vertical position.
‫The second constraint type is layout constraint button to bottom of this constraint tells that the button
‫of the source view should be the same as the bottom of the target view.
‫The bottom layer of both green and the blue views are in the same vertical position.
‫Another constraint is top to bottom of this constraint tells that the top of the source of view should
‫be the same as the bottom of the target view.
‫You can see in the image here, the top layer of green and bottom layer of blue views are in the vertical
‫position.
‫Another view constraints is layout constraint bottom to top of this constraint tells that the bottom
‫of the source of view should be the same as the top of the target view, as shown here.
‫The bottom layer of green and top layer of blue views are in the same vertical position.
‫We have another constraint start.
‫To start off, this constraint tells that the start of the source of view should be the same as the
‫start of the target view.
‫As you can see, the start layer of green and the blue views are in the vertical position layout constraint.
‫End to end of this constraint tells that the end of the source of view should be the same as the end
‫of the target view.
‫As you can see in the image here, the end layer of green and end layer of blue views are in the vertical
‫position.
‫The constraint and to start of this constraint tells that the end of the source view should be aligned
‫as the start of the target view.
‫The end layer of green and start layer of blue views are in the vertical position.
‫Start to end of constraint tells that the start of the source of view should be aligned as the end of
‫the target view.
‫The start layer of green and end layer of blue views are in the vertical position.
‫With the help of these constraints, you can align elements the way you want without the need of unnecessary
‫nested layouts.
‫Let's move to Android Studio and start learning about the constraint layout in action.