The Ultimate guide to supporting all screen sizes in Jetpack Compose using Material 3 design

in this video I'm gonna show you how to support all the screen sizes in jetbag compose and as you can see now the design looks exactly the same on all of these screen sizes starting with this tablet going to this pixel phone this one which is a smaller one and the smallest one we have here but not only that I'm only gonna show you how to support the split mode so if we just go here and click on split screen let's choose another app as you can see the application still interactive and the user can still work with our application in Split mode even if we make this smaller as you can see the application is still interactive if you have not watched my video when I built this screen you can either watch it and build it by yourself or you can download this project from my GitHub repository and the link is in the description if you get the project from GitHub then make sure to switch to the screen design Branch because here I have the design in this Branch now clicking for stick out and before we start I want to make some adjustment to the design and let's open the login screen file so scroll down to the top section and we want to change this ratio to 0.5 and one more thing is we want to just put it in a new composable function so the project get cleaner so this box and this value let's extract that in a new function and I'm going to name this create account section now we can just start by adding this dependency from Material 3 design and this Library will help us to determine the screen type so in Android phones there are compact medium and expanded screen sizes and this Library will calculate that for us and give us the screen type so the main idea behind this method is to detect the screen type and to provide the appropriate dimensions for the specific screen so if we go back to the design you can see that we are passing some fixed values here like this one and this one for example well we don't want to do that anymore because we want to provide these values depending on the screen type so if we have expanded screen size we want to pass more than just 36 but if we have for example compact medium screen size like the pixel 2 we want to pass less than 36 and to be able to do that we want to create a new data class to hold these padding and sizes values so inside the UI here so the theme let's create that and call these diamonds and this is going to be a data class now I'm just gonna paste and as you can see these are the values that we're gonna change for each screen type now we're going to create different objects from this class and each one of them is going to have the sizes and padding values for a specific screen type and for that I'm just gonna copy and paste and you can of course copy those from my repository here as you can see for the compact type in the compact type there are actually three types so we have compact small like the smallest device you saw previously and the compact medium type which is the pixel 2 for example and we have the standard compact which is like the pixel 6 then we have a medium and expanded types those are just tablets but but different sizes so the expanded here is the largest one now for these values that I pass here the compact one is the same one that we have now now same thing we did in the diamonds file we want to go to typography file and do the same thing we want to provide different styling for our different screen sizes and for that I'm also gonna copy and paste okay so as you can see just the same exact thing we did there in the diamond soil we do it here so we have different styling different typographies for each screen type and the next step is to find the screen type and to provide one of these objects from the topographers same thing from the diamonds we want to just find the screen type and pick one of these objects depending with their screen size now let's go to theme to do that logic let me just remove this now we want to start by creating a typography and diamonds objects we're gonna give him default values then we're gonna write some logic to find uh which one should we provide so let's start that now to calculate the window size or the screen size we can say window and we can use calculate window size class which comes from the library that we added from Material 3 design now we want to pass the activity here and we're gonna get it from this function we can say Activity which is an activity and I'm gonna assign a default value so to get an activity in compose we can use the local context.current and we can catch that to the main activity now we can go down here we need to add a notation let's add that and one more thing we want is the configuration so let's say local configuration dot current so this one is going to give us information about our screen and let's give it compact typography by default and also app diamonds object that we will provide and let's give it compact Diamonds by default now we want to write the logic that will find or will provide these values in here we can say window dot with such class so we want to find that depending on the width now we can say a window with such class dot compact the first type we have now as we said this type had three different potentials the first one the compact small size so if we want to use the config object we want to get the screen width and if it's between 0 and 360 then we know we have a small screen size and here we can change our app diamonds objects to compact small diamonds same thing for the typography if it's between 361 and 600 then this would be compact medium like the pixel 2 for example here we want to change the app diamonds to compact medium diamonds and typography to compact medium topography else than that then we just know that we have a compact screen size like the pixel 6 so let's change also those to compact diamonds and the topography to compact typography now for the second screen type we have is in the medium one not this but if this and here we're just gonna change the app diamonds to medium and same thing for the typography and else than that then we know that we have an expanded screen size and here we're gonna pass [Music] expanded diamonds and expanded topography okay cool now we can pass typography here but we did not provide the app diamonds yet and to do so we need to use the composition local inject back compose so to do that let's actually go and create a new file here and let's call this app urls and this is going to be a composable function and we're gonna pass the up diamonds here now we want to remember this from a recompositions so we can say app diamonds but remember and we can pass the diamonds now to provide this as I said we're going to use composition local and and this is used when you expect your value to be accessed from many composable functions so you can use composable so you can use composition local in this case so basically you have an object and you provide that object in the composition local composable function we're gonna see that so let's first create the app diamonds we want to provide we can say Local app diamonds composition local off and here we need to pass a default value so we'll pass compact diamonds and here we can say composition local provider now here we will provide this one with this one sorry this one with this one so we can say local app diamonds provides app diamonds and inside here we want to pass our material 3 composable function so let's get it in here which is a composable function and don't return anything we can code that in here and now we get back to the theme we can just wrap this material theme with our abuse and then here we pass the app Diamond then we just pass the material theme inside this apparels and one more thing I want to do here is to access this app Diamonds by using the material theme now if we want to exit these odd diamonds we need to call local appdiamonds.current then as you can see we have access to all of these values but we don't want to do that we just want to access it by the material theme and for that we're going to create an extension value here and call this diamonds we can get this composable like this and we can say local appdiamonds.current and that's already it for the setup now we simply can go to the login screen and replace these static values so let's start doing that but before I do that let me actually launch to the two apps and show you that the design is not going to look the same on them I'm gonna launch on Pixel 6 and in pixel 2. okay so as you can see on the pixel 6 the screen looks very good this section don't have account create now is not visible because the pixel 2 here has a smaller screen and we did not consider that when we passed these static values so now what we can do again is to replace these by the one we added inside the diamonds now we need to do 36 here we could pass material theme dot diamonds and this is medium two and here we can pass material theme dot diamonds I'm going to copy this part because we're gonna write it over and over again now and we want to pass medium one uh now let's go to the top section here that shows the shape with the text and logo and inside here we can actually change desktop padding to material theme.large for the width We're Not Gonna Change that I'm okay with the width and for the size we want to change it to logo size now that's it for the top section let's go up here and let's also go to the login section and let's see what we need to change here so we need to change this one to small three we have this one up here we want to change it to Mid a small two sorry now let's see what we have also we have this social media section so here what we have is nothing I guess no we actually need to change this small three and for the last section this one do we have anything in here yes we have this font size we want to change it to material theme dot typography dot labelmedium dot font size and we want to copy it and put it down here now let's see the files we have we also want to change the social media login here we have a fixed height here we want to change it to material theme diamonds dot button height and we also have another button in the login screen I think we have it let me search about that button yeah so in the login section we have this fix type for the button we want to change that to material theme button height now hopefully we have not forgot anything but let's actually launch the app now on the two devices pixel 2 and pixel 6 and see the difference now okay now as you can see it doesn't look as we expect yet so it appeared but not what we expect so to fix that we can simply go to the diamonds file and now we can adjust on the compact medium size here so as you can see we did not change the the button height so let's actually overwrite that from here by default it's set to 40 DB we can change that to verify for example so let's also for example change this medium one to 22 this medium 2 to 30 to 28 and now let's launch the app by the way this will only affect the pixel 2 device because the pixel 2 here is a compact medium diamonds so this will only affect this device and as you can see in our looks even better and yeah so you can actually keep adjusting these values until the design fit really cool and now let's actually set the fraction in the top section to 64 again I changed it to 0.5 because I wanted the issue to occur but now let's just put it 46 again now let's launch the app on the smallest screen device to see how that looks like and as you can see this also looks as we expect and one thing I want to highlight here is that not all screens actually required to all of this setup because in some screens you don't actually need to pass fixed values you would just use the column and rows properties also box of properties to just make your design look good but the approach that I showed you today to provide different padding values depending on the screen size moving to the next section in this video which is the landscape and portrait mode I'm going to show you how to support that as well so to do so we can go to the app Euros here and we can create a helper value that will determine what is the orientation of our screen so we can say screen orientation and we can use local configuration current and we can say orientation we can do that here like that for that we want to create a get and we provide that in here but we want to add The composable annotation now let's go to our screen and here we can simply check the screen orientation equals to configuration dot orientation portrait then we just can actually extract this in new function and let's call this portrait login screen we can actually put that into here and other than that we can create another design for the landscape mode now for me I'm gonna copy this column here and I'm going to call the login section and the social media section just to show you that and I'm going to extract this in a function and call it landscape login design or login screen now let's launch the application on the pixel 6 and let's rotate the device and as you can see here is the design and it looks really good but what we can also make is to add vertical Arrangement here to the center now this will look even better let's see that let's rotate this and let's click on here and here you go as you can see now you can also add spacing here between this login button and this text and this now supports the landscape mode just see the portrait mode and everything works now the last section for this video is the split mode so if we click here not here so let's actually click on the split screen mode and now let's choose another app as you can see now this showed the landscape mode but if we make this bigger it will show the portrait mode but it doesn't look as we expect so the best way for me to support the split mode is to make the screen scrollable so let's do that first of all I'm gonna call the portrait login screen in both cases and in the portraits login screen we want to make this scrollable we want to add vertical scroll and remember scroll state now if we preview the app we want to get the expected result and that's because we use fraction in the top section and in the bottom section the text that shows at the bottom let me show you there to demonstrate it we don't have any spacing here anymore between this text and the social media and if we launch it on a small screen device like the pixel 2 here that the shape here is got bigger and now we need to scroll down in order to see this now again we can fix that by changing the fraction value into a static value let's start with the top section let's go to the top section and change the fraction we have in there so it needs to do this fraction we're gonna calculate it by getting the height and divide it so let's do that so height or screen height equals local configuration dot current we can get the height and now we can pass a fixed height here instead of this fraction so we can pass screen height divide by 2.12 and we get DB out of that and we also want to change the padding here because uh this won't work with this padding we also want to depend on the screen height so yeah let's do that screen height we divide that by by nine and now what also we want to change is the fraction in the bottom section let's go to there so here we don't want to have this anymore we can delete this entire box actually and we can now add the modifier here we want to align it horizontally we can't do that because we want to just make this a column scope and now we can align this horizontally in here we can take this out of there we put it in this column but now to push it to the bottom we can say spacer modifier Dot wait 0.8 F so until now this section is pushed to the bottom and to create a little bit of spacing between the bottom and uh this view we can say another spacer here and we can give weight of 0.3 F now our screen would be scrollable in the split mode Let's actually see what we have here let's delete this and let's launch it with the pixel 6 device and here you go now it looks perfect here same thing with the pixel 2 device now let me just put this in the split mode and choose this as you can see the logo here looks in the middle and that's why we changed the fixed value in the top section and same thing here so as you can see we can actually scroll and the user can interact with this even in the split mood screen okay guys so that was all for this video I hope you like this one if you did then make sure to subscribe to my channel and I really appreciate that and also don't forget to follow me on my Instagram page the link is in the description again thank you so much for watching and I hope you have a great day catch you in the next video foreign [Music]

Channel: Land of coding

Views: 9,385

Keywords: Land of coding, Lofcoding, Android, screen sizes, Material 3 design, Jetpack Compose, responsive UI, screen size support, flexible layouts

Id: Dj_X-RKL-c0

Length: 20min 38sec (1238 seconds)

Published: Tue Jun 20 2023