Android Support ALL Screen Sizes in Jetpack Compose (Landscape, Tablet) - Android Studio Tutorial

welcome everyone to this new video about supporting different screen sizes in Jetpack compose so if you want to make your app scale to small screens tablet screens normal screens landscape and portrait mode and all that stuff then this is the right place for you I will show you for example how you can adjust your text sizes and even small Dimension padding values depending on the screen width of your phone to demonstrate you what we will build I will show you this little example app here which currently runs on a normal phone a rather normal screen pixel for XL here and when I click on the Nexus one then you can see the UI is really responsive because the Nexus one has a really small screen and the same thing for the opposite a big tablet here and the screen still looks really good so after this video you have unlimited possibilities to make your UI respond to every screen size and every screen with and if Bobby starts right into Android Studio I will also show you how this adjusts to the landscape mode and when I choose landscape here then you can see the welcome screen now is on the left instead of the top and the text here is rearranged all right okay I think that's kind of cool so let's look how we can achieve this all right I'm in an empty chappie compose project here and first of all we will go to our UE theme package and create a new cutlet file called Windows size class and in here we will start with a sealed class called window size which takes the size as an integer and in the seed class we will have four different data classes which represent the different screen sizes later on so we will start with the small screen which takes small size of type ins inherits from render window size and passes this small size parameter here and then you can just copy and paste this four times we will have also a compact size medium and large we also need to rename this compact size medium size and large size and then pass it to the parents medium and large size and then we will have the data class called window size class which takes the width of Type window size and also the Heights of Type window size and then we will create a composable function remember Windows size class which returns window size slash and we can invoke this remember Windows size class functional at the beginning of our app in our main activity to get the current width and height of our window and this will get re-invoked every time a configuration change happens for example if this user rotates the screen to landscape and in here we will have a config which we can get from localconfig.crewment and the width by remember config will be a mutable State off config.screen with DP and then the Heights also of mutable state of config.screen heights.tp and I think we need to import some yeah we need to import this all right then we can determine our window width and height loss depending on the value of our width and height we got here so we will start with the window with class is equal to 1. with the slower or equal than 360 then we will say window size dot small and pass the corresponding width if the width is between 361 and 480 then it will be Windows size storage compacts with the width and these are just values I tried out you can choose your own ones just play around with that and here we'll say 481 and 720 20 then I will use medium here and else Windows size dot large and the same thing for the higher we can just copy this again and paste it down here here we can say window height glass so when I alright and Heights and just change these values here and at the end of this functions we can then return window size glass which takes our window with glass and our window high class and well maybe you are asking yourself why we did choose the same values here to determine the window height lens than we did for the window with class because normally phones are way higher than they are white and that's because of the landscape mode Let's Take a pixel 4 for example and we would be in this case if the pixel 4 would be in portrait mode but we would be in this case if it would be in landscape mode and down here we will choose a very large font size and larger padding values and all that stuff than we do in this case here so we will detect if we are on landscape mode and depending on the landscape or portrait mode we will use the window with glass as a basis for our font sizes and if we are on landscape mode then we will use this window height lens because this case here import remote of a pixel for is the same case then this one here when it's in landscape mode I hope this gets clear and then we will go to our UE theme package creates a new kotlin class or file and this will be called orientation will be an enumclass and in here we will have two cases portraits and Landscape after that we will create another kotlin file called dimensions which will be our padding dimensions this will be a data class small of type DP where small medium odds of type DP medium a medium large you can choose any amount of granularity here I will choose five different values and yeah this will be our data class of dimensions and now we need to Define different dimensions depending on our screen with class or screen height class and first of all we will say very small dimensions is equal to dimensions and in here we will choose some example values small Dimension will be 2 DP small medium will be 40p for example medium will be 60p medium large 9 DP and large will be 12 DP and I also copy and paste it here the compact medium and large dimensions because I think this nonsense if I type this off here and yeah you can get this from my GitHub repository which I will link Down Below in the video's description or just use your own values and we also need to Define our different font sizes here in this type dot coordinate file which is auto generated by Android Studio we can just remove this default stuff here and then copy and paste all these different font sizes and again I won't type this off in this video because this would last for 5 to 10 minutes or something like this you can get this from my GitHub repository or use your own values again and I will quickly go over this this is the typography small of type type prography which is a default default class of Android studio and you can see here we have different parameters we can pass H1 to H6 body one body two and all that stuff um I just use body one body two and H6 to H1 here feel free to to pass more parameters here or to choose different font size values and then we will also have this typography compact here which is a little bit bigger than the typography small and down here we will have typography medium and at the bottom typography big all right okay now we have almost everything we need for our different size classes logic so we will go over to our invert kotlin file and in our different screen sizes theme we will Define another parameter of our own Windows size Class Type which we defined at the beginning of this video and inside here in this composable function we first need to check in which orientation we are currently so well orientation is equal to when Windows size class dot with DOT size is greater than windowsisless Dot heights.size and then we know we are in landscape mode orientation dot landscape and if this is not the case then we are in portray mode after that we also need a really important value here which is a well size that matters and this depends on the orientation I will explain this after we defined it so if we are in portrait mode then we will use Windows size class dot with and else Windows size class search height so what does this do um if we would have a pixel 4 for example and we would be in orientation dot portrait mode then we would use the windowsizeclass.wiff which which is all fine so far but if we would just use this Windows size class dot width and we would then rotate this pixel 4 to landscape mode then this size class width would be a large size class and also determines large font sizes and large padding values so that's why we use this little event expression here when we are in landscape mode then we will go into this case here and choose the Windows size class dot Heights as a foundation for our decision of the font sizes and padding values and all that stuff so for the pixel 4 that means um when we are in landscape mode then we would use this Windows size slash dot height which is the same size class then the Windows size class Dot if it would be in portrait modes so we would we use always the the original width value here with this uh when expression now we can Define our dimensions and our typography so well Dimensions is equal to when size that matters is Windows size dot small then we use our small Dimensions it's Windows dots compacts we can use our compact Dimensions is window size dots medium medium dimensions and else our large dimensions and the same thing we can do now for our typography so we'll type typography is equal to when size that matters is window size dot small well I will just copy this off here we will use our small typography small typography compacts medium and typography big and now we need to pass our typography the dimensions and also our orientation modes somehow into this material theme for the typography is really easy we can just use this typography parameter but we will also we also want to pass the dimensions and the orientation so we can access this during runtime in our composable functions for our screens later and to achieve this we will create a kotlin class or kotlin file which I will call and inside here we will have a composable uh provides app users this takes the dimensions and the orientation and also a Content which is a composable like this and in here we will have a dim set it's equal to remember remember Dimensions input remember here then we will also have the orientation remember sequence November orientation and we also need content providers so we will say local abdomens is equal to compositional local Earth then we will pass the small Dimension as default parameter here and we will also have local orientation modes is equal to composition Locale off and here we will say orientation dot or tray as a default value and up here we can then provide these values so we can say composition local provider and our local app demands provides our dim set s our local orientation mode provides our orientation and let me put this in separates lights here and then the contents will be our past content and then I will show you how we can use this provide app users in our theme here here we can say provide app utils and then pass our dimensions and our orientation and for the content for the compostable contents because the material theme is also composable we can just take this and put this in here and so we can wrap our material theme with our own app users and one last thing we before we go into the screen UI we need to map provides or Grant access to our dimensions and to our orientation during runtime and therefore we will create an object here object add theme which has a value dimensions demands of type dimensions and they're composable so we can call this um not equal of type composable so we can get this from within composable functions and then we can say local abdomens dot um current and the same thing we can do for our orientation so well orientation oops now of type orientation and a composable get functions where we can say local orientation mode dot current and you will see soon how we can use this it's really really easy and really really flexible so we will go to our main activity then and in here we get an error because we need to pass our window size class but we can say well window is equal window is equal to remember window size class with this function we defined at the beginning and then we can pass our window and our different screen sizes uh theme all right let's now begin with building the beginnings demonstration apps UI and you will see how easy it is to get the orientation and to get the different demands values and how responsive your UI will be so this whole setup is really really worth it if you want to make your app responsive and adapt to every screen size so we can remove this preview stuff in this example composable and also remove this and first of all I want to check if we are currently in portrait mode or in landscape mods and if we are in portrait mode Let's Define a column which takes a modifier modifier.filmx size and the vertical Arrangement will be Arrangement dot space between and the horizontal alignment will be alignment Dot Center horizontally inside this column we will have a box box which uh against the max with Max Smith and the content alignment will be alignment dots Center inside this box will be our picture and the welcome message so this will be an image which takes the painter resource and I have just the example image here from my desktops background just choose any image you want and the contents description will be image one and the modifier maybe modifier.clip and we will just clip two corners here to a rounded Corner shape and we can say then bottom ends and then we can use our app Theme dots dimens dot medium and power button starts app Theme Dodge demands touch Medium as well and then we will also no I mean it's uh this one here for Max Smith let me rearrange this a little bit um yeah and the content scale will be content scale dot fill with all right and then we will use this box for our text as well so text will be welcome I won't do a string resources here because of the Simplicity of this app so the style will be material theme dot typography.h4 which we also defined in our differential typography so this H4 typography is also responsive to the two different screen sizes and the color will be color dots white below this box we will have another column which takes the modifier but modifier film x width again the horizontal alignment will be alignment Dot Center horizontally and scroll up a bit and the vertical Arrangement will be Arrangement dot Space by F beam.steemance dot large and in here we will have two texts one text says this application supports all screen sizes and landscape mode the style will be again of our material theme dot typography this time H6 and the text the line will be text align Dot Center and then we will have a similar text down here which has which says you can have the maximum flexibility regarding your UI using this approach yeah and here we have uh the body one typography and the text alignment will be also Center and down here below this column we will have a button um I won't do a one click method here because uh this screen does not do anything and let me rearrange this all right and then the color of this partner will be but button defaults dot button colors background color will be color dot blue content color will be color dot twice and these buttons also takes the modifier which says film exit and the padding of this button will be again responsive so we used our app Team Dodge demons dot medium large this time and the shape of this button will be a circle shape and inside this button we will have a text composable let's go the style of this button will be again responsive material of the typography body one point where it will be fundraight.bolt text align text the line Dot Center and the modifier will be again a responsive modifier which says padding app Theme dot steamance dot medium this time all right this is it for our portrait mode so I will quickly launch this app and show you how this looks so far um but right now we won't see anything in our landscape mode because this else block here is completely empty but just to demonstrate how far we are until now um I will quickly start this app and now you can see the pixel 4 XL phone here where the app looks kind of good but to show you that it also works quite nicely on the Nexus and on the tablet I will also show you these two screens so it also looks really good on the Nexus phone and if we choose our tablets then it looks all supports on our tablets but if we rotate the screen and adapt this here then you will see the screen is empty because as I already said in our else block there are no composables yet and we will look into this now in our landscape case we will have a row instead of a column as the root composable which takes a modifier dot will make size and the vertical alignment will be Center vertically inside this row we will have a box which also takes the modifier film exercise and the weight will be here one F because we will have a column down here later which also takes away so they share the the width inside this row here depending on the way to stay get and inside this box we will have a image we have a painter resource and I will use image 2 here because image 2 is kind of vertical expanded as you can see here and image one which we take in the portrait mode is horizontally expanded so then we will have a Content description image tool and this image also takes the modifier here modifier and we also pass a clip with a rounded Corner shape and this time we will have a rounded corner on the top end app Theme dot steamance dot medium and the bottom ends will be also rounded app beam dots demands not medium here and this time we will say film X High and also the content scale will be content scale dot fill height and below this image we will have a text with the welcome message style will be material beam.typography.h4 and the color will be color dot White all right now let's go to this column here here we will have the modifier modifier.fill Max size and the weights will be 2f so the column will be more expanded than the the Box up here which has the weight one so this column is more weighted here and we will also have a padding in this column app theme.dmens dots medium large and the horizontal alignment will be Center horizontally the vertical Arrangement will be space between and inside this column we will now have our texts and the button which I will drive a copy from above here the two texts and pass it down here so the typography H6 and body 1 stays the same and I will also copy the button from above and paste it down here and I think this should be it we can launch this now and look how it looks in the landscape mode and now the app launch and I will rotate it to landscape and adjust this here and this looks quite good and welcome the welcome text here is on the top left because I think oh yeah yeah I forgot the content alignment uh which has to be alignment.center and this will replace this welcome text to the center of this picture here inside this box and we can also have a look at the Nexus phone which I can can't rotate right now I well maybe this Nexus phone does not have the functionality so we will have a look at the tablet and when I rotate this it also looks uh really good yeah okay the the welcome text here is also on the top left but we just need to relaunch the app here um two places to Center because we did this little adjustment the last thing I want to show you is how it would looks like with total values instead of our responsive approach so let's go up here to our portrait mode and here we will change some values and we won't use this Dimensions values anymore we will just say 10 DP for the rounded Corners also 10 DP and for our welcome text here we will say okay 30 SP and adjust this to font size and inside our column here we will use for the arrangement 20 SP 20 DP and here for our texts font size 23 SP F font size maybe 19 SP and for our partner we will have a padding of 15 DP and the texts inside this partner will have a font size of 22 SP and this text will also have a total padding of 15 DB all right let's relaunch this and look how it looks now on the different screens all right let's have a look at the pixel 4 XL I think the font size here is a little bit too big and also the button is too big but when we have a look at the Nexus phone it is way too big this is too big for a good UI if we would just have one or two lines of text more then it would go into the button down here um yeah this does not look good at all but if we take a look at the tablet here then the font size is too small I think especially the two texts in the middle of the screen and the button is still okay I think but yeah I think you get the hint if you use total values for font sizes and app paddings and all that stuff because the padding has a huge impact here on the button size which looks really really bad and the Nexus phone the button is way too high and yeah this is because course of this padding here in the texts which is is just too high for the Nexus phone if we choose to store five then you can see the partner is okay but if we have a look at the tablet then then the button is too small it's not high enough so the simple UI already showed the advantages of this responsive layout approach with the demons and font sizes and all that stuff but the the huge advantage and the huge power of this approach will be a will be explored when you build complex and big uis with a lot of elements where each padding value is important that your text does not get cut off or does not break into the next line and all that things and yeah I think you will make your experience when you use this in your projects and build more complex uis and yeah this are the basics for that and you can you can build upon them and build really really flexible and responsive and adaptive uis I hope you enjoyed this video and yeah we will see us in the next video

Channel: K Apps

Views: 6,039

Keywords: Android, Jetpack Compose, Kotlin, Responsive Layout, Android Studio, Material Design, compose, jetpack, AndroidStudio, JetpackCompose

Id: NPmgnGFzopA

Length: 31min 12sec (1872 seconds)

Published: Sat Sep 24 2022