Android Jetpack Navigation Component In-Depth Guide 👊👊

what's up youtube this is part one of the longer series of a bunch of videos on the topic of android jetpack and this beautiful suite of libraries contains a bunch of very interesting libraries and we're going to start with the navigation component which will allow you to navigate from one fragment to another from one activity to another and so forth in a very clean manner as well as will allow you to pass data from one screen to another in a very efficient and clean way also in a safe way using safe arcs so we're going to first set up our fragments and we're going to move from one fragment to another then we're going to see how to pass data from one fragment to another using the traditional path and way and then we're going to see how to use the same thing using the safe arcs plugin so we're going to send data from one fragment to another using safe arcs okay so you should know how to use fragments and should be aware of fragments before watching this video and you should have a basic understanding of app development with android and kotlin in general before getting started with this okay so let's get started with the video [Music] alright so let's get started looking at the navigation component and navigation refers to the interactions that allow users to navigate across into and back out from the different pieces of content within your app and the navigation component in android jetpack helps you to implement navigation from a single button click to more complex patterns such as app bars and navigation drawer and well basically the navigation component also ensures a consistent and predictable user experience by adhering to an established set of principles so we're going to look at that in practice of course as well we're going to build a little demo with the different navigation components that are going to be important for us so it's basically a collection of libraries a plugin and tooling for unifying and simplifying android navigation so that's what this navigation component inside of this android jetpack library that is available to us so what are the benefits of using it well it's a simplified setup for common navigation patterns which basically means it's easier to use and and saves you a lot of hustle especially when it comes to more complex navigation patterns it handles the backstack which means that if you go from one screen to another it will know which screen you were at before so if you move from screen a to screen b may that be an activity or a fragment if you click the back button it will know to go from screen b to screen a it automates fragment transactions so moving from one fragment to another and that is in general a very good structure to build on your application with so using fragments is really the way to go it's of course a decision that you can make for yourself but really fragments are something very powerful and useful especially since basically jetpack came about it allows us to use typesafe argument passing so basically passing arguments and data from one screen to another and doing that in an type safe way which basically means that you don't have to handle all of the put extra details that you would usually do putting that into an intent and then retrieving that on the other side so it really is handled directly by the navigation component and we're going to see how that happens and how it works it handles transition animation so if you're moving from one fragment to another for example and it simplified the deep linking functionality if you ever use that and it also centralizes and visualizes navigation in general so it really is basically a one-stop shop that helps you to use your navigation inside of your application so here the general principles of navigation are that you can move from one screen to another so for example from the home screen or launcher to the screen of your application for example the list screen where you can click on something and get the details and when you click the back button you can move back to the prior screen that you saw and that is the backstack that is handled here so basically knowing what is the screen in the stack that needs to be displayed next if the user clicks back for example it has built-in support for activities as well as fragments but it can also be extended to work with custom destinations such as your custom views so if you create custom views for your application it still works with it as well the navigation component consists of the navigation graph which is an xml resource that contains all navigation related information in one centralized location this includes all of the individual content areas within your app called destinations as well as the possible paths that the user can take through your app then there's this nav host fragment and nav host generally is an empty container that displays destinations from your navigation graph and the navigation component contains a default nav host implementation so the nethos fragment that displays the fragment destinations then you have the nav controller which is an object that manages app navigation within an f host the nav controller orchestrates the swiping of destination content in the nav host as users move throughout your app so these are very powerful words right it's going to make a lot more sense once we get into the actual demo and see how this works in practice because basically these are just words and we need to experience what these words do for us okay so then there is also the safe arcs plugin which generates classes based on your navigation graph to ensure type save access to arguments for destinations and actions which basically means that you can define that you want to be able to move from one screen to another and then you can add arguments to that move which then allows you to basically pass details from one screen to another and cool thing is it is generating classes for you automatically based on your navigation graph so it's really a type safe way it's in general a very good practice to use it so the navigation ui has additional library and ktx extension support for options menu bottom navigation navigation view navigation drawer action bar toolbar collapsing toolbar so basically all types of navigation that you have in your application you can use it there so i'd say this is enough of a presentation i think it really makes sense to get into practice and see how all of that works to build this up with three different examples that we're going to build and you're going to see how to use navigation and how powerful it is and of course we're going to use it in our bigger projects later on as well all right see you in the next one quick pause this video is sponsored by our jetpack masterclass course which we've been working on for a couple of months and this video is basically just part of that course and if you want to learn everything about jetpack that is relevant for your future applications definitely check out the link in the description below we have created a great course which teaches you to basically use all of the relevant jetpack components as well as build a real-life application which you can see here so in the background you can see the components we're going to implement most of them in our application here so you're going to learn how to build those but we also have separate demos which teach you the components separately as well so definitely check out the course and of course you will build this little dishes application where you can store your favorite dishes using the room database you can delete those dishes or edit them you can create your own dishes with your own images or the gallery if you have any dishes there and then store it using the room database and at the same time use an api to get data from the internet so here you can load a random dish which you then can add to your favorite list and then basically see it in all your dishes and as well as in your favorite thanks for watching the video check out the link in the description for the full course what we're going to build next is going to be this application that you can see here the only thing that it will do is it will allow the user to enter some data and then verify the details and then basically populate them in another fragment so we're going to use fragments here instead of activities basically moving from one fragment to another using the navigation component of jetpack and that is really the whole idea about this we're going to use safe arcs as well as actions in order to move from one fragment to another all right so let's get started by building a little demo i'm going to use an empty activity for this and i'm going to call this one nav demo i'm going to use kotlin as well as api 21 and then once my project is loaded i will move over to the build.gradle file and i need to make sure that i'm adding a couple of dependencies here okay so the dependencies that i'm going to add are going to be the ones that we need for navigation as well as legacy support okay so we have navigation fragment ktx as well as navigation ui ktx and then finally the legacy support v4 this allows us to basically have support for all the versions of android and then here we need to sync it so click sync now and now you can use all of those tools in your application so far we have only the main activity here and the next thing that i will want to have is a couple of fragments so i don't want to use activities in this case i really want to work with fragments of course we're going to need an activity that can host a fragment because fragments can only be part of an activity they always need the activity context so to speak but other than that we can have multiple fragments running on one activity and that's what we're going to do here all right so the first thing that we're going to add is new fragment here so let me create a new fragment here i'm going to use a blank fragment okay which will basically be an empty fragment i'm going to call this one enter details fragment and you will see that it automatically gives you a couple of arguments and i'm going to get rid of those i'm not going to need them and i'm going to clean up my application in general because i'm really not using any of those arguments as well as this companion object we're not going to use that either so let me get rid of that so now we have a very clean fragment which basically has an oncreate method as well as an oncreateview method these are lifecycle methods which will be called straightaway when the application is getting to that details fragment so then the oncreate method will be called and then the oncreateview method that will then create the view by inflating our fragment layout so if you look at that that is basically our fragment layout which currently just has a text view and nothing else so in this fragment we have the frame layout so it contains a frame layout in which just has this text view here saying hello blank fragment so nothing too fancy super simple ui so next i'm going to design a layout and the thing is i'm not going to go over the details of how to design a layout this is something that i expect you to know how to do so i'm just going to replace this code with the layout that i'm going to use and quickly show you what's going on here so basically this is the layout that i will have enter your details below with a name and mobile number and this little button which basically will be inside of a linear layout so i'm not using a constraint layout which would be a great option if you want to design it by using drag and drop but in this case because i only have elements on top of each other it's a lot easier to just use a linear layout so i'm using a text view here as well as a text input layout which is this edit text twice okay so we have two of them one of them is going to be the name the other one is the mobile number and then finally we have a button at the very bottom which is going to be the button verified details okay so this is the ui that we get from that and that's basically the ui that you saw in the application all right now at this point let's create another fragment and i'm going to create it here another fragment called verify details fragment and i misspelled it there it should be verify let me refactor it real quick so this should be very fine details fragment now let's get rid of all of the boilerplate code that we don't need we're not going to use those arguments that are given to us this way we're going to build everything from scratch except for of course the oncreate and oncreateview method because we're going to need those as they are okay next i need to make sure that i take care of the navigation so if you look at it we have resources here which are our drawables layouts mipmaps and so forth but now we also need to have one for navigation so let's go ahead and create a new directory here called navigation and inside of this directory i'm going to create a new navigation file okay so here you can see now at the top it directly says navigation resource file because the folder has a name that fits to it so we created this folder which is a keyword that exists in the context of our application which is why it directly understands that if i create an xml file here i'm going to most likely want to create a navigation resource file which is of course the xml file that it can work with so i'm just going to call it navigation and really you could of course give all of these elements better names you could of course create an extra directory here underneath demo for ui elements to clean things up and everything that's what we're going to do in the bigger project but for this demo it's really not necessary but what you will see here is you will have a little design and you can click this icon here at the top to add a destination you can also see that we have a navigation code in xml here which is basically empty the only thing that it has is an id and a namespace that it uses but now we can use this little button here and then select which of our fragments or activities should be the destination okay so for example i can select here my enter details fragment as the destination now you can add another one i'm going to add the verify details and of course the name was still incorrect there and the cool thing is i can now go ahead and just drag this little part here over to this other fragment what will happen in code is this action will be added so let me let me get this back and now i'm going to only have those two fragments for now right as you see that the xml code created two fragments in here so one fragment is named enter details fragment with a name and the label as well as a layout that is defined for it and then we have this fragment here which is the verify details fragment now if you want to create an action you can do it directly inside of this fragment in xml code or you can really just drag this little part to the fragment that you want to have a navigation to so now i can navigate from this screen to this other screen which is basically going to be this fragment to this other fragment and what is created for me is this new action so you see this action now is inside of the fragment okay so here this is the fragment opening tag and this is the closing tag so this action is associated to that fragment and this action has an id which is a pretty long name it says action enter details fragment to verify details fragment 2 and it has the destination of verify details fragment which is this fragment right here right so it's going to move over to that fragment so you could easily create this action manually yourself you would just need to give it an id as well as a destination and then say where it starts so it's going to start in that fragment so that's where you would put that action in what you will also realize is that here the start destination is our enter details fragment this will be the first screen that will be displayed when this navigation is going to be used okay now this by itself will not be enough we need to go to our activity main which is our entry point into the application because if you look at your android manifest you will find that here it says intent action main and this basically means that this will be the activity that will be displayed first okay so it's the launcher activity you have a category here so basically it will make sure that this activity is the first one to be displayed inside of your application now we can go to our activity main xml and make some changes here because what we have here is only the text view right and instead of having this text view which i'm not going to display at all i will just set up the fragment that i want to use here and i'm going to give it a width of zero density pixels as well as a height of zero density pixels and that will basically do the trick right but of course you need to add a couple more settings because we're in a constrained layout so let's go over to this designer and unfortunately it doesn't help me here so i need to give this fragment an id and i'm going to call this fragment then we need to give it a name and i'm going to say that this is going to be my nav host fragment okay so android x navigation fragment nav host fragment so navigation host so to speak and i'm going to set this as the default nav host so this is going to be our navigation host our default navigation host then you need to add the constraints because well we're in a constrained layout after all right so let's add those here as well i'm just going to say that it's going to have constraints towards the parent in all directions so towards the top towards the bottom and so forth so basically it's going to take the whole space that is available in the screen and then that's going to be the most important part here is going to be that we assign a nav graph so what i'm doing here is i'm saying that the nav graph for this fragment should be the navigation navigation so at navigation is the navigation folder and then the nav negation name keyword is going to be this navigation xml file that we created so now we defined in the main activity xml file that our navigation that we have created this navigation xml file is going to take care of how the navigation will be handled inside of our application because basically we are hosting a fragment inside of our main activity and that fragment hosts a navigation graph okay so this basically means that we're now going to use the navigation graph that we just saw which is this beautiful little graph here so this whole file is the navigation graph so to speak so this by itself will however not be enough we also need to add something in the main activity oncreate method and that will be our nav controller so we need to make sure that we're using navigation which is a class that was created for us based on our dependencies that we added earlier and now we can find a navigation controller we need to pass an activity which is going to be this because we are inside of the main activity and that is also where we're going to need the navigation controller and then i'm going to use the fragment because the fragment if we look at it is this fragment here right i just gave it this very basic name but it contains the nav graph and it is the default nav host so this means that it will now be our navigation controller or it holds our navigation controller right this fragment holds the nif controller that we're going to use in our application and now we just need to set up the navigation ui to also have an action bar with nav controller in our application so i'm just going to pass this and the nav controller that was basically the idea here so we're using the navigation ui which is a class which hooks up elements typically in the chrome of your application such as global navigation patterns like a navigation drawer or bottom nav bar so we're not using a bottom nav bar and i'm doing that on purpose because using a navigation bar would set up everything for us already we wouldn't have to do any of the stuff that we just do here but the idea behind this video is really to explain you how this is built from scratch and how this whole interaction between a navigation as well as fragments and the main activity or activities in general is okay so at this point our main activity will fully host the fragments that we created and now it's time to actually define a couple of buttons that we can click or basically define the ui that it does anything so go to the enter details fragment here and what i'm going to need is in my own create view i'm going to need to set up a couple of things okay so the first thing will be to have my root view to be the inflator basically what we have here so this part here i'm not going to return it straight away i'm going to add a couple of changes to that root view okay so i'm going to go ahead and say that i want to have a button verify details which should use the root view and get the id item from it which is going to be a button okay so you could of course use view binding here but i'm going to keep it simple in this example and that's why i'm going to use find view by id okay so that's how you can find a view by id inside of a fragment okay and then the next thing that we're going to set is an on click listener for this button set on click listener and now we can say what we want to execute once the user clicks on the button okay and let me return the root view so that the arrow disappears and it's not complaining anymore so at this point we can go ahead and use find nav controller in order to navigate and here we're going to use our action enter details fragment to so and so super long name enter details fragment to verify details fragment what that will do is if you look at it it will execute this action here if we look at it it's this action here which has the destination to go to the verify details fragment so we're starting in this enter details fragment and we're moving over to the verify details fragment so basically going from this screen to this screen that's what we're doing here right all right and at this point we should have everything to test our application and you saw it wasn't too much code it was more about me talking a lot and explaining everything that i did there and see saw there so you can see this is our fragment enter details fragment so to speak and now i click on this and you see we're moving over to this other fragment now this button here at the top doesn't do anything because we didn't implement that yet but the back button works already and you see we never had to implement anywhere that we're using the back button or use the on back pressed default functionality or anything like that that was all handled automatically by the navigation component for us so yeah the next interesting thing that we're going to look at is of course how to pass data from here to the other fragment because these are two different screens but the cool thing is they are still in the same activity and this is a very efficient way of working with your ui this is super super fast okay so that's it for now let's have a quick break and see you in the next part quick pause this video is sponsored by our jetpack masterclass course which we've been working on for a couple of months and this video is basically just part of that course and if you want to learn everything about jetpack that is relevant for your future applications definitely check out the link in the description below we have created a great course which teaches you to basically use all of the relevant jetpack components as well as build a real-life application which you can see here so in the background you can see the components we're going to implement most of them in our application here so you're going to learn how to build those but we also have separate demos which teach you the components separately as well so definitely check out the course and of course you will build this little dishes application where you can store your favorite dishes using the room database you can delete those dishes or edit them you can create your own dishes with your own images or the gallery if you have any dishes there and then store it using the room database and at the same time use an api to get data from the internet so here you can load a random dish which you then can add to your favorite list and then basically see it in all your dishes and as well as in your favorite thanks for watching the video check out the link in the description for the full course all right welcome back in this video we're going to implement the functionality to also be able to go back using this button here at the top because well it doesn't work so far and we're going to pass the data from this fragment to the other fragment okay we're not going to display it yet but for now we're just going to take care of passing it using the navigation args okay so let's first of all take care of this back button and therefore i'm going to go to the main activity and i'm going to make sure that the nav controller is going to be a global variable that i can use throughout this class so i'm going to call this nav controller that's fine it's going to be of type nav controller and at this point we need to take care of initializing it so get rid of this vowel so you don't create a new variable for this and then there is a method that you can override and it's called on support navigate up what this will allow us to do is to now not only return this super support or navigation up but instead take care of the functionality so that we can click on the back button by saying navigation ui dot navigate up should use the nav controller that we have set up and then you need to give it another setting here which is the openable layout and i'm going to set that to no okay so i have a couple of brackets too many here but now this should do the trick now let's run this and see if the back button is going to work so let's verify details and you see now this back button here at the top is also going to work for us and this was enabled by this line here so this set up the action bar with navigation controller which basically meets this back button and here we enabled its functionality so that it actually goes back up in the stack basically going to the activity that was opened before or in this particular case even the fragment that was displayed before so we don't even need to double check if we are in a fragment or in an activity that's all taken care of by the navigation component of jetpack okay now let's go over to our enter details fragment and let's add all of the different elements that we want to work with for example i want to work with the edit text name as well as the mobile number and now let me check if i had an error here id et first name well that was the internal name that i had there so let's look at what this is well it's basically those two edit texts okay so now i want to access those two edit texts to then use the data inside of my application and pass it okay so this is what we're doing here we're finding it by id you can see we're using the root view once again which is basically our fragment enter details this is basically how we can get the views from a fragment as we have seen earlier with this button here where we also got the button using the fragment font view by id on the root view okay now we need to make a couple of changes inside of the on click listener if you want to double check those so how i'm going to do that is i'm going to get the first name and the mobile number by getting the text from the edit text and convert it into a string and the same goes for the mobile number so whatever the user has entered will be converted into a string here as well and then we will validate if the values that the user has entered are empty or not okay so i'm just going to check if they're empty i'm just going to make a little toast so if the first name entry is empty which means that this field here if that field is empty and we clicked on verify details then a tool should appear saying enter name and if the mobile number is empty it should say something like enter mobile number okay so nothing too complicated here but what's interesting is the else case so here else which means if those two are not empty at that point i want to move over to the other fragment to this fragment here to the verify details fragment and i want to pass the data to that other fragment and in order to do that i'm going to create a bundle which will be a bundle of var arcs so here i can create a var arc pair or multiple var arc pairs and a pair is a string and an any object so in our case i'm just gonna use name it's going to be assigned to first name and here i have to write it correctly and mobile is going to be assigned to mobile dot to long okay so whatever the user has entered that will be a long value we need to make sure that this is going to work there as well and of course we need to get rid of this comma here because that's one too many okay so we prepared the bundle now the bundle of arguments that we want to send over to this other fragment and now at this point we can go over to the other fragment but before we do that we of course need to make sure that we pass the information here as well so this navigate method has multiple overrides okay so there's one option where we navigate with the rest id and then another one where we have the rest id plus a bundle of arcs or even nav options so there are multiple over loads i believe is the right term here and we're going to use the overload where we now pass the bundle also so here i'm going to pass the bundle of arcs okay so that's how you and actually maybe it's better if i put this comma here then it's a little more readable i guess so now we're going to navigate over and we're going to pass this information to the other fragment so now that we pass it how do we retrieve it well in the verify details fragment we're going to retrieve them on create view so once the view is created we will have access to them so i'm going to create a new variable which i'm going to call name inside of oncreateview and then i'm going to check the arguments which is a nullable so it can be empty for a string called name and then i'm going to do the same with the mobile number which will be arguments and get along with the mobile number and of course arguments needs to be spelled correctly now if you want to display it in the ui straight away you will need to make sure that you go to the fragment verify details xml file and change it up a little bit so i'm just going to use a linear layout here once again to display all of the information so let me replace this real quick and show you how this is going to look like so basically i have this text view here at the top saying verify your enter details below then the name as well as the name displayed so we have a label as well as the actual name that the user has entered a label for the mobile number as well as the number that the user has entered okay so these are going to be the text views that i'm going to use here it's basically just four text views that i have actually five text views that i have here one for the title so to speak then one for the label of the name the actual name entry which will also require of course an id so that we can access it and the same goes for the mobile number it also requires an id so we can access it and we're using different colors here so this is really something that is up to you you can set it up however you want the ui the only things that are going to be important are going to be the two with the id where you want to display the data the others are just there for better visibility so to speak and at this point we can use those so let's go over here and use those values that we have here and pass them to our edit text or basically set them as the text value for our edit text and that's something that i would like you to pause the video and try to do yourself because well you should be able to do that just a little hint use the root view as we have done in the enter details fragment so here we also use this root view so you're going to require something similar to what you see here okay so i hope you paused the video and tried it real quick so of course we're going to need a root view which we get by using the inflator inflating the fragment and here i had misspelled it of course so let me so let me refactor it real quick and it should be verified details now verify like this and then we can access the text view for the name as well as for the mobile number okay so i'm just going to access those two here now you can see we can use those and now set the values of for example our name to be the text of our name argument that was passed to us and now we're going to do the same thing with the mobile number but we have to take into consideration that this mobile number object here or this variable is of type long so we need to convert it into a string at this point and now instead of returning the inflator we can just return our root view that we had set up here so at this point let's test the application and see whether we're going to be able to pass the details from one screen to another okay so i'm going to enter dennis here and the mobile number let's verify the details and we see that details were passed to the other fragment and now instead let's you not enter anything here and verify details and you see enter name is displayed as well as well if i enter a name and click here you see enter mobile number is displayed so those little toasts that we had set up are working correctly all right so that's the second part of this project now we just need to run the third part in which we will see how to do all of that with this argument stuff in a safer way we're going to use safe arcs instead because now you know how to do it let's say in a classical way but we're not using safe arcs which is another bundle that we can use which is super powerful and useful so instead of using this i'd say antiqued approach we're going to use a super cool jet package approach and that will be to use safe arcs so let's have another break here and see you in the next part quick pause this video is sponsored by our jetpack masterclass course which we've been working on for a couple of months and this video is basically just part of that course and if you want to learn everything about jetpack that is relevant for your future applications definitely check out the link in the description below we have created a great course which teaches you to basically use all of the relevant jetpack components as well as build a real life application which you can see here so in the background you can see the components we're going to implement most of them in our application here so you're going to learn how to build those but we also have separate demos which teach you the components separately as well so definitely check out the course and of course you will build this little dishes application where you can store your favorite dishes using the room database you can delete those dishes or edit them you can create your own dishes with your own images or the gallery if you have any dishes there and then store it using the room database and at the same time use an api to get data from the internet so here you can load a random dish which you then can add to your favorite list and then basically see it in all your dishes and as well as in your favorite thanks for watching the video check out the link in the description for the full course okay so now that we have seen how to do it in a classical approach let's look at how we can use safe arcs instead and safe arcs are going to help us to pass arguments in a safe manner because you see here we had to check the type and then we needed to enter a key which is a string so a lot of things could go wrong when doing that you could have misspelled it or whatever it's really a pain in the butt sometimes if you use this approach so instead we're going to go over to our build.gradle once again and here we need to add another dependency and this will be and i believe the other build cradle so in the one that is not the app build cradle here in dependencies i will need to add a couple of lines which is this neff version as well as this here where i'm using the clasp android navigation navigation save args gradle plugin with the nav version which is in my case 232 or maybe it's 233 already at this point it really depends on when you record this but 232 should work either way so now you can sync it and once it is synced we need to go to our build.gradle app and here we also need to make sure that we have this plugin installed which means this android x navigation save arcs kotlin plugin so let's sync that as well this will install the plugin for us now we can use it throughout our application and what i'm going to do is i'm going to go over to my navigation xml file and here i'm going to make a couple of changes so the first thing is that in my verify details fragment i want to have arguments now which means that i need to make sure that i can add elements into the fragment and how i do that is i get just open with my arrow key and then the argument okay and here this argument needs to have a couple of parameters mainly the name so i'm going to call this name then the arc type which will be in my case string and then the default value if you want to define that so i'm just going to use a default value of an empty string and if i do that i need to do it like so okay so in a pastor of apostrophes i can add that okay so let me add that separately so this is argument number one and i'm going to create another argument which will be the mobile number and the archetype will be a long and the default value in this case will be zero l capital l health standing for long so that it doesn't think that this will be an integer because if you just enter a number then it will think that this is an integer if you want to specify that this is a long then add the letter l here and now we can go ahead and make a change to our enter details fragment where we used the bundle in order to pass the data so instead of using this bundle with all of the different parameters in this case we just had two but you see we had a string here highly risky as well as here as well so now instead of that we can just get rid of this and instead using our enter details fragment directions and this will only be available once you build your application so let me do that real quick you will also need to do that rebuild because otherwise the because this will now generate a file for us an auto generated file after a couple of seconds was the cradle is done and of course you shouldn't have errors in here so let me get rid of this nav controller entirely and then rebuild the project because if you have errors then it will think well i'm not gonna even try to generate something for you so you see now i have a new folder here that i didn't have there before and it's to be precise this folder here which is enter details fragment directions as well as verify details fragment arcs the cool thing is these are two auto generated classes that will now help us to safely navigate from one screen to another so here the details fragment directions you see they have a name of type string and a mobile of type long with the default value of l and this year of with the default value of an empty string and then we have the action id that will execute it which is this r action enter details fragment to verify details fragment which is this arrow here this blue arrow that's the action of moving from one screen to another so now it created this file for us as well as the arcs as well so now it auto generated this bundle for us and there's even a companion object so it's it's quite a cool stuff so that it automatically generated for us and we can now use that in our project so let's get back to our enter details fragment where we can now just use find nav controller and navigate to our enter details fragment that were using our enter details fragment actions with the name that we have defined for it which was a super long name and then we can now pass the arguments that we want to pass and this is a very long name so i'm going to put that in the next line as well as here and the two variables that i will pass will be name as well as the mobile to long so now we just need to make sure that we have those names exactly like that so i called it first name at the top so i'm going to use that as well so you see that now we can pass variables directly instead of creating an extra bundle and all of that so it's safe arguments that we're using here and then in the verify details fragment we can now use save arcs here instead so let me comment this out and instead get the arcs first which will be verify details fragment arcs by nav arcs and this is the type of arcs that i'm going to use and for this to work you need to import and have ark so let's import that this will then import nav args here at the top fragment networks and now we can create the two variables so file name will be arcs.name and val mobile will be arcs dot mobile and that already does the trick and i call that mobile number so let me call that mobile number here as well okay and that's going to be basically it so that's going to do the trick for us as well now we are passing the data using safe arcs instead of this bundled approach we created earlier so let me go ahead and use an entry here so let's verify the details and you see it works exactly as it did before but now we're using safe arcs so the main advantages here are that it's simpler to use these safe arcs are simpler to use than using the bundle and at the same time you're passing type save data so you're passing it between the destinations this allows you to take advantage of data encapsulation by passing only the data that you need between destinations instead of exposing it more broadly so even the documentation says safe arcs is strongly recommended for navigating and passing data because it ensures type safety okay while in terms of code it might not have been quicker so we didn't have to write less code but at the same time we made our application a lot safer and we're using best practices here okay so that's it for this video you saw how to use navigation how to use the navigation component how to use the navigation graph how to create actions to move from one fragment to another fragment and there are even developers who say that you should build an application only using fragments not even using extra activities except for your main activity in your application so this is really something that you might take into consideration you saw how all of that is connected in terms of your code what's happening how you can write an action manually how those fragments are connected to each other what a destination is in terms of an action what the start destination is basically being the entry point of your fragments or of your navigation in general how to pass arguments using safe arcs in order to pass data from one fragment to another in a type manner without exposing any other information that is not to be exposed and yeah that's basically it for this video thanks a lot for watching this video i hope you enjoyed it definitely hit the like button if you liked it as well as hit that subscribe button at the notification bell to never miss out on any of our other videos we're uploading regularly and we're uploading high quality content as you saw in this video and also check out the link in the description below in order to get the full course and another video of the youtube channel if you like it alright that's it for me have a nice day

Channel: tutorialsEU - Android

Views: 478

Keywords: introducing android jetpack, android jetpack, jetpack, android developers, android, android updates, jetpack compose, architecture components, jetpack compose tutorial, new in android, kotlin, developer on android, android jetpack tools, android studio, jetpack components, android tools, what's new in android, android development, compose, android architecture, android apps, android tutorial, android mvvm, develop on mobile, android architecture components tutorial

Id: WyNpxXmPbfU

Length: 51min 18sec (3078 seconds)

Published: Tue Sep 28 2021