Support Multi-Screen Sizes in Jetpack Compose

hey guys welcome back to a new amazing video which is about supporting multiscreen sizes in jitpack compos and the first thing you want to know is what screen size we have we have three different types of screens which are the compact screens which are smartphones you can say or screens that have a width less than 600 DPS we have the medium screens which have of course a width bigger than 600 DPS and these can be small tablets you can say and we have the expanded screens which have a weight larger than 840 DP and these are of course tablets and we'll see how we can make our UI fit all these screens and of course all of that in Jetpack compos so let's check our and Studio this is the app that we will be building as you can see right now we have these list items and if we rotate our screen now we have a different screen width but as you can see how large the items are but you's just go back and see the app that I already built in prepared here we have the same items again but if I now rotate the screen you you see now they are shown in a different way a way that makes them look better okay the other thing we'll see is this kind of profile screen which we just have some profile info from name email and gender and here you can say an image profile or something in a fire rotate everything stays the same just as scrollable lay out like this but if I go to the app that I already prepared and here we have the same UI again if I rotate now the it's shown in a different different way which is a lot better as you can see we don't have that much empty space as we did in the other app so let's go to the other app we have a lot of empty space from the sides here and now in our new app we actually make use of that space like this so we'll see how to do this in jpa compose and let's get started okay I have already prepared this demo app right here which is the one that you've been seeing this one of course when wi rotate nothing happens our screens stay the same here I'm just calling the profile screen I also have the item screen so I can also call the item screens if I want or the profile screen and nothing is different in my item screen I just have a bunch of items eight items in a lazy colon you already saw how they look like in the profile screen again I have a colon I have first the image you can say it's not exactly an image here but suppose it's an image and here I have the user info email name email and gender and user info is just two texts nothing is special and I show all of that in a colum and I have the main activity I just call the screen that I want now nothing is special but now what we're going to do is we create a new file that will actually make us support all these screen sizes so this file is going to be called window size like this and it's just a file and this file will have a bunch of things the first thing is a data class that is called window size like this and in this window size now we have have two things which are the height and the width okay so V width of Type window type we will see what window type as well and then duplicate this for height and window type can be three things as I already told you a compact a medium or an expanded okay so let's create this in a Unum class so Unum Class Window type we first have compact medium and expanded okay so the width can either be one of these and the height can either be one of these depending on the screen size the actual screen size of the device let's create some space and now we want to create a composable function called Remember window size and this function returns a window size now we want to return this window size with of course the width and the height of our device that of course is going to be either compact or medium or expanded for each of these and to get that height and size of our device we need a configuration so all configuration is going to be equal to local configuration. current now we get the configuration in which we have the height and the width now we're going to return of course a window size the width is going to be when my configuration do screen with NDP is smaller than 600. DP so any device that has a width that is smaller than 600. DP then that is a compact device or the compact width device so window type. Compact and then we can duplicate this two more times if it's larger than 840 then that is a medium larger than that then of course it's expanded okay we can just copy this for height and the height of course we want to get the height screen width height DP and here screen width height DP here I don't have actually to write thep like this I can remove that and just like this now I know my screen width and height whether it's compact medium or expanded if it's compact then I'm going to use a layout if it's medium I'm going to use a different one if it's expanded if I want even to use a whole different one for expanded then I can do that what I usually do is just use a layout for Compact and then another layout for both of these which is going to be displayed in large screen sizes now what we can do is let's start with our items this is how they look by default and let's actually call that in our activity so items screen let's run the app and see that before we do anything this is how they look like and before weate the device nothing really changes they are very large like this and they don't look good what we are going to do in our item screen we have now this layout or this UI that is technically for compact devices we just take it right here create a new composable function called items screen maybe start it with a compact like this compact item screen and paste that so this is for Compact and then we'll check our screen size by creating our variable of screen size so V window size is remember window size of course this one returns a window size that has the width and the height and then let's go back here all I'm going to do is when my window size do width now I care about the width now it just depends right now if your screen realize on the width then you can actually go for width if your screen relies on height now it just depends in my case I care about the width if you care about the height in your screen then you go for height okay so if it's window type. compact then I'm going to going to call my compact item screen else I'm going to create another function for that or another screen and for that I'm just going to copy this one it's just going to be a little bit different and this one of course for medium to expanded item screen okay so medium to expanded now we want to have a lazy common because we normally have a lazy common let's actually check that in the app if I I to run it as you can see I have a normal lazy common now what I'm going to have is actually a lazy veral grid so that's what I'm going to use in my case I still need this modifier and I need to pass my columns that is going to be grid sales. adaptive and I'm going to go for 250. DP as the main with of course now I'm using a la vertical Grid in my case but it doesn't mean you should use that as well you need to find find what fits your screen the most for medium to expanded screens okay the rest of the things are going to be just the same so I can even take this item from here for example if I want to extract it in a different function let me run the app and let's see now what what's the difference after now we actually check the screen withd okay so normally it's still the same but if I rotate as you can see now I have a larger width and they are showing a different way of course this will be the same for a tablet or whatever screen that actually is more than 600 DPS which is what we consider as a compact screen and these numbers of course are not from my head or anything these are from the official documentation of Android okay so this it now for this screen now what we move on is to let's go to our main activity and call our profile screen let's check that this is how it looks like if I rotate my device it doesn't look good as you can see I need to fix that let's go now to our profile screen and we'll do the same we can actually take this again extract it to another function composable let's call it compact profile screen and let's paste all of that inside it and we'll check that again so me just copy from there like this paste it here let me delete these two and here for compact then I'm going for compact profile screen else I'm going to go for a different screen that I'm going to create and of course my new screen is going to be called medium to expanded profile screen so composable medium to expanded profile screen okay I'm actually going to paste this but then adjust it for my new screen size let's paste it right here and the first thing I want to do let's check our screen let's actually run the app first so we can see what we want to do okay here it is now everything is in a a column and what I want to do is actually if I rotate my screen then I actually don't call anything but let me just go back what I want to do is to use a row so in the row I will have the image right here next to it this column of text that's what I'm going to do okay let's go here we'll have the same spacer but now we'll use a row and that row does need a modifier modifier. fil Max width and then vertical alignment is going to be alignment do Center virtually okay good now what I want to do is take everything into my row so let's copy everything that I have and then put it inside the row right here and then I can actually now delete this one I don't need that anymore all I really need is to put these in a column as you can see because they should be on top of each other and in a row they will be next to each other so right here I'm going to go for a Colum and put this user info inside it here I'm going to go for width because I'm in a a row and it say 100. DP now let's just call this function up here medium to expanded profile screen and then let's try the app great as you can see now use that space that we had left previously because previously we had a lot of space in the end here in the start but now we use it in a different way we can also try this app so let's actually open any other app like Gmail and then we can do this to actually use split screen like this and let's use our app so this is how it's going to look like in smaller screen because of course its width is least than 600 DPS and this is it for this video in which we learn how to support multiscreen sizes if you like what I'm doing you can support me by subscribing liking the video and sharing with your friends see you in the next video and bye right

Channel: Ahmed Guedmioui

Views: 907

Keywords: android studio tutorial for beginners, android studio project, android studio app development, android studio app, android studio app project, kotlin android tutorial, kotlin tutorial, kotlin multiplatform, kotlin full course, jetpack compose tutorial, jetpack compose android, jetpack compose mvvm, jetpack compose state, jetpack compose viewmodel, jetpack compose vs xml, jetpack compose app, api key, jetpack compose animation

Id: 0xtrtRstrLA

Length: 11min 59sec (719 seconds)

Published: Sun Mar 10 2024