How to Support different screen sizes in Jetpack Compose | Adaptive TwoPane Layout Jetpack Compose

foreign welcome back so today we will learn about how we can adopt our app to different screen sizes in Android so for that I have written some code already this this code is we have already written in some other tutorials from the scratch so I have reviewed that course so that video will not be that longer I try to do it so that a video will not be that much longer if I would have done this from scratch video would have been very longer than so because let's say we have this app a simple app a list of users there and two Tabs are there right and on clicking it it's going to the detail screen file so now we need to check it how it looks on uh let's say we check it on tablet device first of all let's see how it looks on tablet device so if we look at it's it's not wrong here anything but let's return it foreign have recommended these types of layouts three types of layouts are there listed in field sporting pen so this is just for like they have covered the different scenarios in which scenarios we should use which kind of layout so you can go through this link so you will understand like which kind of app will how we should show the layouts in the large screens which type of layout we should use they have recommended here let's say for this conversations list it really is recommended so actually our app concept is similar to this just for example in taking a list of users and then there are details or maybe you can see chat screen right so we will use this list detail screen concept but according to the different scenarios for video browsing let's say we need to browse videos here we can show the list of videos here we can one click in this we can show it then on clicking this we can display it so list it really is recommended for that also and similarly sporting pen is recommended for tooling related good thing so this is like image editing and we need some tools related to this so then we can use this right this type of content so and similarly for comments or four posts that's the social media board so for news posts news apps we can use see it there right so feed can be like we can just divide the items in the multiple columns right in so small devices it will be single column in the large devices will be multiple columns right so you can go through this and so according to this conceptually following the social media concept so that for that the recommended list detail concept so we will be continuing with list detail here so if we check it here so it is a list of users right two Tabs are there so we will be covering this on screen right because we have designed this so we will be covering the this home screen so that we can support it on large screens right so for that first step is we need to add two dependencies there if you see this is the window size class and second one is the accomplished adaptive this for this Live library is needed because we need to show layouts in large devices in two pins that is provided by this and this one is needed because this is the very main library everything for supporting the large screens is now centered around this thing right so so let's continue with that so first of all we nailed some window size here it will calculate window size to passing the this reference right so what will happen we need to obtain for experimental this is experimental API currently right so now it will it will calculate width or height wise classes it will divide the break points in some classes according to the width like three types of uh with classes will be there for compact for mobile devices and medium one for tablet devices and the expanded one for the large desktop devices right like for SB rotated it will become the less problem so for mobile devices it considers with less than 600 for tablet devices between 600 and 840 and 4 large desktop devices is considered weights greater than 840 right so that you can easily find in the documentation that's not it so but we are covering it here is like how we can Implement that so let's pass it here this is our app content domain everything is included here so let's first of all because we need some enumclaws there is navigation type because we will have three types of navigation when we need to show bottom bars right this one when we need to show navigation rails I will come to cover that concept here so navigation really needed on mostly tablet devices and when we will be needed some fixed navigation travel here right so let's take it bottom nav second one is nav rail second third one is permanent nav right and this we will calculate according to width class of using this window size class Dot with side glass right so when this window size width class is compact we will be returning navigation type as bottom left navrel permanent nav driver in medium Naval in expanded permanent now this is force width and width is greater than 840 right and this is for width between 600 and 840 this is before width between 0 to 600 if you go through you can check it here right and finally we can add some else case if it can be different from these cases so for default we will be considering here bottom left right fine so now depending upon this we will be deciding which type of content we need to display before that let's add two more things here one is navigation well second one is permanent navigation driver right so they will be similar to our bottom or bottom tabs yeah so they will be similar to like bottom nav bar so just copy paste it and I will we will convert it into nav bar and permanent navigation driver so let's assume this is nav rail right it will be needed this all the same parameters and here we can use navigation rail and similarly here we can use navigation rail item instead of navigation bar item right and most of the things will be similar this logic like this on click logic later on we will be extending it in some separate class but currently we will be using it here itself slide and similarly yeah and let's just add some color here container colors will be material theme dot Colors theme dot inverse one surface this is used by most of the like these bottom tab bars navigation which is given by them and now let's create permanent navigation driver as well permanent snapdrawal let's name it short so here we will be using permanent navigation drivers right this one is not needed there it will be accepting the drawer content and inside driver content it will be accepting the driver sheet and then inside drawer sheet we will be using this content right and similarly navigation driver item we need to change that and now if you design related things are there some brackets are missing so drought content and finally its content will be here so we can accept content a composable function here right we can add that here and we can call it so whatever content we will pass so in the permanent navigation driver all this content will go inside that permanent navigation toggle content right so this is for this and similarly this click will be same but we will be later on extracting it so this in a common logic so that it can be used in all three and here we can apply some colors navigation drawer item default store yeah default dot colors right so here we can unselected container and selected container color can be transparent I will explain that why we need to do that right so now these three things are ready for us and now we'll have to decide like which one to use in which case right so first of all let's pass this navigation type inside our app nav host where we are hosting the content navigation type and here we can accept that and from here we need to pass that in tab snap graph navigation type similarly Network set at that parameter here right because we have our content inside this tabs navigation graph of this content right so now we can use this and so this is our main content actually so yeah here we will be using the checks so let's suppose we have navigation type permanent navigation permanent snap travels else it will be like for navrail or bottom now right two types of content will be there for that we will not be using the permanent nav driver only simple content will be there but inside this we will be wrapping the content inside navigation travel till this point it's clear I think I hope everyone is understanding this scenario so permanent nav driver right inside this what kind of parameter you are accepting current destination so we need to pick up these parameters from destination is here it is and second one is nav controller equal to nav controller fine and inside this our main content cool so let's try it and run it so you can check it currently it's not coming in permanent navigation travels but in this if you rotate it then it should come yeah it's the permanent navigation driver and this is content and now we'll have to adjust these layouts when we need to show them or when not right so let's say we need to pause and first of all let's make some design of this better for that what we can do is let's give it some with restrictions here that we can apply modifier size in so we need Min width equal to suppose 152 DP foreign can be between 230 maybe as of now we can and later on we cannot adjust it yeah now it looks good for now what can be the next thing and we can pass specify driver container color as well in this sheet because we need to apply the same color that is on tab or rails we can apply that color here drawer container color it can be dissimilar which we apply on the lab rail Universal surface yeah it looks good now so now we'll have to make some adjustments here so let's make those so here it is used let's go there so yeah in this in this case so let's hide and show these things so let's say if we have this permanent navigation driver then we don't need to show this bottom bars right so we need to show this Bottom bar only in case of bottom nav navigation type right similarly navigational rail will be displayed in case of navrel navigation content type so here we can pass navigation content type navigation type equal to equal to navigation type and we can accept that here and it's less positive two places right and here so this one is our bottom nav bar so we can use animated visibility for that so if whenever it will be visible is when navigation type equal to equal to navigation type dot bottom lamp fine only that we need to show it right similarly so this is our own content if for case of mobiles bottleneck bar will be there in case of tablet snapdrail will be there so let's apply Naval check as well here we will be using the navraine it requires current destination nav controller right and when it will be visible is only when navigation type will be named Ray right let's check it again now you can see bottom tab bar is gone and if we yeah here also bottom taboration this is the medium case for nav well as here so we can apply few paddings in the items modifier dot padding top just like as of now 20 TP is enough or maybe we can apply it 50 DB yeah it looks good now working fine cool right so now let's check it on here here also we can apply that spacing padding in case of permanent nav drivers yeah right or maybe we can reduce it to 30. so yeah so it looks fine now right now few things are remaining let's clean up those things so here in this desktop one case so we need to display two panes actually so so that it it becomes use Easy for the user to like using their hands and clicking on those things like clicking on this navigation and then like because in this middle part of the screen user is not able to touch the fingers like while he is holding the device like if while holding doing that is difficult but he can like pick up from the keep the device on one hand and from the second hand we can do that but if he is holding the device in both hands difficult due to those facts we need to divide it in two panes so we will be using two panes for that so let's inside go to this main content and here so in the home screen we need to apply that change so let's pass some parameters there in the home screen right one is navigation type will be needed that and yeah first of all that's that is enough so if navigation type equal to permanent nav drivers else what we are doing let's do it as it is right so in this case we will be using two pane so two pen is about like a displays content in two pins like if you specify half of width it will display it like in the halfway first content in the second content right so in the first content we need home single screen this is for like home screen and in the second pin we will be using the user detail screen that is there right so it requires user ID so we need to pass user ID as well and what's it type its type is int nullable okay so let's pass that here and now we need to specify steps if we divide we want to divide the screen in horizontally right so we will use horizontal two pane strategy Supply split fraction is in how much percent we want to specify first pain and then second pane so for first pane let's say we use point four for second pane we will be using 0.6 and similarly we can specify gap between them 16 total DB right and display feature is we are not covering this in this tutorial it is for foldable devices we will cover that in some other video otherwise videos scope will increase so let's check it now how it goes yeah we need to pass those parameters here first of all like So currently we are passing the user ID as navigation arguments so instead of doing this we can extract this logic just in this view model so we can keep the state in the view model for the whole screen right for this whole screen like but as of now I'm just passing it as static we will update it and second one is navigation type let's pass that one as well and now we can make this at the last parameters right yeah if you see it looks cool now but currently the logic is not that effect according to this so yeah let's check that so here we are displaying or maybe it's enough for this or maybe we can increase this 2.45 yeah look better now because in the details screen we need much content than this here we are just showing the major name so yeah let's say it is some social media and we are displaying the list of users and here we'll be displaying the chat screen so for this example you can consider it see the detail right so now we need to make some changes here for first of all we need to we don't need to show this one if it's displaying on the same screen right so for that we can use one parameter there that will control that right so is only detail screen so it means if it's only retail screen then we will show that otherwise we will hide that right so let's apply that check here we will hide to a bar in that case so basically if it's true we will be showing only then this right right so let's first of all try to hide it suppose just for testing let's check it if it's working or not from here's also we need to pass that and let's pause it as of now sorry this and then right if you see yeah that's gone right but still logic is missing we will be doing that so now let's come to that point so where from where we will be passing this and now we need to need to control that back button actually so that part is remaining now we will need to do that so first of all we have a Hardware models classes there so here we can like a home UI state is there that I created before we needed user ID there and is only screen so maybe we can make it with only detail screen right we can refactor it right so here we will be updating this date and currently so let's use this view model inside our main activity so it will be in the top outside all the app content that is recommended way of using remodels so let's use the model here nodal fine and from where we will be picking up those States right first first one is let's pick up first of all UI State here collect as state because in this compose we are collecting that data as state only because we are working with the state right and from now here on we will be using those two variables inside this let's pass uh selected user ID of int and is we can name it same only detail screen right these two parameters we will be needing so here we can pass that selected user ID equal to USD dot value dot user ID and similarly is only screen is your state DOT value Dot is only detail screen right so now we can pass it more down like right and let's now go here and now inside this right and here you'll be using them passing in the main content right similarly here right and here we need to declare them so now we will be using them we will passing them in the screens so here we will be using that selected user ID and here also will not be passing that we will be controlling that from from The View model right and here we need to update that right is that equal to selected user ID right so we have passed that and now we need to update this here like One clicking right so first we need to update it then we need to navigate so for that we need one callback right because this one as well right so we need one cone back so actually we need two callbacks first in some cases we need to update full State as well and second one is if you need to update only user ID right so we will be calling this this will be accepting one parameter that will be calling here that user ID and passing this user ID here and now let's go back right we need to pass this in all the tree and then here and now same thing here and now here's I have your path from here you need to go back here and from here and again go back till the root yeah here it comes so here we will be declaring them let's pause them update full state this will be of date user ID it will be accepting user ID parameters that is of inch type is in so here what we will be doing is homeviewmotal dot update user ID right and here actually we need two parameters which is so good to use first one you go find second one you have Boolean for updating the state and here we will be updating the full state and either ID comma polyline user ID that's equal to either ID or not is only screen is Boolean one right so we need to make some changes here right we applied some wrong return type it fine now yeah it will crash because we have not applied some logic stairs so let's check it um first of all let's find that Arrow and here you need to so but what will be happening on the uh clicking the item detail so first of all let's control that logic in case of we need to initialize where we are using actually yeah here actually we need to do one thing that will happen only one time so here we will be doing is we will be calling up dead full State initially we need to give it some state that is 0 and false but usually we will be updating this ID from the first item ID from the list screen from the home screen using the Callback right but here I am doing it like initially will pass in the first ID here so you can see yeah some issues there on click yeah think we are using navigate this one we need to remove because now we are not using the arguments right we are directly updating the state in the view model yeah a few things are there so why because it's applying navigation here so we need to stop that logic so on click we need to make some changes now so let's do those changes here so in the go to user detail the home screen so yeah this one this logic we need to know maintain let's move it in a callback actually so that it will be easier to maintain that's possible back here go to user detail and it will be accepting one user ID return type is unit and we will be using that yes copy this and for that we will be passing it and removing this from here right and first of all let's add that logic here go to user detail so it will be off type function with one parameter and return type is unit so we can use that parameter here and here we need to apply some logic actually because now we are using navigation this thing only in home oh sorry in the mobile device right so we'll have to apply some check here if navigation type is like bottom navigation only then we will be doing this so right here we will be doing controller dude let me use this one and also we will be just updating the full State actually here so user ID comma so is in is full screen we will be passing false here because in accept mobile without net full screen right this will be for tablet and desktop devices right and now let's pass it and similarly here let's run it and if we press back yeah it's fine it's going back so but now let's check it in the navrail if something is missing now it's not working maybe we didn't applied it somewhere we need to apply for Library level as well so what we will be doing in that case we will be actually displaying that in the full screen here is like that check yeah actually that check is missing here so when we need to yeah so if selected user ID is not equal to null and is only detail screen so in this case so this case will be covering both mobiles and navigational light so in this case if only details green so we need to display detail sorry not this one actually detail screen let me add that it will be in the detail screen can be picked up from here right else only home screen right let's say it yeah I don't know what happens so yeah I love it just claim but now we need to handle this back on back so on that what we need to do is um we need to close details screen right so let's pass one callback for that one as well close details screen right we will be calling that here let's just name it um detail back rest right and let's call it here because in this case there will be no back case because we are not displaying that back button right last we don't need any parameters there right so now let's go back on detail back pressed and now we need to apply that similar ways like passing it upside so let's first of all go there and create one method for this one as well right like this we need to apply some checks so we can name it close user detail it's not accepting any parameters right so in case of so what will happen here is again we need to check out so in case of if type is navigation bottom nav so what will happen is we need to only poke back stack right we will have to use nav controller right and we will pop back and if it's navrel then what we need to do is for hair up Dreadful state in case of nav rally and back we need to update this right because now we're liberating the full State and this is in case of in this case we will set it 0 for the first item in this case we can set it none so now let's pass this term in the similar ways we passed another method now let's pass it more done right so here we will be passing that method directly and similarly what it's showing is yeah so we need to pass that let's check it now yeah it's working fine right looking cool this is for tablet device yeah we are not displaying bottom tags we are displaying navigation rail it is working perfectly fine right and let's take it on desktop device here also it's displaying user ID 2 user ID3 for the selected user displaying the content according to that right and now let's yeah back handle is also working fine if we press the device back button right that's taking us not for the screen but now here we should not go to login screen this is some common logic here we can do navigate to when we are navigating to tab let's pop up to login and closing is equal to true we need to Pop login as well right so after login we go to home screen and if you come back then we don't want to display login again right if user is logged in right so here it uh there is something it's picking up from Cache I don't know why this happens in the compose yeah you can see that's working fine now right and now let's finally last time check it on the mobile device everything is working fine or not so two devices we have already checked so yeah here it's showing bottom tabs fine it's working also fine yeah user ID is null let's check it what's happening so maybe one thing we are not updating yeah I got that actually why it's happening so when we are clicking this go to user details so here we need to update this one as well but not full screen now full screen is also fine yeah because that will be full screen here so let's stack it yeah it's working perfectly fine one three cool everything right so now this screen looks pretty good on all the devices on tablets and similarly like on rotation is not enabled on this so for tablet devices as well so that was our intention of this video so we have supported it on the from the mobile device to all large devices so now it's working perfectly fine as well right so guys now let's check it finally again on tablet so this is for tablet case right here we again instead of bottom number we are just showing the navigation rail it's working right and the second thing is in case of tablets we are using two panes because we are displaying that primarily that thing for that we are using a home view model for maintaining the state right here we are predicting the like in both cases we need to operate if you click on this we need to operate selected user ID and second thing is if this screen is full screen or not those those two things are managed right and this is also working perfectly fine so guys this is about how we can export uh different screen sizes in Jetpack compose so we have used this window size class there and to paint there and then we use the movie model for maintaining the old state of the screen like from screen view to home view model and then we what we did is we tried to update these Logics like when we need to go to user detail that logic will need to update and then when we were closing that like from this we are closing that that screen we need to update right so this part is done now so these are the few things these are the few important steps we need to make handle this back button showing or hiding that and handling this click button these are some different scenarios we need to cover and then displaying the content according to the navigation type that is also the important step so this is all about I will put the code in the description of the video so this is all about how we can support different screen sizes in Android so if you guys like the video a humble request please like share and comment it this is the only request so please so that it can reach to other developers or others like students who are learning it so that's it from my side in the next video we'll be covering some other topics till then bye bye take care have a great time keep coding foreign

Channel: Coding Ambitions

Views: 638

Keywords: android app development, android jetpack compose, android studio, android tutorial, jetpack compose, jetpack compose tutorial, jetpack compose tutorials, jetpack compose ui, kotlin, kotlin tutorial, jetpack compose two pane layout, jetpack compose different screen sizes, jetpack compose windowsizeclass, jetpack compose windowwidthsizeclass, jetpack compose adaptive layout, jetpack compose navigation drawer, jetpack compose navigation rail, jetpack compose responsive layout

Id: TFOzeztXNEM

Length: 52min 47sec (3167 seconds)

Published: Sun Sep 24 2023