Navigation In Jetpack Compose - Android

hello what is up everyone welcome back to a new video which is about navigation in compose in which we'll be learning how we can navigate between uh different screens in our uh compose app and also send arguments or you could say uh like data what whether it string or integers or whatever you want from a screen to another and how we can navigate back to preview screens or popup screens from the backstack like if you want to skip a screen and we'll learn all of that and how we do that in jitpack compos so let's get started before actually we get started I want to share with you the movies app or the movies Info app that's what it's called that I built my from scratch with jitpack compos and it is open source you can find it on gith app I will link it on the description basically with the app you can find movies TV series and uh actually I haven't implemented the future of uh adding watch list and favorite movies yet but I will do that and yes of course as I said when you choose a movie like this you find the overview like rating how much how many hours in the movie and similar movies you can watch trailers directly from YouTube and uh yes so this is the app uh it's built with jetpack compos retrofit this is an apepi and of course room database so let's see now if I turn on I mean if I turn off uh internet connection then I can still use the app I can still find some movies I can still open and read without internet connection because this is a first offline app and you can check it out you will learn a lot on how to do that cashing movies and stuff uh of course you can also check my Instagram account let me just put it right here I post useful Android and general programming and mobile development tips and uh you can of course check it out and follow me if you find this that I'm posting helpful so back to the app what do we need for navigation first of all we need this uh Library which is the composed navigation one we need this in our gr file uh you can find this project as well on GitHub I will link it on the description and then you can just copy this this is the latest version if you're watching this uh in the future then maybe there will be this will be uh an older version but anyway you can update it just paste this library and dependency I mean and S the project so in our main activity but before before actually I have PR prepared some screens that we want in our app so let me just launch oops let me just launch the app again let me take the emulator here uh this this is it we have this home screen where is it this is it I'm not calling it yet actually this home screen that that just uh have this button and the text uh this button and the text inside the common so nothing more than that in the on click I'm not doing anything yet I also have a second screen which is the exact same thing that just displays second screen and the last screen as well with a button so I prepar thisen screens and now in our main activity let's start navigating first of all to navigate between screens and create create a destination we need uh a nav host controller and to create that we just say VA nav controller is remember nav uh controller now we have this which is all we need to navigate and create uh this destinations uh in our app now to create the nav graph Builder or uh navigation graph that will include all our screens to navigate uh through we need a nav host and that nav host will take this nav controller that we've created and we don't want a graph here instead we want a start destination so a start destination is just what is the start destination that want to have in our app so where we want to start we want to start from our home screen and we can just uh specify home like this so this is the destination I mean the route of our screen because each screen has a route or you could say an an identifier of the screen that uh makes each screen unique from another so we say navigate to home and then we attach this rout then we go to home and if we attach a different one then we go to a different one now uh in our uh nav host we need to create composes for our screens so each composable uh holds a screen uh the composable of the screen which is in this case this one and the route itself so that's where we Define the route and the composable so we just write composable like this then now we need we need to specify the route for home screen it is just home and inside here we need to specify the composable we can directly write this screen right here but that's not good that's why I just created it in another file now we can just call our home screen now our home screen is actually now part of our nav host so let's create the other two screens we just copy this simply and we paste it two times for our second screen so here I can write second and then uh the last screen and I also right last here so now I can actually navigate through them using this uh nav controller so if I for example say nav controller. Navigate I can just do something like this and then navigate to this specific screen in which uh that I wrote here that with its route now we uh want to navigate when we click on the buttons so we need to pass this nav controller to the screens so that we can navigate from there I just copy it this is it and then in my home screen I paste it as a parameter I do the same to the second screen and I can also do the same to the last screen let's just import that here as well and this is already imported here so I need now to pass that nav controller just nav controller like this and nav I I think this is better na controller nav controller let's just do the same with this other one so now I I just passed my knv controller to the other screens I mean to all the screens now I can navigate with it right here I can just say nav controller do navigate now I say navigate to the second screen so because that's the route I specified here I would actually show you a better approach to handle these routes because writing them directly like this may cause problems you might make a typo mistake or something and then you like why can't I navigate I will show you a better approach to do this so now I'm navigating into the second screen from my home screen and in the second screen I want to navigate to the last screen screen I can just close this now in my last screen I want to pop it or remove it from the pop uh from the back stack so I can go back to the first screen I could just paste this and instead of saying navigate because now I can I can actually navigate back to the second screen but then this will add the last screen to the back stack and it will be Missy so if I want to do this if I want to go back to the second screen I just write pop backstack now let's run the app let me just close this one and see if we can actually navigate wait for it to build here's his building so now I'm in my home screen when I click go to second I am now in my second screen and when I click go to [Music] last I am not actually navigated let me just see I know why I did not change the route so last this is what I need to do this is actually the problem with the uh doing the routes like this so now I'm in my home screen and when I click I'm now in my second screen and I'm in the last screen so when I click go back I just came back to the second screen and I can just keep doing this so this is how we can navigate between screens now let's say but first let's just handle the these routes in a different way to do that we need to create a sealed class where we Define all our screens with their routes so let's create a new class in file which is going to be a sealed class and call it just screen like this now our uh Constructor will be just the route which is of type string now inside our St class will create objects which are our screens so first one is the home screen and that inherits from screen and its route is home we just duplicate this for the second screen now and the last screen so the routes would change that as [Music] well and the route of the last screen so now we just changed how we we want our routes to be handled so right here instead of just writing home directly like this I can just delete this in right screen dot home. route so now I have my route here so even if I want to change it later I can just change it here and it will be changed everywhere the and if and there is no way I can make a mistake because yes that's that's there now so here as well I'm going to change that and for my second screen and last screen and I guess right here as well and here for the last screen and let's test that let's just let's make sure that everything is fine second I think everything is fine let's try that out we are in our home screen to the second screen to the last screen and we can go back so now we are handling our routes in a better way now let's say I'm in my second screen and I want to remove it from the back stack so when I uh when I am in in my last screen when I go back I want to skip this screen what what I can do is remove it from the backstack so uh the same so just say navigate I mean nav control. pop backstack and if I run this right now so from the home screen to the second screen now when I click go back I directly go to the home screen which means I can't skip now the second screen because I popped it from the back stack so it's no longer available but in case I don't want to do this here if I for example if this last screen will decide whether we want to skip the second screen when we go back or not then I can just uh if I want to do that for example I can just duplicate this so this will pop this last screen and then this one will pop the second screen again let's try that out so now I'm in my home screen now in the second screen now in the last screen when I click go back I came directly to the home screen so that's how we can skip screens if you want to now the last thing we want to cover here is when we want to pass arguments so for example if I have something some value URL or whatever I counter or something in my home screen and I want to pass that to the second screen so that the second screen can show it or do something with it how do we do that that is done with arguments so an argument is just something that I can pass uh through screens to and it can be an in an an string or anything any data type basically and those arguments can be passed by first adding that next to the route uh basically now we we when we Define the the route of our composable of our screen right here I can just write plus and then inside this string I can defined my route so you could imagine uh a route as a as a URL so basically this is the base URL and then this is uh Aquario for example so I can just put that uh oops between two brackets like this and here I can Define now uh an argument that's for example a URL so I want to pass a URL uh not actually to the home screen but instead to the second screen so I just take this from here paste it here now I want to pass a URL from my home screen to the second screen so when I navigate to the second screen I want to pass a URL and uh now I just defined what it name is what its name is but now I need to define the arguments the list of arguments because I can of course pass more than just one argument so to do that we just say arguments is a list of now inside here I Define my nav argument and the name of it in this case is URL and then the type of my argument so type is going to be nav type do string for this case so I Define it now my argument which is a URL so like this I just add it next to the route with a slash and then put it inside two brackets so this is its name and then again I know this is a little bit complex but actually there are other Solutions there are libraries that handle navigation uh in much easier way but this is the official way to do it this is the jitpack composed way to do it basically this is how Google did it so this is now the URL name again and then we Define its type basically we can Define more than a route by just applicating this but I will do that later so you can see how to do that now when I want to navigate to my second screen I then need to pass the URL so from my home screen here I navigate to the second screen I then need to pass URL by doing the same just adding that uh order string here and then slash and whatever I write is now the URL so let's suppose ww do. url.com now let's run the app uh basically first of all let's access that route I forgot to do that from our second screen and to do that to actually can access with this nav backstack entry so let just write that right here uh nav we'll just call it backstack entry that we get from this uh composable we want to Define uh we want to have arguments so with this backstack inry we can just write uh backstack entry. argument that is nullable dog string which is URL now I have my URL I can put that inside a variable like this so now I have a URL and then you can just pass this URL to your screen or use it what any way you want but this is how I'm going to actually do it I'm going to pass the nav backstack entry itself to my screen to my second screen so if I have more than argument instead of just pass keep passing them to the second screen I can just get them directly from here so in my second screen I'm going to pass now a second thing after my nav controller that is going to be and have backstack entry let's import that and then uh right here in my main activity I just passed that as well so backstack entry is backstack entry so I just passed now my backstack entry I can take this from here and now in my second screen I can Define that directly right here so here is my URL now let's try printing that by just saying last screen and URL is uh URL so that that is notable to just keep in mind that URL can be n so let's now run the app and see if we are getting the URL so from my home screen this is the URL uh W but I actually pretty they in the wrong place so let's just take this from here and put it inside this string here and run the app so this is it second screen and then the URL now let's try passing more than just one argument so let's say we want to have a second argument that can be like a counter as I said earlier so a counter like this uh actually I need to put that inside two brackets as well to tell that this is uh an argument and then here I create another one that is going to be now the counter which is an INT type instead of a uh string type now in my second screen I just create that as well so right here I duplicate this and then counter is the key is counter and that is get int so now I have my counter that I can print as well so let's try that out after the URL let's say counter is counter you just make sure that actually the key is the same yes it is and let's run that so from my home screen oops I'm actually making a mistake so let's see what the mistake is the app crashed and they said navigation is they said they couldn't find this navigation destination that's because I actually didn't pass the counter what a mistake so I need to pass that now I just put a slash and then an integer that defines my counter so let's run that and see so here is my counter 44 uh let's say I write a string here instead of an integer so something like something like this let's see what H what's happening now it will crash because it expects to have an integer so yes that's what we need to pass so that's how we pass arguments through screens and uh I think yes this is it for this video so this is all we need we can now navigate between screens as we saw we can pop strings I mean screens from the backstack we can pass arguments this is how we Define our routes now in a more cleaner way and as I said don't forget to check my Instagram account and follow me there and you can get the movies app that I uh talked about earlier uh in the video you can get that and see how it's built and how I did it and I will of course uh update it and make more commits to the app so this is it thanks for watching and bye

Channel: Ahmed Guedmioui

Views: 4,186

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: 7m8Wm2yyDYA

Length: 21min 45sec (1305 seconds)

Published: Mon Nov 27 2023