Alright. So, hello. And what do you think we're going to talk about in this video?

I think it's got to be layouts. Because that way we'll be able to do the design level in Android Studio. But before we get to the design level, we got to learn about layouts in order to design the android application. So, what is this layout thing all about? So, layout it's an interface that we use to place Android components on the Android application. So, we use layouts to establish components in a particular order. And these components are comprised of buttons, text views, radio buttons, all kinds of different things.

There's varieties of layouts. So, these are linear layout, relative layout, you got your table layout, and constraint layout. You might have heard me talk about that before. So, these are the main layouts, and we're going to talk about now the first three of these. So, in particular this constraint layout, we're going to leave that to another video. Now for most of the projects that you're going to do and that you will surely do with us here, we'll be using the linear layout and the constraint layout. But if you have a table design in your project, you got to use the table layout. Now, I want to tell you about all of this through Android Studio, if you will.

So, why don't we just go to Android Studio right now. So, you know that we've got a project, we've done that before. This name is my android project unless you changed it. So, let's just close this project right now, and we'll create a new project. So, click on the 'File' tab in the upper left-hand corner. Actually you can create a new project by selecting the new project option, but I am going to close this project, and create a new project. So, that's why, I am going to choose close project as my option. So, as you can see we've encountered the start screen of Android Studio, and from here I'll select the new project option. Then from this window, I select the Phone and Tablets tab, and then the Empty Activity option and press the 'Next'. Now from this window, we're going to configure our project. So, I'll set the name of the project as layouts. Now I am not going to change the project package name, and I won't even change the file path where the project will be saved. Programming language will be Kotlin, Minimum SDK level can be 23.

So, I create my new project just by clicking on the 'Finish' button. Now, at this stage, we have to wait for the project to be fully created. So, here is our project create. Now, when we open a new project in Android Studio, it creates the activity_main.xml file. So, now I can click this tab, and open the design area. We're going to do our application design on this page. So, first of all, to make the design area look like a phone screen, see this little eye icon here, click on it and select the show system UI from here, and as you can see the action bar, the navigation section. It's all right here.

And this page is default layout. Well, this happens to be the constraint layout. So, for now we will not use the constraint layout though. We're going to start with a linear layout. So, have a look at the component section. And you will see the different layout types under the layout section. So, before we continue talking about layouts and doing what we're going to do, I am just going to delete the text view component here. So, I'll select the component, press the 'Delete' key on the keyboard, and there it goes. Now we're going to continue.

So first, I am going to change the constraint layout, and instead of constraint layout I will write the linear layout, and I am going to do this using XML code. So, to do that, I am going to open the XML site, by clicking the 'Code' tab in the right corner up here. So, this whole thing is a design area, and you've got this code tab up in the upper right-hand corner. Now you could also click the 'Split' tab for XML, and design to appear side by side together. Also if you want, well we could just close the project directory, it's by pressing the minimize icon right here. So, there's a few options for you. Now we're going to move on and change this constraint layout. So, for this I am going to delete the constraint layout.

And after that, I am just going to write in here linear layout, and when you start writing linear, the code editor offers you LinearLayout. So, from here you can just create the linear layout by selecting the LinearLayout, and pressing the 'Enter' key. Pretty cool. So now, our layout is linear, but also we've got to specify its orientation. Can't just leave it like that. So, you got to see that there are two different types of linear layout. One is horizontal, the other is vertical. You can specify that by writing the orientation keyword here. Select the android:orientation option. Press 'Enter'. So, now we've got to select the orientation type.

I am going to choose vertical as my orientation. So, now in this layout, components are placed from the top down. If you'd use horizontal orientation, components are going to be placed from left to right. So, how does it look? Well, let's go back to the design area, and we'll get a closer look at this linear layout. All right, for example, I am going to put in a text view here. Of course, you may not know the components yet, such as text view, and button, and don't worry about it. We're going to learn all these components as we go along in detail.

But for now, we are focusing on layouts. So, just follow me. So, if I find the component, that we're going to add to the design area, right here from the palette section, and select it, I can then just drop it into the component tree here with the drag and drop method. And you see it started from the top, and after that I will add a button same way. You see it's placed under that. So, if I add another button, placed under the first button, so I am going to change the orientation of this linear layout. I am going to change it to horizontal. Now let's have a look at the design page again. But now, what is that? So, did you notice?

Only the text view component appears on the screen, why? I'll get to why in a moment. But now I just want to change the layout with property to wrap_content from this attributes section, and now you can see buttons and text views are sorted from left to right. So, if I add one more button, it's going to take its place after the second button. So, there's a visual understanding of the difference between vertical and horizontal. Totally changes what you can see. So, before we continue, I am going to make this orientation back to vertical and it will be the way that we work with our linear layout.

All right. Now let's have a look into the attributes of the layout and we'll be able to change them. Now I ought to mention to the layout width and the layout height. These are two properties here. They are match_parent and wrap_content in here. When you choose match_parent, what's going to happen? The layout will cover the entire screen. But if you choose wrap_content, the layout will be big enough to enclose the whole content. Also, you could get a numerical value for these properties.

And what I mean by that is you don't have to choose just match_parent and wrap_content. For example, let me give a layout width 300dp and layout height 400dp, and you see what's happening. Now also you can add more than one layout. I am going to choose a layout width  and height match_parent. And I am going to add another layout, but this time it's orientation, it's going to be horizontal. So, I added this under the vertical LinearLayout. See. We'll add two TextViews under this horizontal layout. And choose layout_width wrap_content for the horizontal layout. And now you can see these two TextViews side by side. So, in the same way, I'm going to choose layout_height wrap_content for the horizontal layout. So, now you can see the button too. So, now these two TextViews depend on the horizontal layout. Button depends on the vertical layout. Actually, the button and horizontal layout are elements of the vertical layout. Also, the horizontal layout has two more elements that are TextViews. So, now I'm going to add one more button here, and it will take place under the other button. See that. Now also, I could add one more layout. This layout is also a horizontal layout. This layout is the element of the vertical layout.

And I will connect these two buttons to this new layout. And I'm going to do that on the XML code  side. So, I'll cut these two Buttons' XML code and paste them inside the layout. See how that works. And also, I'll choose layout_width wrap_content for this. Now we have one main layout, and its orientation is vertical. We also now have two child layouts, and their orientation is horizontal. And every horizontal layout has two childs as well. These are buttons and TextViews. People typically say children, but I just wanted to give you that extra bit of clarity. All right. So, moving on. So, we got the LinearLayout. We can now continue with the RelativeLayout. So, I'm going to delete these components. So, to delete any component by the way, just simply select the component you want to delete, and guess what, press the 'delete' key on the keyboard.

I'll change the LinearLayout to the RelativeLayout. So, for this, I'm going to open the XML  side again. Il'l write RelativeLayout instead of LinearLayout. And thusly, our main layout in the design area becomes the RelativeLayout. All right. So, how does this RelativeLayout work? So, when we first of all point out, the RelativeLayout is a very old layout, and we'll almost never going to use it in our project. But you got to notice that we cannot see the RelativeLayout component in the Layouts section of the Palette, because RelativeLayout is seriously not used much anymore. It's been moved to the Legacy section in the Palette. But I still want to give you some information about it because you might come across it some point. Because when you're working with different Android developers in the future, which you will be doing, you're going to need to use, well you may need to use a RelativeLayout, at least you may need to know something about it.

Anyway, that's enough of an explanation. Let's just examine it quickly. So, components are placed by each other's position in the RelativeLayout. I'm going to add two buttons to show you how this relative layout works. You see these two buttons take their place on top of each other, because we haven't given them any position. So, I'm going to change the first button text to be A. And its id will be a. The second button, I will change its text to be B. And its id will be b. Now I'm going to add this to the XML side. I'm going to find the first button, and I'll add new XML code. And this code is layout_centerHorizontal="true". So, now button A takes a place center of the row. I'm going to add another code line. This time, layout_centerVertical="true". Look at that. The A button now takes a place in the center of the screen. Now I'm going to give a place to the B button in relation to or relative to button A. I'm adding a new line of XML code for button B.

This is layout_below. And after choosing this code, we need to write the id of that button according to which button will be positioned. And since we will position the B button according to the A button, I'm just writing the id of button A, which is a right here. Now, button B will take its place under button A. Now, if I should want button B in alignment with button A, I should add a new line of code. So, this code is got to be layout_centerHorizontal="true". Now, button B is under button A. If I want to put button B above button A, I should write layout_above="@+id/a". Smaller. See that. Now button B is above button A. So, you see, with their RelativeLayout, all the components take their place by each other's position. Now, let's move on to the TableLayout.

So, I'm going to just delete these buttons, open up the XML  side, now write TableLayout instead of Relative. So, now our main layout is Table. In this TableLayout, components take a place in a table position. So, in the TableLayout, there are rows and columns. Also, we need to add rows to this TableLayout. I'm going to add three rows. You can find the TableRow component in the Layouts section. So, I will go ahead and add a second row, and then I'm going to add a third row. So, after that, I will add three buttons for each row. Drag and drop the Button component from the Palette to the Component Tree. So, we've got three buttons in this first table row. Now I want to also add three buttons in the second row. And then lastly, I'm going to add three buttons under the third row. So, you see this, we now have nine buttons under TableLayout in the table position. So, where can we use this TableLayout? For example, if I want to design a calculator, well I'm going to use the TableLayout. So, in fact, let's just write some numbers in the text of the buttons as if we are designing a calculator. So, I'll write 1 in the text of the first button, 2 for the second, 3 on the third. So, see that. This way, I can quickly change the text of all the buttons.

9, text of the last button. And as you can see, this design can be used for a calculator. So, that's pretty much it for layouts that we're going to be using while we're developing applications together. Of course, in the next lesson, we're going to learn that ConstraintLayout I promised you. So, we're going to take a short break here. I'll see you in the next one.