Jetpack Navigation Component in One Video

in this video I'm going to show you the new navigation components library for Android which is part of the jetpack library it's a new way for developers to navigate their Android applications and in my opinion it's a far far superior way especially when we're dealing with fragments because before there was a lot of real real shortcomings when it came to fragments and how they're navigated and how you can navigate the back stack with those fragments so basically what happens when you press the back button or back arrows in your application so I think the Android team at Google did a really great job with this library so now let's demo what I'm gonna show you how to build in this video and then we're gonna jump into development so on the screen here I have this kind of this map and this is called a navigation graph when you're talking about the navigation components library and basically what the graph is is it just is a it's a it's exactly what it sounds like it's a graph that defines what the navigation is going to look like in the application so you can see that there are six screens on the on the graph here so this kind of entry screen which is what you're seeing here and then there's the different pathways that you can follow so if I press the view transactions button I'm taken to this screen if I go back I'm taken back to the main screen the bottom button is the view balance button that would take me to this screen here and then the middle button is the send money button where I can enter some data and send this to the next fragment so let's give this this guy a name who's gonna be receiving this money if I click Next that guy's name is passed through a bundle and passed to this new fragment which is this one right here so it says sending money to Mitch because I entered the name Mitch here if I was to change this to Bill and go next it would say sending money to Bill so not only am I going to be showing you how to navigate the app using the graph and using fragments but I'm also going to be showing you how to pass different data to the new fragments because it's it's obviously going to be a little different because we're using a totally different way to navigate the app so next let's send some money to bill so I'm gonna send bills sixty dollars and if I click send once again that is passed through the bundle to this final fragment here that says you have sent sixty to Bill so you're gonna see a lot of things here you're going to see how to use how to build a navigation graph how to implement fragments with the navigation graph how to pass data to fragments with the navigation graph and how to also have animations to the transitions to the fragment transitions so you notice about you'll notice if I go forward I am getting that kind of sliding right animation if I go backwards they get that sliding left animation so different animations for the different trends transitions as you guys go into the app further or out of the app kind of backwards just as kind of a heads-up I'm gonna be building this using Kotlin and I'm gonna be using Android X so if you don't know Collin you should still be able to follow along with the video and if you don't know Android X it's just a new way that they organize dependencies for Android so no big deal there and we're gonna be following the documentation on this so I'm going through an navigation guide so developer.android.com slash guide slash navigation and the navigation getting started and this doesn't matter so that's just this page right here and then I'm just gonna be kind of following along through this and basically I built this example I couldn't find this on their Google sample the code for it so I looked at this and I said okay well I'll use their example and I'll actually build the code for it so just pretty much following along with exactly what they do in the guide here so the first step is of course to create a new project so I'm going to start a new Android project I'm going to select empty activity go to next I'm gonna call this navigation example or what did I call it I think it's maybe navigation components example navigation components example and all the code is on github by the way if you go to my github page you'll be able to find the code at this repository Mitch Tavian navigation components example you'll see that navigation graph picture down here and all of the the branches are here although I wouldn't even bother referring to the branches just use the master branch and you can take a look at the code alright so we have our name we have where we wanted to store the save location we're using Colin we want to use Android X artifacts and the min API 21 is fine I'm gonna click finish and Android studio is going to build that project for me also as just kind of a heads up if you end up finishing this video and you want to see another example of how to use navigation components you can check out my dagger course on my website it's completely free just go to coding with Mitch comm and scroll down to the front page where it says dagger 2.2 on Android if you click here you just got a register for the course and you can start watching it's completely free so if you don't know how to use dagger that's a good one to watch and also I use navigation components in that course so you get to see another example of how to use it okay so once you Android studio has built your project we are ready to get started telling me that I need to update Kotlin but I'm going to do that another time I don't need to do that right now so the first step as always is to get the dependencies and we can get the dependencies from the navigation navigation or the jetpack section of the Android documentation so I'm at jetpack Android X releases navigation and then I'm down to the section declaring dependencies so these are this is the actually really neat one we just need this one right here so I'm copying def defined version Kotlin to point 1 point 0 alpha o6 I'm going to go into the build Gradle app file I'm going to paste that down below now I'm going to go back to the documentation and I'm going to grab the collin dependencies right here so back to Android studio pasting those in and there is the dependencies that we need for this video oh we do actually need one more for some styling I think it's for I can't remember what I used it for but I think it's for styling on buttons or something like that so I'm just going to type define material version 1.1 point 0 - alpha Oh 7 like I said I can't remember what I use this for but we're going to encounter it in a minute here when we actually get to making the layouts but just write this in it'll be comm dot googled on Android material : material and then I can reference that version so : again dollar sign material version so there we go that should be all the dependencies that we're going to need I'm gonna press sync I don't believe there's anything we need for the project file I think it's just we need the Google maven repository so let's take a look in here we have Google we have J Center that's good we have the column plug-in yeah that should be good the other one that the dependent or the other dependency that the documentation recommends is using safe arguments which is basically it'll just give you a way to declare the type of argument so the datatype of the argument that you're gonna be passing through a bundle so if you want to include that you can I just like I said all it will do is say if you want to send it integer through the bundle you can say yes I'm sending an integer or if you're sending a string you can say you can define that you're gonna send a string if it's recommended definitely in production if you're going to use this it'll help to catch errors when they happen or if you accidentally use the wrong data type but in this video I'm going to be using the mote and just focusing on the navigation alone so now it's time to actually define what the navigation is going to look like and as you saw from the navigation kind of diagram that I had showing in the beginning of the video we're gonna have six screens and you saw them in the demo you have one with three buttons at the start you can then that'll take you to that screen bottom will take you to that screen and then so on you get the picture now so at this point we want to define this inside of Android studio so this is called the navigation graph everything in this example is going to kind of revolve around this thing called the navigation graph so how do you create this navigation graph well I'm gonna right-click on the res directory go to new I want to go to new Android Android Android resource file and I can select resource type go to navigation and this is this will generate a navigation directory and it will also generate a file where we can define the navigation graph so it's going to be called nav underscore graph and I'm gonna click OK and Android studio is gonna generate that directory and also that navigation graph for me so now in here I would I would define kind of the navigation for the application but because we don't have any fragments yet that's what we need to do next because once we have the fragments we can build this navigation graph and kind of essentially we want to build this screen it's gonna look exactly like this once we have the fragments we can build the map so here's the graph now let's make those fragments so it's gonna be six fragments in the video as I talked about and I'm gonna create them all in the main package directory so right click on the main package directory going to new hopefully you can see this on my screen yet you should be able to just barely see that I'm going down to fragments and I'm selecting fragments blank so this is just gonna be it's gonna generate a fragment for me and it's gonna generate a layout file for me I don't want to include the factory methods I don't want to include the interface methods it's gonna be as basic as it gets it's just gonna be a fragment and it's layout so the first one is gonna be main fragment I'm gonna click finish and Android studio is gonna generate that for me I don't need any any of the Builder stuff I don't need the parameters I don't need any I delete too much there I want to just delete those I just like the most basic you can possibly get and now I want to do the same thing with the other five fragments so right clicking going to new going to fragment blank fragment this one's going to be called view transaction fragment again I want to generate the layout but I don't want anything else click finish now delete these parameters soon as Android studio is done building this not sure why wouldn't let me delete it now generating another new fragment so another blank fragment this one's gonna be choose recipient fragments if I spelt that right recipient don't need any of this finish okay let's delete these comments again and those two declarations right-click again another new fragment blank fragment this one's gonna be choose no I just did that one view balance fragment type that right it looks good view balanced fragment finish let Android studio build that for me as soon as it's done delete everything at the top right click another another new one you're getting very good at this by now we've already created four so just two more so specify amount fragment again unclick these finish delete the comments and the declarations and the last one right-click new fragment blank fragment this one's going to be confirmation fragment and unclick these two and finish so now to save time I've I'm just going to copy and paste the layouts into the project so I'm opening up res opening up the layouts and I'm just going to copy paste in all of these layouts so we have I'll just open them all fragment chooser fragment confirmation fragment main view balance view you transaction and I'm going to change all the tabs close the preview so I'm going to the text tab closing the project here so it gives me more smart room going to the text tab go to the text tab and now I'm going to go to the github page so the github the code for the project I have the master branch selected and I'm gonna grab the code for all of those layouts I don't really see the point in typing this out on video the the point of this is to show you the navigation graph the navigation components library not the layouts so first is activity main I think this is actually pretty much empty this is just part of the fragment setup activity main is the only activity in the project so we want to put this fragment declaration inside of activity main because that's what's going to be inflated and that's going to it's going to reference the navigation graph right here so notice the attribute app navin it references that navigation graph that I created and I have a default nav host set to true so this is very important it means that this activity is referencing a navigation graph so it's basically delegating all of its navigation code to the navigation graph that's what it means so I'm copying all that going into Android studio I'm an open activity main go to the text tab and I'm going to copy or select all and paste that in so right now there should be kind of nothing showing because we don't have anything basically so let's get the rest of those layouts let's go to github go to the next fragment which is fragment choose recipient I spell out right yep recipient I'm gonna copy all of the code go right down to the bottom copy that go to Android studio and look for fragment choose recipient which is this one select all and paste it in nothing fancy here let's just take a quick look at this choose recipient fragment did I not spell that right she had to choose err let's rename that to some right clicking refactor rename this to choose recipient fragment and that means that the layout is also named incorrectly so right clicking on that going to refactor going to rename this should be fragment fragment choose recipient refactor that so nothing fancy here just some base I'm not even going to bother explaining it because there's really nothing special about that so let's go to github and get the next one which is fragment confirmation again copying the whole thing going back to Android studio fragment confirmation pasting that in no spelling mistakes this time grabbing an ex fragment fragment main this is the main fragment the one that's going to be inflated right away when they launch the application so copying that again all that pasting it in that's going to be this main screen right here going to github gonna grab the next one fragment specify a mount so let's copy the whole thing go back to enter studio paste that one in nothing too fancy here just accepting an amount and there's a send button go back and there's two left fragment view balance is the next one copy that back to Android studio I can close this preview fragment specify amount am I missing it know which one was it was fragment do you balance fragment you balance select all pasted in next and the last one I know you can't wait fragment view transaction we're almost done so copying all of this all this stuff fragment you've transaction and pasting that in so there there are is all of our screens if you're getting any kind of an error like it looks like I am right here this shouldn't be happening because the the ID is right there if you get any kind of an error just rebuild the project and that should take care of it it sometimes happens when you copy/paste in code it I don't know what it is about the the Android studio that isn't able to read things when when you copy and paste it in but just rebuild and it should take care of those errors well it's still showing as read but everything is aligned correctly so it must be reading in so I'm gonna assume it's okay so now I'm gonna close everything and we can work on the next part so this is probably the coolest thing about the navigation components library this thing that we're going to work on next now that we have all the fragments and in activity main we have our we have a fragment declaration that you saw and it has an attribute navigation graph pointing to that navigation graph that we created it says default navajo sequel to true now the coolest part as I said is we're gonna define the relationships inside the navigation graph so you can either do this with text just like if you were defining like an XML layout but the design tab is actually really useful here so you can what you can do is go up to this little plus sign here and I can choose like a relationship to set up so the first one is fragment main this is kind of the very first fragment in our in our graph that's going to be the one for this main screen here so I'm adding that one now I want to add the other fragments so I'm just gonna add them all in and then I'm gonna draw the lines so choose destination frag fragment whoops choose death choose recipient fragment sorry I'm just gonna add them all in and then arrange them fragment confirmation fragment main we already got that choose recipient we got that fragment specify amount fragment view balance and the last one is fragment view transaction so now let's let's actually zoom out a little bit because I'm a little close here we're going to get main fragment here just taking a look at our image we have main fragment we have view balance fragment at the bottom and view transaction fragment at the top so view transaction fragments going to the top specify amount fragments over here choose recipient and this is confirmation and view balance so we have this this is what our navigation graph should look like and which is exactly what you see in the picture you have the main fragments choose recipient which goes to specify amount which goes to the confirmation you have view balance at the bottom and view transactions at the top so this is cool I love this I love being able to look at this and visually see what the navigation of my app should look like and now the coolest part is I can just draw arrows so I can like take this draw it drag it to that I can take take it again if I can click it and zoom in because I don't seem to be able to click this oh the problem is you got to click on the fragment and then you can drag it up okay there we go so click that drag it down drag it down now click this drag to that click this and drag to that so not only do you get like a really cool little visual thing here is now that that will obviously generate the xml required for you so if i go over to the text tab i know how have all this XML that's been generated for me and this looks really intimidating when you look at it at first but once you get kind of familiar with how this works it's it's actually really cool and it's really logical and it makes it makes things really easy like I like I said I really like the navigation this whole graph system that they are they're defining so as I mentioned probably a minute or two ago one of the other core components of using this navigation system is something called the navigation host so that's this fragment that I added to the layout of activity main you have to define what what's view or what activity is hosting your navigation graph so that's what this fragment is all about you give it an ID you give it a name so Android X navigation fragment nav host fragment this is very important you must have this added to it you can set it to occupy the entire view obviously and then set the default nav host to true and then set it to a navigation graph so you're inserting a fragment telling it that subclass is the Navajos fragment class telling it that it's a default navigation host and then referencing a graph so it knows what to do so all this is done in XML very very cool next the next thing is the navigation graph which you just saw so now in here we want to we want to define how how these navigate it how these fragments are going to be navigated so just like any other application we need a way to initiate the the transactions so how do we do that because right now we have our graph we know what the navigation is going to look like but which which one of these buttons initiates you know this line which one of these buttons initiates this line which one initiates the top that's the next part we need to do like do the same thing we always do attach on click listeners to the buttons but we need to have those button clicks reference the navigation graph so that's going to be the next task and with the navigation components library all of this is done using something called a nav controller so you might be thinking that we should set up this nav controller thing in main activity but actually we're going to be setting up in main fragment because main activity is delegating everything to the navigation graph you don't have to do any thing in mainactivity it's essentially just taken completely out of the equation once you add this fragment and tell it that it's a navigation Navajos fragment you don't even need to do anything so in main activity we will doing absolutely nothing in but main fragment is the one the first one in the navigation graph so that's the one that we need to start with and so first let's implement the onclicklistener interface because we know we're going to need to be detecting clicks so viewed onclicklistener it's going to tell me that I need to import the onclick method so alt-enter implement members get the onclick method and I personally like to move my override methods to the bottom some I like to leave on top but the onclick I definitely like to put on the bottom so I'm just cutting that and putting it on the bottom no real reason for that just something I like to do now we need to define something known as a nav controller so nav controller you can see that the autocomplete is giving me some suggestions there so VAR nav controller it's going to be of type nav controller it can be null which I'm going to set it to null just to start and then as soon as the activity view is created i want to instantiate that nav controller because every the navigation is going to be tied tied around and revolving around this navigation controller object so I'm pressing ctrl o and I'm going to get the on view created method start is right there and now inside on view created I want to go nav controller equals navigation dot find nav controller and then I want to reference the view so that's going to instantiate my nav controller which is going to have a reference to the navigation graph that's the cool thing so automatically now it has a reference to the view and it has a rep because it has a reference to the view which is fragment main which exists inside my nav graph now my navigation controller has a reference to that navigation graph and now I can use that so first I want to attach on click listeners to all the buttons inside of this view so find view by ID this is going to be a button got to import the button our ID dot view transactions button set onclicklistener reference oops that was the wrong listener reference this now I'm going to press control D two times because we need to attach two more on click listeners this is going to be the send money button this one's going to be the view balance button and they're all height they all just have onclicklistener z' attached to them so again this is this screen right here view transactions button view money send money button and the view balance button that's these three so now inside of the on click method I want to do a when statement which is the Kotlin version of a java switch statement I want to say when the the view the view cannot be null first of all so this view cannot be null and now I want to add cases to the statement so our DUT ID if it's the view transactions whoops view transactions button then I want to reference my navigation controller which cannot be null and I want to call navigate the method navigate and on a reference the fragment or the the the navigation component that I want to execute so inside here this is kind of a bit of a confusing part so inside of this first this first part right here it has three arrows three potential places it could go and these are called actions so that's what these three actions are right here so which one of these actions do I want to use well let's take a look at our main fragment if I click the view transactions button where do I want to go I want to go to this fragment well what is that fragment let's take a look at the graph I want to go from main fragment to view transactions fragment so if I look here the ID for the action is main fragment to choose to view transactions fragment so this is the ID of the action so I want to reference that action so I copied that and I want to reference it right here so this it's it's defining what where you want to go through an action from the navigation graph and if that's confusing to you don't worry it's gonna make it'll just do it a couple times and it's gonna make sense to you you just look at this and look where we're going we're going from main fragments to choose recipient fragment from main fragment to view transactions fragment or front main fragment to view balance fragments and then those transactions are defined by these front IDs so that's all this is going to be so the second one is going to be send money button and the third one is going to be view balance button so this one is going to be action main fragment to the send money button main fragment to know all this all this ID isn't right from it should be from main fragment to Oates choose recipient that's why action main fragment to choose recipient and then this one is action main fragment to the view balance fragment and that's it that sets up the navigation for the first fragment pretty cool pretty simple and the cool thing about it is that the back stack is automatically kind of handled so you you know if you use the previous fragment version that can get really complicated and doesn't really work perfectly all the time when you have like a big application so this is still kind of a simple example but as we work on the rest of the fragments you'll see that it gets really really simple so at this point I'm gonna run it and let's just test and see if those first fragment transactions are working alright so here we have the map on the screen there's view transactions that's working back button takes me back send money that's working view but view balance so all of those transactions are working correctly now I'm gonna work on the rest of the transactions so inside the navigation graph I want to define what happens inside of this fragment because we need to navigate there so I need to set up what happens if they click the next button or the cancel button same with here what happens if they hit the send button or the cancel button and then in here it's just the back button so that's that's fine so need to go in to choose recipient fragment and specify amount fragment and attach some on click listeners alright so let's go into which one first I guess choose recipient fragment so choose recipient fragment and again I want to implement the on click listener interface go over here implement the members on click get that I'm gonna cut that put it at the bottom going to delete that comment we obviously don't need that and we're gonna do the same thing so create a VAR nav controller so now controller it can be null so I'm going to set it to no now I'm going to insert the on view created method on view created down here I want to instantiate the view controller under the nav controller just like we did before so navigation find nav controller referencing the view view find view by ID attaching an onclicklistener to the r dot ID dot Next button set onclicklistener again what's the wrong one that was a one that takes a function and copy that line with control D this one is going to be the cancel button so again that cancel button and get myself some more room here now inside of on click eventually when we get towards the end of this video we're gonna need to pass the name of the user through the bundle to the next fragment but for now I just want to work on whoops I just want to work on setting woops setting the on click listeners so going back to here and then later we'll come back and do all the bundle stuff but for now just strictly the onclick listener is what we're gonna work on so view is not null so get the ID then I want to do our dot ID dot next button is the first one and I'm gonna do some curly braces here because later we're gonna be adding some stuff but for now I'm just calling the nav controller it cannot be no and I want to call the navigate method and I'm just gonna reference the action so r dot ID dot action we're going from choose recipient fragment to specify a mount fragment very simple nothing too fancy there and then down below that the next case is going to be our ID dot cancel button and this is just I want to do activity so I'm referencing the activity through the fragment activity and the activity obviously can't be no I want to call on back pressed so just just strictly pressing the back button the last fragment for the on click listeners is the which one is it specify amount fragment so we're gonna be doing a lot of very similar things here I'm gonna get the on click listener interface again so comma get that I need the nav controller again so I'm just copying that bringing that over to pasting in that now if controller of course need the on click method and the on view created method again so I'm gonna paste those in Oh looks like I copied that didn't quite copy that right so all of you created method and the onclick method pasting those two in okay and then I just need to change actually these buttons are the same because it's gonna have a next button and also a cancel button too so that's fine except for this action needs to change so the action is going from specify amount fragment to confirmation fragment and again at the by the end of this video we're going to need to pass the amount and the name through the bundle to confirmation fragment but for now we're not worried about the bundle we're just getting kind of the basic navigation setup so I actually forgot one more thing before we test this this should be send button not the next button so we look at the nib actually yeah no not the navigation graph oh if we look at specify amount fragment the layout for specify amount fragment which is here and we look at the ID for the button it's oh no it's uh which one is it I'm getting confused we're inside specify amount fragment yeah so it should be the send button that's the ID so that's the correct ID now that should be pretty much the entire navigation for the app like the most generalized navigation we have on click listeners to those buttons we have on click listeners to those two buttons the the next and cancel button to send and cancel button so at this point if we run it we should be able to see the kind of the complete version of the app without the animations and also without passing things through the bundle okay so let's give it a try we'll go to send money I'll type a name in here doesn't matter remember nothing's being sent through the bundle yet I'll click Next now I can enter some amount again it doesn't matter and I'm gonna click send and it looks like that last transaction is not working so let's go in to specify a mount fragment and I'm attaching the on click listener I have the oh I forgot to change this one to the send button also so send button now that should be good to go and I should detect the click okay I send some money and her name next enter some money send there we go one dollar was sent to Mitch that's just some default text at show the view so now now that we have like kind of the bare-bones I should test the cancel button actually that works and that one works too okay so now that we have the bare-bones navigation kind of all set up now we can add animations and then also work on passing things through the bundle because remember the the name has to get passed from choose recipient fragment to specify a mount fragment then that name also has to get passed along with an amount of money to confirmation fragment so first we'll work on the animations and then we are going to come back and work on the bundle stuff so let's close all of this we actually don't need to have any fragment open we do the animations we need to add the animations and then we can add them to the navigation graph which is a really cool feature I think so let's add those animations unless I'm going to right-click on the res directory go to new directory I'm going to call this annum and then inside this annum folder is where I'm going to create that new animation resource file we're gonna have a fade-in animation and I'm gonna actually just cop I'm going to create all of these and then we're gonna go to github and we're going to copy all the code in so fade out will be the next one there's going to be a six total next one's gonna be slide into the right now I'm gonna copy that and paste it in the atom folder this is going to be slide slide in slide in left copy that paste it again in here this is going to be slide out right and then slide out left will be the last one slide out left all right so now that I have all those animation files created there's a whole bunch of them here I'm gonna go to our the github the code for the project I have the master branch selected I'm gonna go to main go-to resource go to the and folder and I'm gonna copy all of these in I'm actually just gonna do this off camera so I'm gonna pause the video I'm gonna do I'm gonna copy in all the code it's just straight up copy and pasting here so you're gonna want to pause the video here do the same thing and then come back and we'll continue alright now I have all those animations copied and you can see them up here I'm going to close them all you can see they're all in the animation folder if you open any of these they're exactly the same as you see in the master branch of the source code so just straight-up copy those in so now that we have those we can go into our graph and we can add the animations to the transitions or to the actions so each one of these has an action and each one of these actions has an ID and a destination so we can add some some animations to these actions so we'll start with the first one here which is from main fragment to choose recipient fragment so I'm going to come in here get some space and the first one is I need to do an app pop the pop enter animation and then I just enter or I reference the animation I want to do slide into the left and so now I need to do a bunch more for the different transitions the next one is pop exit animation and that's going to be slide out right so slide out right next is going to be the enter animation this is going to be slide in right and don't worry if this is confusing to you I'm going to explain it in just a second here and the last one is the exit animation which is slide out to the left so what what are these animations what's pop and what is the ones without pop because that's pretty much the two kind of sets here we have pop enter nm pop exit nm and then we have enter annum and exit atom and each one of these fragments inside of main fragment will all have the same animations so I'm going to copy that paste it in here copy that and paste it also in here so now what is the difference between the pop animations and the non pop animations the pop ones refer to what happens when you navigate backwards or in other words when you pop the back stack so for those of you who are already familiar with fragments you know that when you navigate backwards you call the method pop back stack to initiate that navigation so that's all these are basically the the ones without pop are for navigating without using the without popping the back stack so navigating forward basically and then the pop the back the pop ones are for navigating backwards when you're actually popping the back stack and I'm gonna show you an example so let's let's just run this first of all without me changing anything and let's take a look at these animations and see what they look like all right so I'm just gonna go to view transactions so notice I slide I was sliding in to the right and then if I navigate backwards I have to animate well actually there's two animations going both ways there's one for the transition for this fragment out of view and then there's a transition for the new fragment into view so that's what these which one is it that's what these two are are doing there's one on the fragment leaving the view and there's one on the fragment coming into the view so the same thing happens when you navigate back there's one going out of view and there's one coming into view so those two different animations are being called so let's get rid of one of them and see what happens so I'm gonna get going to get rid of the slide out to the right animation and we'll see how that affects things all right so view transactions so I expect nothing to change on the way in but then when I go out notice there was no slide there was no slide there was no slide in when this one was leaving so watch it it just disappears and then this one slides into view so it's missing an animation there's there's two animations happening on every transition and one of them is clearly missing right there the important thing is that it's happening when I'm navigating back because I removed that pop exit animation so when it's exiting nothing is happening it's just disappearing so the same thing would go happen if I remove the the enter to the left one so let's let's run that and take a look at the changes so again going into view should be fine but then going backwards there's nothing there's no animation for this coming into view and there's no animation for the other fragment going out of you so that's that's the difference between the pop ones and the ones without pop so I think now it should be pretty clear to you all right so now let's work on the other fragments so I'm gonna scroll down and we want to find anyone that has an action we're looking for all of the the fragments that have actions because those need to have animations added to them and looks like something's wrong with this action I think I accidentally deleted the destination off camera when I was messing around with this so I need to make sure to add this destination back to choose recipient fragment but yours should be fine I did this off-camera so choose recipient fragment to specify a mouth fragment alright so now let's add these animations so the first one is pop enter atom and that's going to be a slide into the left so always when you're entering your sliding in you kind of remember it that way now I want to do pop exit annum this is going to be a slide out right so entering is slide in exiting is slide out that's pretty much how it goes now enter annum is going to be a slide in to the right and the exit atom will be slide out to the left so that's going to be our animations for the action choose recipient fragment to specify a mount fragment next is the view balance one or it doesn't really matter actually there's no particular order you need to go in this one doesn't need one because there's no action there's no transition that's going to be the last fragment that we look at the next one here as we come down the line is specify a mount fragment and we do have an action here so let's go in here and write in those animations so pop enter Anam that's going to be a slide in to the left then we have the pop exit atom that's going to be a slide out to the right we have the enter atom we're sliding in from the sliding in from the right and then the exit atom that's gonna be a slide out left so again the same pattern enter is in exit is out and they're just basically opposites of one another view balance fragment does not have one wherever that is right here there's no action there's no action in view transaction fragment so we should be done we've gone through all the actions necessary every action now has an animation so let's let's run it now and take a look at all the animations just confirm that everything's working correctly alright so here we have the app on the screen few transactions that's good send some money next Oh looks like we got a crash there so something is not correct correct looks like the on click method illegal argument exception oh I might have changed when I just changed that the destination so that was in choose recipient fragment so I want to go down to choose recipient fragment which is here which is the yeah so it looks like I did something wrong here choose our shipping in fragment to specify a mount fragment I gave this I need to give I did this wrong I don't know what I was doing there I need to reference the fragment that it's going to not the ID of the action so ID and this is going to specify amount fragment there we go so pressing play and pressing okay I'm not sure what I did when I was testing to change that I think I just accidentally deleted it so anyway there we have the app running now let's go to send some money type a name in go to next there's that transition type in some amount doesn't matter send there's that transition now let's check the back and back looks good let's check the cancel button looks good view balance looks good so there are all of our animations for our app the next thing I want to talk about requires another demonstration I think to explain correctly so on the screen here I have one of my other courses which it's the dagger to course that I made it's available on my website if you just go to Cody Kony with Mitchell comm slash courses you can scroll down and there's the dagger 2.2 course it's free if you want to watch it just kind of a heads up of what I'm going to be referring to so when you whatever you build Android applications it's very common to have a login screen you know almost every app is gonna have some kind of login screen and when you log in you press login and you get directed to the inside of the application chances are though actually it's not chances are all the time you never want the user to be able to navigate back to the login screen by pressing the back button so notice what happened there when I closed the app the the application or sorry when I press the back button the application closed I didn't go back to the login screen because it doesn't make sense that you would go back to the login screen once you get access to the app there should be no way to navigate back to the login screen other than logging out or signing out so that's kind of the behavior that we want to see with navigation components so how can you achieve that behavior basically what you're trying to do here is you're trying to clear the back stack given certain certain circumstances so if a user logs in you want to clear the back stack because you don't want them to be able to navigate back to the login screen by pressing that back button so how can we handle this with navigation components is now the question well they actually have a number of conveniences they've already thought of this ahead of time obviously because it's it's an addition to the previous way of navigating so they're trying to solve all these kind of and I think it's really cool what they've done so I'm just gonna spend kind of a few minutes talking a little bit about it I the application that we're sorry I'm just fixing my mic here the application that we're building in this demo doesn't really fit all of the things that you can do with this but I'll talk about kind of one that we can definitely do so the first thing is the one they described in the first paragraph here when net basically it says when you navigate from a login screen you don't want the users to be able to press the back button and get back to that login screen and I have another app running here that I can give you a little bit of a demo this is from my dagger course my free dagger course on my website if you're curious you can go to go to coding viscom slash courses and go to dagger two points who want to Android that's what this this app is gonna be right here but anyway so say say you log in you click the log in button you get access to the application when you press the back button you want the app to close at that point you don't want them to be able to navigate to the backs to the login screen unless they log out and they real aughh in so that's kind of the thing that the navigation components documentation was talking about right here you want to essentially clear the back stack when you navigate in those scenarios so how can you do this how can I do this in my app well there's two attributes that we talked about that they talked about here pop up two and pop up two inclusive pop up to describe it's an attribute that describes what you want to happen when they press the back button and pop up to inclusive is a true or false boolean if it's true that means clear everything including the thing that you're navigating to so including the fragment that you're navigating to and in false is just leave it as it is obviously so what how do we how do we do this in our application but we don't have like an app we don't have a login screen or anything to demo but I want to show you something so that you can kind of see an example so in the main fragment suppose we were going from choose recipient or we're going from main fragment to choose recipient fragment and I wanted to do pop up too and I'm popping up to main fragment this is going to seem weird and I wanted to pop up to inclusive set equal to true so what I'm what I'm pretending here is that main fragment is the login screen and when I navigate to the next fragment which is choose recipient fragment I want to clear the back stack so that when I press the back button the app closes and I don't get to navigate back to me in fragment so let's run this and I just want to show you obviously keep in mind you know this isn't real there's no login screen here so it's just a demo so I have pop-up to main fragment which is the fragment that I'm navigating from and pop-up to inclusive set to true so that takes me to send recipient or choose recipient fragment like it did before but now if I press the back button the app closes so that's what you would want to happen if main fragment was a login screen so that's those are the two things that you would want to do in the case of a login screen now of course that's kind of only one of the scenarios that you can have the other scenario that they described here in the documentation is what happens if you have circular navigation so if you're going from fragment a to fragment B to fragment C and you can navigate from C to a so the destination in C could go to a or if you press the back button you want to get navigated back to B and the example here is actually pretty cool no they they paint a picture and they say what if you navigate from ABC ABC a and so on so that would that would have repetition and to avoid repetition you can specify pop-up - and pop-up - inclusive so you specify kind of the behavior that you want so I encourage you to take a look at the docks here and just to kind of read through this example and really think about what they're saying here obviously it doesn't fit really within the video that we're doing in this course but I wanted to make sure I showed you are starting this video I want to make sure I showed you the login screen thing because that's probably the most common scenario that you'll run into you know pretty much every app has a login screen so if you're logging in you want to pop up to the login screen that you have and then pop up to inclusive so that when you log in you press the back button the app goes to the background the next thing that we're gonna work on is sending data through the bundle so if we look at our app again whoops that was the wrong one if we look at our app again in if you go to send money remember here we need to enter a name - somebody who is gonna receive some money then when I click Next I'm taken to the next fragment where we would enter some value of money to send them and then finally in the last fragment it'll say the amount that they got sent and then the username so that username needs to get carried or the the name you needs to get carried all the way from this fragment to this fragment and then to the end and the money gets carried from this fragment to the end so a couple a couple of things that we need to do here and the first step is I want to build actually a helper class because when you're sending money when you're dealing with money you need to have the best thing the best way the best data structure to store it is using a big decimal so I'm gonna create a new class for handling the money that we send through the bundle so I'm going to create a new Java class this is just gonna be called money whoops I forgot that we're doing Kotlin we're not doing Java so I'm going to delete this and I'm gonna create a new Kotlin class so right-click go to new collin file this is gonna be called money and this is going to be a data class for holding a big decimal value because by default big decimal values cannot get sent through the bundle we are going to need to create a helper class that's why I'm creating this money class and I'm gonna put a big decimal value into it and then we're going to implement the parsable empty parcel class so that the money class can be get sent through the bundle so I'm doing at parcel eyes and now I'm gonna create that class so data class this is gonna be called money it's going to take one value for the amount it's gonna be a big decimal value and then it's going to be parcel also : parcel Apple and that's all I need to do this is a warning I don't think this actually does anything I remember I read up on this before it's I think it's fine like having this warning is fine it doesn't do anything I can't remember exactly why it's fine and why it shows but it's fine but you could google it like google parcel implementation colin on a data class and you know google this air and i'm pretty sure it shows up as nothing so check that out but we're going to leave this to the way it is so now that we have this money class we can go to our navigation graph and we can define the arguments that we're going to be sending to the various fragments actually sending wasn't a really good way to put it because when you define the arguments in the navigation graph actually what you're doing is you're specifying the you want to specify it in the fragment on the receiving end so the receiving end being specified amount fragment and also that'll be confirmation fragment those are the two ones that are receiving data through the bundle because this is a select recipient fragment nothing is being received here it's being sent to select or specify amount fragment and that's being sent to confirmation fragment so when you're working with the navigation graph and you're sending things through the bundle just remember you always want to define arguments on the receiving end so specify amount fragment is the one that the first one that'll be receiving an argument so I want to create an argument and give it a name this name can be recipient recipient and I can give it a default value and I'm just gonna give it a default value of none so you can search these argument default values the default value types and you can also use safe arguments like I described at the beginning of this video so you can define the type of argument but we're not using safe arguments in this video but you can check them out in the documentation you know let's see here if you just browse here look for safe safe args you can search that and there's somewhere in here I don't want to look for them but we we looked at them at the beginning of the video next is confirmation fragment so this is the other one that's going to be receiving some arguments so I'm going to change this tag so that I can put some things inside here so the first argument that it's going to be this that's going to be receiving is again that recipient I'm gonna give it a default value of none again so exactly the same and then the second argument that it's going to be receiving is that money so that money amount that's coming from the choose amount fragment so it'll be called a mount and the Arg type is going to be comm coding with Mitch dot navigation components example so I'm just referencing the package and I'm referencing that money class that I just created so that's just this right here you could just copy this the package to make sure that you don't make a mistake and paste that in here and that'll that'll reference that money class because that's what we're going to be passing through the bundle because we've made it parcel now okay so next let's go in to choose recipient fragment and let's get why is this giving me an error the next button says I don't think that should give me an error I'm just gonna rebuild quickly cuz that is definitely a button idea I'm not sure what's going on there there we go after a rebuild that arrow one away okay so now we need to we need to get the recipient and from the text view that's inside of the layout and we need to send this through a bundle so I'm going to come in to my nav controller here and I'm going to write an if statement first of all so if text utils dot is empty I'm checking to make sure that the the input is actually not empty so input recipient dot text to string if that is not empty then I know that we actually have a recipient in there and we can use it so in that case I'm going to create a bundle so value bundle equals bundle of this is a handy Kotlin thing bundle of I need to give it a name which is recipient that's the name that we gave it in the navigation graph remember we gave that recipient argument name right there and now I can reference that value so recipient to input recipient text to string so I'm adding that that's a very simple way to add things to a bundle now I just need to add this to the navigate action so the first parameter here is the the place that it's navigating to and then the second parameter can be that bundle that I just created right here and of course I need to cut that and put it inside of our if statement so if the if the recipient is not empty then it will attach that recipient to the bundle and send it into our fragment so now let's take a look at the next fragment so the next one is specify amount fragment and there's a couple things going on here number one is we need to retrieve that recipient from the bundle so I'm gonna say recipient string it can be null equals no but actually instead of setting these null I could actually just set them as late and knit variables and get rid of this null value here that's well that basically what that means is I can initial I'm going to initialize these right away so I don't have to set them to nullable and set them to null as a global so right away you know in the on view created this is going to be initialized so it's going to be late initialized and the recipient is going to be the same thing because right away I'm going to import the oncreate method so ctrl o and I'm looking for on create and inside of on create I'm gonna get that recipient value so recipient equals arguments can't be no get string and I want to reference that recipient string that we're sending through the bundle this null check we should be able to ignore because if we look at our code here there's no way that this is going to get passed if there's an empty string so here no matter what we're not worried about it being null now we're going to come down into on view created and do a little bit of a little bit of setup here so if we take a look at the layout if we take a look at to specify a mount fragment or the the layout for specifying mount fragment at the top here I want to display a message that says sending money to whoever that they chose from the previous fragment so that's we're going to do an on view created first of all here so I want to do value message equals sending money to the recipient that's going to be the message then I can just reference the viewfinder you buy ID it's going to be a textview and this is our ID dot recipient and i want to set that text to the message that I just wrote so value message that's going to display that text above the button and above the amount where you enter in the amount now inside of the send button we want to make this very similar to what we did in the previous fragment so I want to do if not empty so text utils dot is empty input amount if the input amount to string is not empty then we know that we actually have an amount that we can send so value amount equals a money object it's going to take in a big decimal value so a big decimal input amount text dot to string so there's going to be our amount the next thing is going to be the bundle so Value Bundle equals bundle of so same thing we did before but now we have two values to put in our bundles so this is another really cool Kotlin thing I can do recipient to recipient and then amount to amount and so that'll bundle both of those things together and now I can take my nav controller and I can write the idea of the fragment that I'm navigating to just like before but we want to pass that bundle as a second parameter so that should be good otherwise I could actually do an else statement here just letting them know so I could do toast make text reference the activity context and do enter an amount just letting them know that they actually need to enter something otherwise they won't be able to go to the next screen so let's just do length short and then show that I can actually add this to the previous fragment too so if I go to choose recipient fragment right here I can add that same else statement except for I can say enter you know someone just sent a recipient recipient so there we go okay so now now that will send the amount to the final fragment so now let's work on that final fragment which is confirmation fragment so we need to receive all of that information in confirmation fragment so we have two parameters that we're receiving at the top here again we can do late and knit will have recipient it's going to be a string value and late in it this is gonna be money it's gonna be a money value and I need to control oh and insert on create again so on create there it is right there and then we can get those two values so recipient equals arguments not null get string recipient and the next one will be money equals arguments not null get parse syllable not possible array just get parcel able and that's going to be that amount and those would be our two values the last thing is just setting those in on view created so ctrl o on view created put in there I'm gonna give myself a little more room here and in honor you created I can get value amount equals money not no amount value confirmation message equals you have sent an amount so dollar sign amount to the recipient and then view fine view by ID that's going to be a text view for displaying that import that r dot ID dot confirmation message text equals confirmation message and that should do it so that should be our complete application just to kind of review what happened there remember if you're sending things through the bundle you want to declare an argument in the navigation graph on the receiving fragment so the only two fragments that are receiving data our confirmation fragment which is what we just looked at right there and specify ammount fragment which was this one right here choose recipient fragment is sending data but it's not receiving anything so we don't need to declare an argument there so inside choose recipient fragment we're just checking to see if that textview is null then we attach it to the bundle and send it using the navigate method right here as the second property is that the second parameter is input then in specify a mount fragment were inserting the oncreate method getting that recipient it's declaring a message to display that recipient above the above the textview I'll actually run this so we can look at it kind of as we're running through this and then the next thing is just a repetition of what we already did we're creating that money object by inputting a big decimal value bundling everything together and then sending it to the final fragment where it's being displayed using on view created through a message so now let's take a look let's send some money let's give them a name of Mitch go to next sending money to Mitch remember that's where we're we're setting that message right here sending money to the recipient which is being displayed now I'm going to add an amount here just say 56 go to send you have sent 56 to Mitch there should be a dollar sign there but that's about it you have sent dollar sign I think that would be fine too Mitch let's run that and just take a I'm not sure if that's gonna cause a problem having them next to each other not sure of that notations okay I'm still getting used to Colin but it's slowly kind of coming together for me so next and 55 sending $55 to Mitch so there you have it people there you have a navigation components example of course this is a pretty simple example but I showcased a lot of very common things that you need to see you know from navigating to a bunch of different fragments to creating a navigation graph sending things through the bundle handling the back stack the different animations popping regular animations what happens if you use pop up too and pop up inclusive so that's shown in the documentation somewhere I don't I lost it but anyway it's there we looked at it pop up too and pop up to inclusive being true or false how to handle a login screen so if you have an app where you don't want people to be able navigate back we covered a lot of stuff so again simple example but hopefully you found this helpful and let me know below if you want to see me use navigation components in more of my stuff I think I'm thinking about adding it to everything since I'm going to be using Kotlin moving forward now to going to be using probably navigation for any kind of fragment navigation stuff that I'll be doing so I hope you liked the video hope you found it helpful and I'll see you in the next one you

Channel: CodingWithMitch

Views: 131,480

Rating: 4.9406137 out of 5

Keywords: jetpack, navigation component android, navigation component, navigation component android tutorial, navigation architecture component android, navigation architecture component android tutorial, android navigation architecture component tutorial, jetpack navigation, jetpack navigation tutorial, jetpack navigation android, jetpack navigation google io 2019, android jetpack navigation tutorial, android jetpack navigation component, navigation graph android studio

Id: IEO2X5OU3MY

Length: 61min 54sec (3714 seconds)

Published: Mon Jul 08 2019