All right, all right, all right. Hello everyone. So, we're going to learn how to support different screen sizes while we're developing Android applications. So, of course, Android devices come with different screen sizes. Pro tip here, right? If you want to develop a good Android application, you're going to need to create flexible layouts. Otherwise, of course, Android is going to take your layout and well scratch it to fit the screen. So, the more you can support different screen sizes and different devices, the more your application will be used by different people. Of course, the most beautiful feature of Android is that you can support different screen sizes and devices using one APK file.

So, Android operating system uses a suitable design for whatever device it corresponds to. So, you will develop one application but you will create flexible designs to support different screen sizes. So, when you develop an Android application, you do need to consider from the small to the big screen.Android splits devices into four different categories according to screen sizes, and they're just regular old names, right? Small screen size, normal screen size, large screen, and extra-large screen.Android considers a small screen size between 2 inches and 3.7 inches.

Okay, the normal screen sizes range between 3.7 inches and 4.3 inches. And for the large screen size, it ranges between 4 inches and 7.1 inches. And Android considers the extra-large screen size between 7 inches and 10 inches. All right, so these categories are just for the phone and tablets. If you do develop an application for smart watches or Android TVs, of course, you're not going to use these screen sizes. So, that means, "Wait, what? You said it does it all for me?" Well, not really. How do you calculate screen sizes? For example, you can see it in the picture. There's a phone size and its screen size is 5.5 inches. So, that means diagonally from one corner to the other corner is 5.5 inches. 1 inch equals 160 dp.

Now, here's a big point. Please do not confuse dp with dpi because dpi is used for screen density. Dp is used for screen measurement. Yeah, I know, it gets deep thick and quick. So, I just want to show you how dp is used in Android Studio. So, for that we need to go toAndroid Studio and do a little practice. So, I've created a new project in Android Studio and added some components to this project. Now, I did this because I really don't want to take all of your time doing this. You know how to do it, it's easy. You've done it before a million times, right? You can do it yourself. I've just used a linear layout here and I've added these components under that linear layout, gravity of the linear layout is center.

Okay, so this is our design page. And I can change the size of this design page. If I click here, I can see the other screen sizes. So, the size of my design page is 5 inches and it's density is 420 dpi. Now, let's see if I can properly explain dp. We use dp measurement for the component size. For example, if I write in here 200dp, the width of this button is going to be 200dp. If I write in here 400dp, well, it's going to cover the width of the screen. So, the width of this screen is approximately 400dp. You see how that works? Dp not pixel, right? This is designing Android applications. We use dp, not pixels. But from one corner to another corner, that gives us the screen size. So, if I change the screen size, I can see how my design is going to look on the other screen sizes. All right, so on this 7 inch screen size my design will look like this.

Okay, so now I need to explain virtual device screen sizes. So, you know, we use virtual devices  to test our applications. We can actually see screen sizes of the virtual devices just by clicking on tools AVD manager. All right. So, after that I need to click "Create Virtual Device." So, I can see the screen size of every device here. For example, for Pixel 2, the screen size is 5 inches. If I click the tablet section I can see the screen sizes of the tablet. For example, the screen size of the Nexus 9 tablet is 8.86 inches.  Right? So, you can select one of the devices and see how your application is going to look on different devices. That's why we've got different virtual devices here.

So, I've got three. One of them is the Nexus 10 and the screen size is 10 inches, funnily enough. And another one is the Nexus 5X phone and its screen size 5.2 inches. And the last one is a Nexus 7 tablet and that screen size is 7 inches. All right. So, these are my devices and this is the Nexus 5X, Nexus 7, Nexus 10. So, if I don't create another design for different screen sizes,Android is going to take this design and show the same design on all the devices. All right?

So, let me just run this application on these three devices. First, I'll run the application on Nexus 5X. And there it looks normal. Then, secondly I will run the application on the Nexus 10 tablet. All right. So, it's working. And the last one I will run Nexus 7. So, you can see the same design on these three different devices, and the design looks kind of small on the larger screen devices, wouldn't you say? So, if I add small-sized components in this design and run the design on a bigger screen, it's not going to be very useful on these big screen devices. You get the point.

So, because of all this, when you develop an Android app, you really should create a special design for the bigger screens. So, if I use big screen components in this design and I run this design on a smaller screen, well, some of the components are not going to be able to be seen. So, that means when you develop an Android app, you should create a special design for the smaller screens too. Right? So, I will mention another thing, The orientation of the device. It's vertical. And this just happens to be what we call portrait mode. So, if I change device to horizontal, well, my application also turns, but some of the components don't look right anymore. So, this horizontal mode is known as landscape. So, users typically don't use their phones in just portrait mode. Right? They'll use it sometimes on landscape mode. Sometimes they won't even know when to use what mode. But whenever I design an Android app, I also need to consider it, right? So, I need to create a special design for landscape mode too.

So, now I want to show you how to create different layouts for different screen sizes. Now, you remember we mentioned that Android splits devices into four different categories according to screen sizes. That means that you need to create four different layout design. So, I'm going to right click this 'Layout folder' and select 'New Layout Resource File.' This is going to open up a new window, and in this window there's a size section. I'll select size, click this forward button, and it opens a new category. In this category I can select screen sizes. Small, normal, large, extra large. Right? So, I want to select the large option, then name the file.

Now, you've got to be very careful here because the name should be the same as a main design file. So, that means I'm going to write in here activity_main and click 'OK'. So, Android Studio creates a new layout for the large screens. So, my design here will be shown on a large screen size devices. Now I'm going to copy these components from the other layout and pass them to the large screen layout. Now, because I don't want to take up all your time with this design, if you want to you can create your own design. But when I pass to the large layout, the screen size changes to the 7 inch.

All right, so I'm going to delete some of the components from the large screen layout because I want to show you the difference between the two. So I'm going to run this layout on the 7" tablet. I've got two different layouts and I'll run this application on the 7". So, Android Studio is going to choose which one of the designs to use automatically. And sure enough, Android selects a large screen design for the large screen device. Now let's create another layout and I'll right click 'layout' folder, select 'New', 'Layout Resource' and I'll give a name, the same name, to this file. But this time I'm going to select 'X-Large' screen size. So when I create this layout,Android Studio shows me this layout on the 10" screen. So, I'm going to 'Copy' the design from the other layout, paste it into the X-Large layout. So when I use the same components on the big screen, whoa, they appear small. You should change the size of the component.

You should use big sized components on the big screen size devices. So, I'm just going to delete some of the components that show you the difference between the layouts here. Now I have three different layout designs. Three of them have the same name. Every one of them has a different design. So, I'm going to run my application on the 10" tablet, and this time Android studio selects the 'X-Large' design for the 10" tablet. So even though I've got three layouts,Android Studio selects one of them automatically. Don't need to specify a thing. I want to run my application on a Nexus 5X phone and the Nexus 7 tablet. So you can see three different devices. Three different layout designs. So that means I will prepare my design for different screen sizes and put all of them in one APK file.

And then after that everybody can use this APK file for their Android devices, no matter the size. I can use bigger sized components on the big screen layout. Also, I did need to mention this again, these screen sizes are for phones and tablets. So if you're developing an application for another device, like a smart watch or an Android TV, you'll need to use those other screen sizes. So if I want to create a new project, I need to select the project type. So if you want to develop an Android application for smart watches, you can select the different layouts. Or if you want to develop an application for Android TVs, you can select this layout. If you want to develop applications for automobiles, you can select one of these layouts.

It's pretty cool. But you see all of these were for Portrait mode. So that means, that we need to create designs for Landscape mode as well. So, I'll show you how to create a design for Landscape mode. So I'm just going to right click again, 'layout' folder, select 'New', 'Layout Resource', and this time I want to select the 'Orientation' section. So after that select 'Landscape' and I will give the same name to this layout file. Click 'OK'. And if the user changes the device mode to Landscape mode, this design is going to appear on the device. Now if you notice the design that was created according to the smart watch here, but I'm going to do it for a 5" phone. That's why I choose a 5" phone here. I will design the layout according to how I want to show it on the device. So I'll copy the components from the other design, paste them into Landscape mode.

Okay, so I'm going to change this design. I will add one horizontal layout under the ConstraintLayout. I will put this vertical LinearLayout under the horizontal layout and then I will add more vertical layouts under the horizontal LinearLayout. So I'll change the layout width and the height of the vertical LinearLayouts to the wrap content. Okay, so now I want to put some of the components under this vertical layout. And now I have a new design for Landscape mode. Now of course, it's not a perfect design. I'm sure you can do better. I want to show you the nuts and bolts of it. So, I just want to run the application on the Nexus 5X. Now, when the device is on Portrait mode, this is what you see. If I can change the device mode to Landscape mode and there you go, Landscape design is seen on the device now.

So I changed device mode to Portrait again, there's the other design. So you can swap back and forth. All right, so if you want to support all the different screen sizes, well, that means that you need to create four different designs for Portrait mode, four different designs for Landscape mode. That means in total you will need to create eight different designs. But hey, you know what? Don't worry out it. If you don't want to support Landscape mode, you don't have to create designs for Landscape mode, that's all up to you. In any event, that's how you support different screen sizes. I still want to see you in the next video, though.