Hello everyone. I hope you're enjoying this. So, now we're going to talk about this constraint layout. Now, you know, I've mentioned it a few times, but I didn't give you much information. Wanted to leave you hanging. Suspense, it's the name of the game in any event, this whole video is going to be on the constraint layout. Now, to give you a bit of a background constraint layout appeared with Android 3.0. The constraint layout is an advanced model of the relative layout. You remember the relative layout? The components can take place, their own place according to each other's positions but there could be problems with different screen sizes. So, we're not going to be able to get the full performance for different screen sizes in our app with using a relative layout. That's why they've come out with the constraint layout. So, we're not going to have those types of problems anymore. We can just create. In constraint layout, components will take their place according to each other's positions and screen edges. So, these features solve most of the problems and give a flexibility, and ways that you could not imagine before in order to create views for your applications.

Now, the constraint layout is a main layout in android studio 3.0 and higher. So, just make sure that you are aware of what version you're running and that's why we do the versioning in the beginning. Alright, so let's go ahead and go to android studio and have a look at how constraint layout works in practice. Alright, my friends, I have created a new project for this lesson and I named this project constraint layout. See how clear and understandable that naming convention is. So now, you know how to create a project in android studio. Right, so go ahead and do that. I'm not going to use up any more time, but just so that you're aware, I created a new project before the lesson so you can go ahead and create a new project or continue on the project that we created in the previous session. It's up to you. It doesn't really matter.

I just want to get you in the habit of creating a new project. I want to show you something. Now, as you can see when we create a new project or activity android studio automatically determines the main layout in the design area and what's it going to be? Yes, constraint layout. So why, why does android studio take the constraint layout as a basic default? Well, for some of the reasons I was explaining earlier, constraint layout is way more useful for the different screen sizes. Of course you can choose whatever layout you want to work on, but, if you learn how to work with constraint layout.

There's probably very little chance that you're going to want to work with any of the other layouts to be honest. Also, it depends on what type of application you are going to develop, but you get the meaning. So anyway, I am going to add a new button to the design area. I add this button to the design area, the android studio gives me a warning, this view is not constrained. That means, when I add a component to the design area, I need to give it a constraint value. So, if I run this application, this Button will take the 00 position. You follow?  Just run the application, see where this button takes its position. So, to run this app, I just click the run button that represents, right here with the green triangle. So, I put this button here, but will it stay in the same position? So, as you can see when the application is opened, the Button went to the 00 position. Now, the reason for this, I didn't define constraints for this button. So, doesn't that lead you to ask the question?

Well, how do I define constraints? Yes, my friends in the constraint layout, we have to give at least two positions, vertically and horizontally for every item. So, I do it like this. For example, let's say I want to give a position for the left side. I will click the left side of the button and drag it to the left edge of the screen. So, this gives its position horizontally.

Or, we could also use the constraint widget section in the attributes section. For example, to give the button component  a constraint value in the vertical plane, just click on the plus icon here. Now, this button is bonded to both sides. Now, I could just drag this button wherever I want. So, when I drop it here, it's going to take its position from the top 180 dp and left 132 dp. You see how that works? Again, you can see these values in the constraint widget section. You can also specify the constraint values here. For example, let's set the distance of the Button from the top of the screen to 200 dp. Make the distance from the left side100. So, let's run it again and see what will happen. Application opens and there you see, it takes its position just like we defined. Also, I can put this button in the center position. All I got to do is right click this button, choose center horizontally or vertically. I'll choose horizontally, but it of course doesn't take the center position, because I need to make the constraint zero that I gave before.

So, for this, I set the constraint value to zero from the constraint widget section. And then after I delete the constraint, it takes the center position. So, let me show you something else. So, I'm going to delete the constraints on the vertical plane. Now, the button currently only has constraint values in the horizontal plane. Notice if you will. The android studio gives me a warning because if I run the application like this, the button is going to jump to zero vertically. In fact, let's run it again. See how the button takes its place center horizontally, but takes the zero position vertically? Now, if I right click again on this button and choose center vertically, it's going to take the center position. Alright, so let's run it again and there you go. It's in the center now. So, how can I delete these constraints? There's a few different ways to do it, but for now I just want to show you three. First, you've got to select the constraint that you want to delete, press delete key on the keyboard that might have occurred to you. But secondly, when you go to the constraint widget section, you have to hover over this circular icon representing the constraint that you want to delete and just click on the X icon. So, the third way is you can do this on the xml side. If you delete all the lines of code that occur when you give a constraint here, the constraints you added to the component will be deleted. So, you can use well, any of these three different ways depending upon where you're at. So, now I will add constraints for all of the sides. Alright, left, right, up and down. There is also a quick way to delete all of these constraints. So, you see there's an icon here. When I click this icon and click Yes, it will delete all of the constraints. Now, I will give two side bounding.

After I bound it, I can drag it everywhere like this, it's easy. Let's add another component I will add a text view. I will put this text view here. So, now we have one Button and one text view. I gave constraints for the button but I didn't give any for the text view. So, If I run the application text is going to jump to 00. You can see that here. Text views in the start position and I can give constraints to this text view horizontally and vertically like this. Now, let me show you another way and give constraints to this text view according to the button. So, let me just delete this from here and I will bound this text view to the button. Now, text view will keep the distance from the button. Can you tell me what the advantage of this would be? Well, when the application runs in the different screen sizes, the position is going to be kept. So, I dragged the button somewhere else  well, the text view is going to follow it. Text view takes its position according to the button. Alright, so now I want to show you how this design is going to look in different screen sizes. So, you can change screen types from here. For example, I will use 5.0, 1080×1920,  420dpi(Pixel). Alright, so I want to change the 5.5 inch screen size and look how my design will be seen. Alright, so you can see here, even if I change the screen size, it'll keep its distance. If I choose a tablet screen that will be seen like this, you can see here constraint layout keeps the position of everything in the different screen sizes, you don't have to think about.

Also, if I click constraint layout and click the clear all constraints icon here, that's going to delete all the constraints. So now, if I run this application, the button and the text view will jump Back to 00. You can see it here. Text view behind the button. So, let me just add another text view. All right? So now we have one button two text views and all of them are in different positions. I didn't give any constraints. So, if I run this design, all of them are going to jump to the start position. Now, I'll show you an easy way to give some constraints altogether.

There is a button here kind of looks like a magic stick. So, if I click on this button, android studio will take care of all the constraints automatically. So, I don't need to figure it out all by myself. Let's run it again and see what's going to happen. And as you can see here, everything is in the same place, constraint layout made the design itself automatic. So, you're just going to put everything wherever you want and click the magic button. Then after that constraint layout will do everything just as if you made it yourself tastes just as good as if it was in your own kitchen. Anyway, it's enough for this video.

So, while we're developing an application, you can use any of the layouts that you want for your design. I've showed you some of the things that you can do, but you could also use more than one layout in the design area. It just totally depends on the project that you want to develop. So, in the following lessons, we're going to use layouts practically. So I am sure that you're going to understand it even better. We will take a short break here and I'll see you in the next video.