In this video I'll show you how to organize your views on the screen using different layouts. We use the application Block03 as an example. In this application, the upper 30% of the screen are occupied by a blue section which holds two buttons: a small button and all of the remaining space is used up by another button, a big button. Then below the blue section, we have nine buttons positioned on a rose compass which is displayed in the background. Start a new Android Studio project. Call the application Block03. Next, Next, choose an Empty Activity. And Next, and Finish. This time, we will work only with the activity_main.xml layout file. Let's get rid of the default "Hello word" TextView. And go to the XML file to change the relative layout into a linear layout. You can also remove all the padding here. Okay, so now our screen should be divided into rows. So we need to specify that the orientation of this layout is vertical. android:orientation="vertical" Now the screen is divided into rows. Let's first define the content of the first row as a linear layout. The width of the layout will be equal to the one of the parent: match_parent. And here, I'll put 0. I'll explain to you why in a few minutes. Okay, that will be our first component, and in the second row, we'll put a relative layout. Again, the width will match_parent, and for the height, right now, we only put 0. We want to specify the height of each view of the linear layout and relative layout to match 30 and 70% of the screen. So I'll say that this layout here, adds up to 100, and then I can define that the weight of this particular layout, is 30. And the weight of this one is 70. If you go to the design view, it will be difficult to notice but if you put your mouse here, you can see a little dotted line here that cuts the screen into two parts. The linear layout here which occupies 30% of the screen and the relative layout which occupies the remaining 70%. To make the difference between the two layouts more visible, we'll add a background color to the first one. android:background and let's use an existing Android color, like I don't know, a nice bright blue. Okay, that's more easy to see the difference between the two sections now. And for the second section, we'll put a background image. In order to do that, I'll copy an image into the drawable folder from the resource folder. And that into this one, okay? And now I can use this image as a background using @drawable and then the name of the file. Okay, let's look at the result. Now I will add the small and big buttons here. The small one and a second one. Let's change the text on this one so it reads "small". Let's call it button_small. And let's change the text on this one so it reads "Big". This will be the button_big. Okay, and then the height of this button should match the blue section: match_parent. Okay, and we want this button to occupy half of the space which is remaining after we place this small button. So we're going to say that the total width of the layout amounts to, for instance, 10. Make it 10. And then I want that after the small button is placed, I want this one to take half of the remaining space. It means that I want it to take 5. So let's say that its width does not fit content anymore. It's 0 pixel. Then instead, I'll use its weight and this will be 5. When looking to design view... that's what we wanted. Now let's position the buttons around the compass here. First, let's put the north button. I want it aligned with the center of the screen and with a small margin separating it from the top of the image. Okay, let's call it North. And that'll be our button_north. Now let's change its background so it's easier to see. Let's pick this gray for instance, that's fine, okay. Now let's add the South button, so the South button is aligned with the bottom of the parent, bottom of the relative layout and it's centered horizontally. And let's call it South and the button will be the button_South. Okay, and let's put the same background as the previous one. Now the East button is aligned with the right of the parent and it's centered vertically. button_East, then let's set the background here. Let's do the same with the West button aligned with the left and centered vertically, change the background. Let's add now on the button at the center. So I want it to be centered horizontally as well as vertically. Sometimes it's not really easy to do it from here, so I'll move to the text view in order to do that. So let's look at the bottom of the file. So this new button is in fact the center button so let's call it button_center. It's already centered horizontally but instead of being aligned with the top of the button West, I'd rather center it vertically. Okay, now we need to add the four more buttons for northeast, southeast, and so on and so forth. Let's keep on editing the XML file from here. I'll just copy this one and change a few things. First, it doesn't read central but northeast so that would be button_ Northeast, and then I'll change information about the position. So I'll specify that it's located below the button_north, and above the button_east. Then it is located to the right of the button_north, and to the left of the button_east. To the left of button_east. Okay, let's look at the result in the graphical preview. I've repeated this process with the three other buttons. This is what it looks like. If I run it on the emulator, I have the same result. In this video, you've learned how to organize multiple views on the screen. In order to do that, you use layouts such as LinearLayout or RelativeLayout. When you use a LinearLayout, you need to specify its orientation, whether vertical or horizontal. And if you want to allow a view to occupy a fraction of the layout, you define the weightSum for the layout, and then you position either the width or the height of the view to 0, and you specify the portion of the space you want this view to occupy using the weight attribute. When you're using a RelativeLayout, you need to give each view an ID and then you can position views in relation to a each other using below, above, to right of, plus the name of the reference view. You've also learned how to display a background image. In order to do that, you first copy your file into the drawable folder from the resource folder. Something I forgot to mention in the video is that the file name should match the rules for Java identifiers. that means it should start with a letter and contain only letters, numbers and the underscore character. Then you can access this file and use it as a background. In the XML file using background=@drawable/ and then the name of the file without the extension. And in the Java file you just use the setBackgroundResource method and then R.drawable. the name of the file.
