Jetpack Compose Navigation for Beginners - Android Studio Tutorial

hey guys welcome back to a new video in this video i will show you everything on the basics about jetpack computers navigation so we will implement a very simple two screen app here on the one hand we have a text field in which we can enter our name and we then click on to detail screen we can see that we successfully pass an argument to that second screen and yeah that is what you're going to learn that is something that you will need in pretty much every project so very important so carefully listen and watch this till the end i am using this dependency here make sure to include the same in your build.gradle app file you will find this in this video's description and i'm using the compose beta09 version and this corresponding kotlin gradle plugin version which is important to know other than that let's jump right into it so how does navigation and jetpack compose work it's it's very simple if you're familiar with navigation components in android with xml then this will be even easier for you if not don't worry we'll basically have a nav host which hosts kind of our navigation so in the end each screen here of our app will be its own composable and the the java for nav host is just to take these composables and replace these when when we want that so all that basically happens under the hood here is when when we click on this button we say okay dear nav host please navigate us to the details screen and don't forget to to pass this argument that we enter here in this text field that is really everything about it um there is a little bit more to navigation like deep links and stuff i won't cover this here but the basics are super simple first of all we want to create this this nav host i talked about let's create another carton file for that which i will call navigation and in this file we will then have our composable navigation and we want you to control the nav nav host somehow so what we need is called the nav controller well nav controller and we can get that by remember nav controller so with this nav control instance we can then just navigate whenever we want we can use it to pass arguments and stuff like that below that i will then use this nav host composable here that wants the nav controller from us so it needs it needs to know it needs to listen to these changes and commands from that nav controller so we pass that here we don't want to specify a navigation graph instead we want to specify the start destination and if you come from xml a navigation component then this is different so here in compose we don't specify this navigation graph um i think we can but we don't have to and we usually don't do that so we don't have an xml file where we specify that and the transitions between each fragment or in this case each composable instead we specify routes which are basically just strings so this works really similar to actually a browser in the url so you can visit a very specific website using a url you can pass arguments using query parameters and this compose navigation works really really similar so we can pass a start destination which is a string and that just says okay that is the first screen that shows up so we could just hard code a route here whatever we want to call it main screen maybe um but what i want to do is i want to structure this a little bit better and i want to create a separate class for that so in our root package i created a new curtain class that will be a sealed class called screen so in this here class we can specify our single screens we have in our app if you don't know what the c class is it's it's basically just a class um that only allows classes inside of this screen class to inherit from screen or classes inside of this file but if we would create class let's say normal navigation file and that that couldn't inherit from screen so this screen class will take a val route which is a string so each screen of course needs this route that we define and which screens do we have these are just objects they don't need any parameters we want to have our main screen um that now inherits from screen and takes in the route for that main screen which is let's say main screen we can duplicate that ctrl d define our second screen which is the detail screen and swap this out with a detailed screen for now this is enough here later we will add some more functionality in the screen class but for now we can just use our screen that main screen that route here for the start destination so we want to start at our main screen and then we can add this lambda block and now on this lambda block we can define composables like this that we can just we can just tell our nav hosts know how our different screens look like so this first wants to know the route so route is equal to well we want to have our main screen first so we say screen dot main screen that route again and we don't want to pass anything else for this screen so here instead of this composable block we now need to specify the composable that represents our main screen so let's create that down here normally i wouldn't put this in this navigation file but just for simplicity and for this tutorial i will do that main screen here and this main screen needs an instance of our nav controller because it contains that that button with which we want to navigate to our our detail screen and to navigate we need our nav controller so on the end we just have a column here we set the vertical arrangement to center and we can apply modifier um the the composed ui modifier of let's say filmax with and apply some horizontal padding of 50dp import dp and in this column we will implement the normal material text field here the value will be something we need to create a state for so of our text by remember import the remember word here and right mutable state off um let's start with an empty string we need to fix this import here duplicate remember twice um and change it to set value and get value and then we can replace this with text the value you can also see the errors again we want to remove the lambda block and instead implement on value change which gives us the the new string so whenever the value changes in that case we just want to update our text with a new string and let's put that into separate lines here and also implement the modifier modifier that fill max with just fill the whole width of our parent column and then below that we're going to have our button let's also add a little bit of space um height let's say atp and then we have our button with our click function in that unclick function when we click on that button we want to navigate but before we do that let's also add a modifier here modifier dot let's just align this button at the end of our column horizontally that will be alignment that and can format that a little bit and here in this button block we just want to specify the text that is placed on that button and say whatever to detail screen that is it for the main screen apart from this on click function in this unclick function we want to navigate to the detail screen which we don't have yet so let's quickly create that which is a lot shorter we just have a text there detail screen and this detail screen takes an argument which is the name argument that we pass to it so when we navigate to it we need to pass the name make it nullable and in here just have a box to center the text the modifier will be modifier more the fire dot fill max size and content alignment will be center uh center like this will be yeah alignment center like this can we you promise that and put this on separate lines that looks better and implement our text here that just displays hello and the name so hello name that is it so now we know the route to our main screen we know the route to our detail screen and when we now click this button here we want to take our nav controller call navigate and here we want to pass a route so one of these options here and the route will be screen detail screen that wrote and that will essentially make us navigate from main screen to our detail screen because we say we navigate to this specific route but this does not yet pass our parameter our argument or navigation argument which is essentially just this text state here how can we do that for that we need to define that we have this argument in the first place and we do that here in our nav host so below this composable in which we can essentially just put our main screen passing the nav controller below this we have another composable the route will be this time our detail screen and this time as you can see we have the option to pass a list of arguments let's do that so arguments is list of network so for for each argument we have we would just add this to this list in form of this nav argument function this wants us to give this argument a name which is in this case indeed just name because we want to pass the name and it gives us a builder block here in this buildup block we can just give this argument some constraints for example the type which we can set to nav type dot string tab because we want to be able to pass a string here the name is a string we could also pass the default value which we can set to filler for example so that is how you can configure your arguments um i would always specify the the type i think you even have to not sure um you don't have to give it a default value and i think you can also determine if it's nullable yes we can say nullable is equal to true we have it um here the the nullable so yeah that is how we can do that in this composable block we can then specify that this represents a detailed screen and how do we now get this this name argument here for our detail screen well that is where this nav back stack entry here comes in handy let's um give this a name of just entry and we can then use that entry with that argument to get access to our arguments which are just a bundle a dot a get string it is because our name is a string and here we specify the the key so how we call this an argument which is this here so just name so we now defined that we have this argument but what we haven't done is we have we actually didn't pass it so if we scroll down here um my mom here to our button on click we just say want to navigate to our road but we somehow need to to tell our enough controller which argument we actually want to pass you to this route and this is where this url similar style of doing this comes into play so essentially what we're going to do is want to scroll up again to our detail screen.road and we're going to append this string here so we basically have a slash then we say curly bracket open and in that we just specify the name of our argument and curly bracket closed and then later we can just use our route make it slashed and just append our name so uh detail screen slash philip for example and this would pass philip as a navigation argument to that detail screen and if you would have multiple arguments you would just do the same here right afterwards you would for example have the h here as well and then you would just pass this one after another separated by a slash so this is how we can define a mandatory argument so then we have to pass the name if we do it like this um and we we can't make any use of this nullability here and this default value if you want an optional argument then you instead do it like this so that is very similar to query parameters of a url so we just say okay question mark our name is equal to whatever we pass here so in that case if you don't pass anything for it it will take this default value phillip or make it null if if you don't have a default value i will revert this here i will make it the mandatory argument this will crash in this case if we don't pass something for that if we leave the text field empty but yeah it's just for demonstration you could also validate that of course and for that i will also create a little help function here in our screen class to construct a route with arguments together and again this will only work for mandatory arguments if you have if you have these mixed up with optional arguments this function won't work then you have to figure out your own function or just manually concatenate these strings all the time so we'll have a function called with arcs where we can just pass a bunch of arguments of type string it will be a var arc and this will also just return a string which is the the resulting route with these arguments together and here we can just return a build string block which is essentially just a string builder we want to always append at the current route of the screen and then we want to take our arguments loop through this for each and just append slash and that's called arc so once you just append each argument to our route and yeah then we can go back to navigation scroll down to our own click here and instead of calling screen detail screen.road we call that with rx and here we can just pass our arguments we have just in the right order the first argument is our name so here we can just pass text which is the content of our text field so we just pass whatever we enter there now what we shouldn't forget is to also call the navigation composer bill in our main activity otherwise we won't be able to see anything but that is pretty much it we can now run this and i get a compiler here because i use the wrong kotlin version um if you use the same version as i do then just go to your build upgraded project file change this up to 1.5.10 synchronize this and then simply relaunch the app afterwards and it sticks to the top for some reason i don't know why but let's not care about that for now i think i just didn't center it vertically in the column yeah that doesn't matter let's let's just um write whatever peter to detail screen and there it is hello peter whatever we enter here obviously it will take that as an argument and pass it to our detail screen as i said when we leave this empty click here then the app will crash this is the other app here um but you can fix that if you just make this name and optional argument here as i showed you but in the end that is it little recap we just define our navigation composable that contains our nav host with our nav controller we define for each screen we have such a composable block with the corresponding route for that for each route we define such an object here or a data class if you want to pass some arguments to that route and yeah if you have arguments you define a list of nav arguments you can get these arguments with this navigation entry you get here and then you just define your screens and these will be replaced by nafos that is pretty much it so thanks for watching this far if you want to take your android skills to the next level check the first link in this video's description it will lead you to my website and there you will find more advanced android premium courses so make sure to check these out i wish you an excellent day and see you next video bye bye

Channel: Philipp Lackner

Views: 10,804

Rating: 4.9243245 out of 5

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile

Id: 4gUeyNkGE3g

Length: 19min 22sec (1162 seconds)

Published: Mon Jul 12 2021