‫Welcome back.
‫In this video we're going to learn about Constraintlayout.
‫In Android Studio.
‫We have three text views inside this Relativelayout.
‫I'll change this Relativelayout to a Constraintlayout type Constraintlayout.
‫And this is the tag of the Constraintlayout android x dot Constraintlayout dot widget dot Constraintlayout.
‫This is for the attributes of this Constraintlayout and the ending tag.
‫And the closing tag for the Constraintlayout is here!
‫A Constraintlayout 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 dynamic layouts, adapt to various screen sizes
‫and orientations, and reduce the need of nested layouts.
‫The core concept of Constraintlayout 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.
‫To remove the constraints, you can click on this button clear All Constraints, and I'm removing all
‫constraints from this layout and we have three text views.
‫I can drag and drop them.
‫Every widget and every view in Android has four circles.
‫For anchor points at least we need to anchor a horizontal and a vertical one.
‫I am anchoring this text view with the parent edge.
‫You can see it.
‫This is the parent the constraint layout that we specified a margin to it as 20 dpi.
‫Here I'm constraining this text view as 48 from the parent from the top and 44 from the left.
‫If I click on this text view, we can see the text and we have these attributes.
‫Layout constraint start to start of parent.
‫Following the general formula of the constraint attributes, we are specifying the source anchor as
‫start to start and the target id, I'm specifying it as parent start, which is the source anchor start,
‫which is the target anchor, and the target ID which is parent.
‫You can specify another ID, another view IDs like first text view.
‫And you can see it's constrained to this start to start of this first text view back to another text
‫view which is the second text view I need to specify here the parent.
‫And also we have another constraint.
‫This is for the vertical constraint and this is for the horizontal constraint top.
‫This is the source anchor.
‫This is target anchor which is the top and this is the id which is the target ID.
‫In this case I'm anchoring.
‫I am constraining this text view to the parent to the parent constraintlayout, which is in this case
‫this rectangular blue rectangle.
‫Also we have margins.
‫You can see margins start as 44.
‫I am defining here a 44 margin from the left and 48 margin from the top.
‫So you can see margin start and margin top here.
‫In this case we are defining the constraints to the first text view or this text view.
‫Now let's move to another text view.
‫In this case I want this case this text view to be anchored to this text view and not to the parent.
‫So I need to specify one horizontal and one vertical constraint.
‫I'll drag and drop this anchor and replace it.
‫Here you can see this text view is anchored.
‫Now to this another text view.
‫Also I need to specify a vertical one a drag and drop this anchor.
‫And you can see this text view is anchored to this text view.
‫If I move this text view, the second text view will be replaced and moved automatically.
‫Whenever I move this text view, the second text view will be dragged again and moved again.
‫If I move to this text view hello world, I can center it to this text view.
‫For example, if I specify these two horizontal constraints and specify it to this.
‫Welcome to our course.
‫It will be centered under this.
‫Welcome to our course TextView.
‫Drag and drop the third constraint.
‫And here we go.
‫If I move this text you can see Hello World will be centered again because it's constrained to both
‫left and right.
‫From that, welcome to our course text view.
‫By specifying the left and right constraints, you are adding two constraint two horizontal constraints.
‫And if you specify up and down or top and bottom constraints, you are specifying both vertical constraints.
‫At least you need one horizontal and one vertical.
‫If you run the application, you can see that the real application is matching our layout.
‫Because I'm adding the vertical and horizontal constraint for every view I create.
‫This is the power of constraint layout.
‫You can get rid of nested layouts from from linear and relative layout, and you can drag and drop,
‫add the horizontal and the vertical constraints and you can go with it.
‫There are a lot of things you can add with the constraint layout like the guidelines, chains, barriers,
‫bias ratios.
‫But in the next videos we're going to learn about them in deep.
‫When working with complex UI applications using Constraint Layout, you can create a wide range of complex
‫and flexible UI designs without the need of nested layouts.
‫It's a powerful tool for modern Android app development, offering both a Visual Design Editor and Xaml
‫support to suit different design workflows.