How to Support All Screen Sizes in Jetpack Compose

hey guys and welcome back to a new video in this video i will show you how you can support all screen sizes out there using jetpack compose i overly do have such a video for xml layouts which you can check out here however nowadays we're using jetpack composed and well for that i don't have a video about that yet how you can actually make sure that your app looks pretty good on all screen sizes so let's actually jump right into my phone actually um i'll actually just show you what we will build here something very simple but uh yeah typical use case why you would want to support multiple screen sizes you can see i just have two lists in the end that are arranged in a column wise fashion however if we actually have a wider screen then we could also fit these two lists next to each other so they are actually not in a color wise fashion instead in a simple row and that will exactly happen if i rotate this device as you can see suddenly we get two lists next to each other because we of course have more space to fill here and the same will also apply for tablets and yeah just larger tablets with these strategies that i will show you here you can simply support them all okay so this is actually the initial project here it's yeah as i said just a very simple lazy column in which we have two lists list one and list two and each of these lists contains ten items that are simple texts here just as a simple example but of course that can apply to any type of layout you want to build now i want to show you how we can take this column and actually transform it to yeah actually two columns or two rather yeah that we have two lazy columns next to each other that's what i'm what i'm trying to say and i will give you a good solution that you can apply to all of your projects to easily support different screen sizes let's jump right into it and for that i will create a separate file new kotlin class of file and i will call this it's actually a composable function remember window info that's how i will call it we select file yes let me add that to git and we can create this composal function here remember window info it doesn't take any parameters and it will actually return something it will return a custom class that we will create here right down uh right down there uh it will be data class called window info and this class will basically contain on the one hand information about our screen width and screen height but also what type of screen it actually is because in android we typically have three different main types of screens that all differ regarding their screen with ndp so usually everything that's less than 600 dps wide is considered a compact screen like a phone screen for example then everything between 600 dp and 840 dp is usually um yeah the typical size for smaller tablets and everything above 840 dp is then used by larger tablets we'll just now make a utility class here with this window info class that just contains this information and then later on in our code we can distinguish okay what kind of screen are we actually currently at like depending on the screen width and if that is in a given balance then we simply show this layout and else we show a different layout that's in the end how this will work so first of all instead of this window info class we will create a steel class called window type and we will have three different window types like exactly the tabs i just talked about on the one hand we have compact for yeah just small screens like phones we have a medium for smaller tablets and arduino info window type and we have expanded for larger tablets or just yeah if you if you have a long um a long tablet that's yeah there's a long seven inch tablet for example and you rotate that then your screen with is also of course larger and it would be expanded here in this case you can you also just saw that on my phone even though it's the phone if i rotate it it suddenly switches to a different window type here so it started with compact but when i rotate it it of course has more width to offer so we can simply then use or then we get the the medium value here to show something different in our ui hope that got clear um let's add the screen with info here so we will simply pass that for the width we'll also not want to info type again um screen height info so we also have these values for the height and i'll just also attach the normal screen with here in dp and the screen height and dp and then we already have this utility class which we can then return here in our function window info and now to actually create such an object we can simply use the configuration we can get from a local configuration that current and then we return window info so our class here and now starting with screen with info i want to set that equal to when when that configuration screen with dp so with this configuration we get now get access to the screen with ndp units if that's less than 600 so as i said if that's less than 600 dp we want to return our compact class we can duplicate this done if it is actually less than 840 dp we want to return medium and else we are on very large screens we want to return expanded and we can do pretty much the same thing for screen height info simply copying that one expression replacing this with screen high dp screen high dp as well just that these values differ a little bit here so for compact we will use 480 and for medium we will use 900 and everything above 900 dp screen height is considered an expanded screen and if you're wondering where i get these values from those just come from the android documentation so those are real official values and not just some values i experimented with so i really recommend using the same and we also need to pass something here for the screen width screen width um just configuration screen with dp since that requires a dp value we can just write dot dp and finally screen height configuration screen height dp dp and we already wrote our little utility function which you can now use wherever we want in our compose project like in main activity so here above our lazy column we will now get our window info using remember window info now that contains all the information about the window at that specific state and we can use it to distinguish okay what kind of window type do we currently actually have like compact medium or expanded and based on that we show a different composable that's really the whole magic behind that so starting with this lazy column that we already have that just contains our two lists in a column wise version so first the first list and then the second list that should only be shown for compact screen widths so only if we have a very narrow screen then we want to show these lists on top of each other basically like we do it here if we however have a screen that's larger than this compact level or rather wider than this compact level then we want to show these next to each other so for example when we rotate our phone or when we just have a tablet that has a wider screen than our typical phones so let's actually start with checking if the window info screen with info is actually compact because in that case we simply want to show this lazy column of course um in a real project you could make this a separate composer so just organize this a little bit more and not have a very messy if statement here but for this very simple tutorial i think this is fine so in the else case of this if statement if we're not on a compact screen with we know that we are at least on a medium screen width so we know that our screen width is at least 600 dp white so in that case we can now just write our composable how it should look like instead on that screen size so here we of course want to have a row because we want to have these two lists next to each other we want to say modifier is modifier dot fill max width so our row just occupies our whole screen with and then we can pretty much simply copy this lazy column paste it here in our row and just remove this second items block because we now have two lazy columns essentially since we want to display these next to each other instead of saying fill max size for this laser column we can say weight one f so with that since we put it in a row we can just make sure that each laser column we have here will occupy the same space so 50 of our screen width we can then copy this lazy column and paste it another time below here um fill max width that's fine let's change the color here this one to green again so we just we can just distinguish between these lists a little bit easier but that should already be it and of course with this window info class you now have a much more fine-grained control we have a very simple example here we just check okay the compact screen width then we show this else we just show the other type but of course you can check depending on compact what happens if it's medium then you show something differently um or if it's an expanded screen you could even then show something some other kind of layout here however for the simple tutorial here i think this is fine and this helps you to get it let's launch this on my uh device here this is not it yet there we go you can see in the compact view it looks just like i showed you before however when i now rotate my device then you can see these lists display next to each other very beautifully oops yeah so very quick tutorial i hope you like this and if you are actually new to jetpack compose and you haven't understood effect handlers yet that's a quite complex topic especially if you're yeah if you're new to this approach to uh to design your app with jetpack compose then you definitely want to click here and don't miss this video in which i really go through all effect handlers out there

Channel: Philipp Lackner

Views: 25,311

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, screen sizes, compose, jetpack, tablet support, landscape, portrait, dp, screen width, screen height, window info

Id: HmXgVBys7BU

Length: 11min 56sec (716 seconds)

Published: Wed Feb 23 2022