‫Welcome back.
‫In this video we'll continue with the constraint layout.
‫And let's go to the design mode.
‫Select any view you can notice.
‫Inside the attributes window we have this layout and the constraint widget panel.
‫We have two constraints and the margins.
‫This is from the left which is 36.
‫And this is from top which is 104.
‫We have two constraints start of start to parent and top to top of pearl.
‫These are the constraints.
‫I can add another constraint by dragging and dropping either in the blueprint or in the layout.
‫Here you can notice that we added another constraint to this constraints list.
‫When selecting a view, the attributes window includes controls for one that it's marked as number one
‫size ratio.
‫Number two deleting constraints.
‫So if you click number two, you can delete the constraint point three height and width mode.
‫And the next minute we're going to learn about the height and width mode.
‫For the margins you specify the margins and five the constraint bias.
‫You can also highlight individual constraints in the layout editor by clicking on them in the six constraint
‫list.
‫We learned about this list.
‫Now let's learn about the height and width mode.
‫You can change the way the height and width are calculated by clicking the symbols indicating with three
‫callouts.
‫We have three symbols fixed.
‫You specify a specific dimension in the text box below, or by resizing the view in the editor.
‫These arrows refers for the wrap content.
‫The view expands only as much as needed to fit its contents.
‫This zigzag match constraints.
‫The view expands as much as possible to meet the constraints on each side.
‫After accounting for the views margin, however, you can modify that behavior with the following attributes
‫and values.
‫Back to Android Studio.
‫I'll set this and click on it.
‫From wrap content to fixed size.
‫You can see the view changed.
‫If I click again to match constraints, you can see that this text will fill the parent and the constraints.
‫Also, you can specify margins.
‫For example 20 click enter.
‫You can see that this text view is 16 from the left.
‫From right is 20.
‫You can set it from the top as 20.
‫Click enter and the text view is going up and margin 20 dpi.
‫Also, when you create any other new widget, for example, this button, I'll drag and drop it.
‫You can infer the constraints with one click.
‫Click on further constraints and it will match the current position.
‫You place it here with the other views automatically.
‫Also, you can clear all constraints.
‫You can specify the default margins.
‫You can enable auto connection to parent.
‫And here you can select the different modes, show all constraints, fade, unselected views and others.
‫Also, you can create guidelines.
‫Guidelines are invisible layout lines that you can use to align and position the views.
‫They are especially useful for responsive designs as they help maintain consistency across different
‫screen sizes and orientations.
‫For example, I'll create a horizontal guideline here and this is our guideline.
‫And I'll make margin from top 376.
‫And I'll remove the button constraints and drag and drop it to.
‫Here I can add constraints to this guideline like this 24.
‫Also I can add the horizontal and vertical constraints to the parent, but I added this vertical constraint
‫to the guideline.
‫This is our guideline.
‫If we go to the example code you can see this is a guideline.
‫Run the application and you can see that this button will stick to invisible guideline inside this layout.
‫So guidelines are invisible layout lines that you can use to align and position views.
‫This is the basic usage of constraint layout.
‫In the next videos we're going to build more complex layouts using the constraint layout.