How to Support ALL Screen Sizes on Android - Full Guide

hey guys welcome back to new video and in this video i want to show you how you can essentially support multiple screen sizes with your android app because that really is a question i get a lot and you can see here i have a tablet emulator and a normal phone emulator and these layouts look differently so on the tablet emulator we have four images and on the phone emulator we only have those three images here and also here on this device they are just a little bit larger and if we also rotate this tablet here then you will see that there is also an alternative layout for this landscape mode so then these layouts are not stacked vertically instead they are stacked um horizontally so all those are things i want to show you in this video with the help of this layout of course um this is just a random layout here this tutorial is not about how to how to build this specific layout um but with this layout i can just show you pretty well um which concepts you actually need to know to support multiple screen sizes so let's jump right into it here new android studio project just empty we don't need any dependencies but i will quickly copy over my four images here you can of course get these um from the github repository in this video's description so i will just paste this here in my drawable folder you can see here they are kermit one two kermit four and then we will jump into our layout or activity main xml so the first principle when it comes to building responsive uis is you need to use constraint layout if there is only one thing you learned from this video then it is use constraint layout wherever possible and it's actually always possible sometimes you need more layouts within a constraint layout but usually you can build your ui just with a single constraint layout the reason you should use constraint layout there are actually multiple reasons on the one hand just to have a flat layout hierarchy so you don't have many nested layouts which will just need more processing processing power and which will make your app less performant but on the other hand in terms of responsiveness constraint layout just comes with a lot of tools that help you to define relative sizes so that is the second point i want to talk about here um you should avoid hard coding layout sizes so you should avoid um giving a view width of 200dp or so um because it will have width of 200dp on every device but not on every device this will look good and constraint layout just helps you really well with that to just have these constraints to define these relative sizes and you don't need to hard code them but i will show you how this works here in this video so let's first remove this textview here um and then go into our code tab we can actually split this here i don't think you will see this really well because i will zoom a little bit here but let's open this constraint layout here essentially what i want is you can see on this phone i want to have three images in in square format and evenly distributed so this this space here is equal to this space to this base and so on and on our tablet here we want to have four images instead so let's actually first define a layout with four images because then it's easier to just remove one of those so we define an imagery here the layout width and the layout height now it becomes interesting so we essentially want this image to be squared but if you take a look here at our images those are actually not perfect squares so to actually make these squares we need to crop them there's a scale type here for image views we can use center crop which is very commonly used and that will just make our image square so let's try that wrap content wrap content and scale type center crop well let's actually change the width to match parent for now and we close this here or actually we need to set the image resource of course so app colon source compact um and we set it to kermit one and then you will see here in our design tab okay it fills the whole width of our screen because of match parent but because of wrap content in hide it will also fill our whole height of our screen so what we actually want here so in our emulator you can see these are actually much smaller so these don't fill the whole width of our screen um but still they're still squared so how can we do that and many of you would probably just give these now a fixed amount of dp in width and height and that's not how you should do it so that's of course a way how you can make them squared but this will make them have the same size on every device so we want to prevent that this hard coding and luckily with constraint layout we can easily prevent this so what we want to do is i'll split this again we want to set the left width and height to zero dp which will just um expand as much as the constraints are wide and then we want to give this an attribute called constraint dimension ratio so here we can define a ratio that basically defines the proportions of our image so we can say it's 1 2 1 2 1 one two one like this um so that means the width will be as wide as the height is high which is obviously a square right now we don't see anything in lab preview because both width and height are set to 0dp and we haven't set any constraints yet so here we come to another very important concept of constraint layout which are guidelines because they help us to set the guideline to a specific percentage of the screen so let's switch to our design tab here and set these guidelines so two guidelines one here and one here so we can set the image view right in between those two guidelines and we can easily do this by right-clicking helpers and add vertical guideline you can see there's our first guideline and we can do this again at another vertical guideline we go back to our code tab actually you can see here our two guidelines we want to remove this constraint guide begin attribute because we want to set this to a specific percentage so we set the constraint percentage so constraint guide percent to um 0.35 so now you can see here in layer preview this guideline is always now at 35 percent of our screen and we can constraint views to the guideline and we will do the same here for our other guideline and for this we want to set this to 0.35 instead we will set this to 0.65 this will just give us these two guidelines and now we can constrain our image view in between those two guidelines and because this image view expands its whole width this will also mean that it will expand more width on bigger screens so and this will also expand the the height of this image view because we set this dimension ratio so that just means okay take a look at the width of this image view and just make it as high as it is wide so let's just set the constraints here the constraint start to start off here we set our edge to our first guideline then the constraint end to end off to our first our second guideline of course this time and as you can see in our layer preview now it's exactly in between our two guidelines and that's what we want and then we can also constrain the top to the parent top so we set our constraints and the error is gone so then that's actually it for our image so we can now copy this and paste it three more times and just change this to kermit 2 comma 3 and kermit 4. then we click on this second image view constrain it to the bottom of the first one click on the third image view constrain it to the bottom of this one oops that is the margin take the constraint drag it right here and this image view and constrain it to the very bottom one and as you can see there are four image views right now they are directly on top of each other we want to evenly spread them and whenever we want to do this with constraint layout we need chains so what we want to do is we want to go to our design tab again we want to constrain the last element to the bottom and then we simply drag all over these images so they are all selected we right click and go to chains and we want to create a vertical chain and then you can see that will evenly spread them in height or in vertical order so now we build a responsive layout without hard coding anything so all values we used here are relative values so either percentage or just in in terms of constraints and that is really the most important thing you need to consider when building layouts but of course um there are some screens that are a little bit wider some screens that are a little bit more narrow some screens that are just really big like tablet screens and you often want your layouts to look differently on different screens so as i said before we have our phone screen here that should just have three of these images and we have our tablet screen that should have all four so we can essentially accomplish this with so called qualifiers so what are qualifiers you can see if we go to this little icon here click on create other then we can just create a variation for this layout you can see these are all qualifiers here available qualifiers for example we have the country code we could click on this button here and just define a country code and for this specific country the layout will look differently of course for the country this usually doesn't make that much sense but for example we have the smallest screen width and that is very interesting for us here so what is the smallest screen with well that is just the smallest side of our display so if we oops if we take a look here at our emulator then this is the small screen width so even if we rotate the device this will stay the smallest screen width so what we could do now is depending on the smallest screen width of our devices we just say okay this smaller screen width should have this layout and this small screen width should have another layout and in general the smaller screen width um so that is always in dp so there are some typical values you choose for this um there are 320 dp for just the typical phone screen there are 480 dp for like a little bit larger phone screens i think it's about 5 inch displays then we have 600 dp for smaller tablets i think seven inch tablets and we have 720 dp for just normal size or larger tablets of 10 inch i think so let's actually do this we click on the small screen width click on this button and now we can enter a value so i will choose 720 here and this will create an additional layout file for all devices that have a smaller screen width of at least 720p so we can click ok and you can see it just copies this layout we had before and for these devices with small screen width larger than 720 dp we actually want this layout to look like this so these are just our tablets but we actually want it to look differently on phones so on smaller screens what we want to do now is we want to go back to our activity main layout we want to create another variation so again on this icon create other again small screen width and this time we choose 320 dp so this will then just be the layout for all phones we click ok and this time we don't want to have these four images instead let's simply remove the last one here press delete this will be dragged to the top because the the bottom constraint here is set to nothing we can simply drag it down and then they will still be spread evenly and when we now launch our app here on the one hand on our tablet and on the other hand on our phone and then take a look here you can see that is exactly what we want here on this phone we have our three images and on our tablet we have our four images so if you take a look in this layout folder you can see now we have a whole directory for our activity main layout and in it we can see three files and for smallest width 320 dp we have this layout with three images and four smallest width 720dp we have this layout with four images so that is essentially how you can use different layouts for different screens but you might also want to use a different layout for landscape mode that is actually pretty common and you can also do this with these qualifiers so let's again go to this icon click on create other and we also want to set the small screen width to 720dp again so we also only change the landscape mode now for the tablet screens now we can add more qualifiers so we so we can choose one qualifier but if we want we can choose as many as we like here and you can see here is also orientation let's choose this one and we want to create a layout for landscape mode so now this layout variation will only apply to tablets in landscape mode click ok and here is our layout and this is of course not how we want it to look like in landscape mode instead we want these images to be arranged horizontally and for this we actually just need to change the guidelines so we first want to unconstrain these images in horizontal order so i press ctrl and click on this constraint for all of these images then we go to the code tab scroll down to our guidelines and set this orientation to horizontal here as well then we can go back to the design tab you can see now we have these guidelines in horizontal direction and then we can reconstrain these images and when that is done we again need to set the chain for these four images we select all of those and right click create horizontal chain and that's it now we created a landscape mode variation for tablet screens so if we now relaunch this on both our phone and our tablet and take a look here on the one hand our phone if we rotate this you will see this still looks ugly because we created the the layout only for tablets so let's rotate it back and rotate our tablet screen and now you can see the new layout is applied so now these images are in horizontal order so now you've learned how you can build fully responsive layouts um that is really everything you need to know in theory now it's up to you if you're ready to practice this in one of your projects if you're looking for more advanced android courses then check out the first link in this video's description which will lead you to my website and there you will find premium courses about android development and with the discount code philip 15 you will get 15 off of all my courses thank you for watching this far i wish an awesome day see you next video bye bye [Music] so

Channel: Philipp Lackner

Views: 34,916

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, android studio, xml, screen size, responsive

Id: 5lSQcJjZPFs

Length: 19min 10sec (1150 seconds)

Published: Mon Jan 04 2021