Navigation Component with Jetpack Compose

in this video i'm going to show you how to use navigation component using jetpack compose and you know big spoiler alert it's exactly the same but i think this is another reason why compose is so great it just makes it really speaks to the interop ability all of these kind of pre-existing components or pre-existing tools you can still use with compose and it's very easily easy to integrate compose while you still use these components whether it's navigation components you know hild for dependency injection view models fragments you know you name it name your android thing and compose is built to really work well with that android thing and i'll show you you know how easy it is to set up navigation component again spoiler alert it's you know exactly the same all right so step one is always get the dependencies so go to this link here developer.android.com guide navigation navigation getting started or you can just google you know navigation component android and google and it's probably going to be the first link that comes up here so here we are the getting started guide now i'm not going to go through this obviously this is not a navigation component kind of tutorial although i am going to show you how to set it up so all we need to do here is get the the the version so this is the nav version 2.3.2 go back to android studio and let's go into the build.gradle file and close this so i can actually see what's going on i i cranked up the font size for you guys so you can really see this really easily so paste in that nav version now go back to the documentation we're using kotlin so i'm just getting these two kotlin dependencies right here the fragment ktx and the ui ktx so copying both of those i don't need the kotlin comments just those two are fine now press sync and we'll be ready to use navigation component so currently we have a single fragment so if we go into our project view over here i'll close build.gradle because we don't need that we currently only have you know recipe the list fragment but we we need another fragment the finished version of the app has two fragments which one is recipe list fragment and one is recipe fragment so let's create that second fragment so go up to a new colon file and call this recipe fragment now this will be a class of course it's going to extend the android x fragment class just open this up and i'm not going to do i'm not going to put anything in here right now it's just going to be sort of a blank well i guess i could i could import the oncreateview function so let's just go over to i'll close this to give us some more room first of all come over here just grab this on oncreateviewfunction copy it go back to recipefragment paste it in and let's just inflate like i like kind of a basic sort of composable here let's just say return you know compose compose view we'll do require context do i think you do apply and then set content is what we need and i'll just do a you know title up here that says uh recipe fragment and uh this is giving me a deprecated warning i believe because the import changed oops so if i get rid of this and i re-import this it should give me some choices i want to get the compose ui text import i think that one's good so it's from material that's right the old import was from foundation the new one is from material so getting that text import now we have a nice sort of title hey why not give it a column and give it a give it a modifier also just to kind of make it look a little better even though i know this is just kind of a placeholder for now but let's let's just add a little bit of padding anyway and then just throw that title inside of here so now we have our second fragment and we have our first fragment which was recipe list fragment i'm actually going to well i'll leave them open actually now let's create the navigation graph so if you've used navigation component before which probably most of you have you know that it's all about this kind of navigation graph thing whenever you have your fragments you can then move on to building this graph and the graph outlines sort of what the navigation is going to look like between your application or in your application so right click on res go to new android resource file and i'm just going to call this i'm going to call this main graph and make sure to change the resource type to navigation otherwise it's just going to generate a plain old xml file so click ok and i'm going to close this view to give us some more room and you know there's very few things in android studio that i like to use the design tab for but navigation component is one of them this is one of the very few kind of tools that i like to use this design tab for otherwise i think it's just too slow for other things so let's go up here click on this plus icon it says add new destination we're going to add our recipe list fragment boom there we go it's now added to our navigation graph now add our second fragment which is recipe fragment and i'm going to click on recipe list fragment click on this little dot and drag it over to recipe fragment so what that's going to do is if we go over to our code tab here you can see that two fragments have been added here's the first one for recipe list and here's the second for the recipe fragment because i connected the two with that that uh that line it generated this action sort of attribute inside of this fragment so this is a this is a destination sort of i guess action this this defines an action that can be taken on the graph or a navigation like me navigating from one fragment to another and this is defined as navigating from recipe list fragment since it's inside this fragment tag and i'm going to the destination which is recipe fragment now i'm going to change one thing in here i'm going to change the id of this i'm going to change this to view recipe by default it generates these kind of long very descriptive names these are fine there's nothing wrong with them i just you know in a small project like this there's no need to be so descriptive it's pretty obvious what is navigating to what so i'm just going to call this view recipe because that's what it is we're navigating from like a list fragment to like a detail fragment where i'm going to be viewing a specific recipe so this is our navigation graph now we need to tie this navigation graph into the rest of the application now the easiest way to do this is if we go into activity main so go into resource again go into activity main and we use a special container for our graph and we we kind of tie our graph into our main activity and set it up that way by the way if there's ever any point in this video when you think that man it would be nice to you know have some more information on navigation component i made lots of videos on navigation component all of my newest courses basically from i don't know mid last year mid 2019 up until now contain navigation component as the main navigation system but if you don't want to pay for a course or you just don't want to watch a whole course i have a video i'll put a link up here to i made a video that says kind of navigation components all in one video the video is like an hour long i think it's quite long 40 minutes to an hour long but it shows you you know everything you need to know about navigation component so if you want to know more about it and you know maybe you have some questions about the things that i'm going through here i'm going through pretty quickly go watch that video and it will definitely clear up any kind of questions that you have so here in activity main we're still going to use our fragment container view but we're going to set this up a little differently first i'm going to give myself some more room to give you guys a better view i'm going to change this to main nav host fragment this is kind of the typical naming convention that you give to a net up a view or a container for a navigation kind of host this is what this thing is going to be called the navigation host and that's why the next attribute is going to be this name parameter and we're going to reference a special class that's contained in the navigation component library we're going to call it androidx [Music] dot navigation.fragment.net host fragment this is a special clast it's it's called nav host fragments and it's for hosting uh navigation graphs navigation systems but we do need to set some other attributes the first one being default nav host so looks like it's not coming up so i'm going to have to write that out so i'll do app default nav host and set that equal to true and then the last parameter here is going to be app nav graph and set that equal to at whoops at navigation and set that equals to the main graph also by the way if you want more information on how to set up navigation component all this information is in the documentation so if you went to that like getting started guide that i was at at the beginning of this video it takes you through everything you need to know here you know one of these first things is probably yeah boom there you go there's the fragment container view where it tells you to set the nav host fragment as the name uh you know nav default nav host true and then reference your graph so same kind of stuff it's all in the documentation so at this point our navigation graph is all set up so we have our graph here it says the start destination is recipe list fragment it says we have one action that's available that's navigating from recipe list fragment to recipe fragment and we have our two fragments so we can actually go into main activity and we can delete this this support fragment manager begin transaction stuff because we just don't need this anymore we have our graph set up and it just by you know in main activity by setting this fragment container view and the nav host fragment setting it to the graph it knows how to navigate the app so at this point let's just run it and i want to show you that it's working and the fragment the recipe list fragment does actually come into view so there's the app starting and we see that recipe list fragment it has come into view so now let's go back to android studio and i can delete this horizontal dotted progress we're not going to need that anymore let me just delete that delete anyway even though it's not safe we can also delete this fragment recipe list xml i'll delete that we're not going to use that anymore and delete anyway don't care now close the graph close main activity close activity main and now let's change recipe list fragment to inflate a different kind of composable and also be able to handle the navigation to that recipe fragment so let's uh let's build this out so let's return a composable so return compose view and we just do require context dot apply then set content and then there we go we're ready to kind of build out a composable so let's use a column with a modifier and we want to add some padding to this modifier 16dp is typically kind of the default android standard for padding of the main sort of content section now do a text say text equals recipe list because that's what this is it's recipe list fragment now move all this to the next line to kind of clean it up and now let's add some kind of styling just a little bit of styling because i want to change the text size so text style is the the object that gets passed to the style attribute and it has a whole bunch of different parameters one of them is the font size and you know from a couple of videos ago how to change the talk uh the font size we can do text unit dot companion dot and then reference what sp value we're changing that text size to so that's kind of like the header just so we know like which fragment we're in now i'm going to use a spacer and do modifier equals modifier.padding and just do 10 dp of padding just to kind of space that out from the next composable that we're going to put here and now i'm going to use a button and this button is going to take us to or it's going to be responsible for executing the function that takes us to the next fragment so first i'll add a text composable in here that says you know to recipe fragment to describe what this button is going to do so putting some text inside the button and now inside the on click function for this button i want to do find navigation controller dot navigate and then reference the action for navigating from recipe list fragment to recipe fragment well you know the idea of that it's just r.id.viewrecipe if you need a reminder of where that comes from if you go into the main graph again remember we just have this single action right here that's defined and this action defines the navigation to this destination which is a recipe fragment and the idea of this is view recipe so that's what i'm calling right here i'm saying find my navigation controller which can be done uh very easily by calling find navigationcontroller then calling.navigate and referencing that action so that'll take us to that next fragment now we're going to do one last thing i'm going to go into we'll first actually copy let's copy this text at this text composable and go into recipe fragments and just paste over this text composable and just call this a recipe let's do it all capital so it's like really clear that this is a different fragment i'll just do all capitals recipe fragments and use a text size of 21 sp also so now let's run this and let's see if the navigation is working so there we have a recipe list fragment coming into view you can see our heading up here and we have that button that says two recipe fragment so i click this button boom there we go it takes us to recipe fragment and all the back navigation automatically kind of works if i click the back button it takes me back you know i can go there so our navigation is working correctly so that's it very simple you can see how easy it is to use navigation component with jetpack compose you pretty much change nothing as long as you uh you know use a single activity architecture and you are using multiple fragments then it's no problem as long as you're you know inflating composables like i do in fragments then it's no problem all right that's gonna be it for the video if this is the first video the first compose video that you're watching of mine this is actually part of a whole course i'm building a recipe application that accesses real network data from an api that i built and if you want to watch the rest of the course i'll put a link up here to hopefully the playlist or the link on my website it's going to be a free course so watching it on my website is the best place to do it because it tracks your progress all the videos are gonna be in order if jetpack compose changes i can update the videos so watching on my website is gonna be the best actually currently right now as i'm filming it's not on my website yet but probably by the time you watch this it will be on my website so go to codingwithmitch.com register an account it's completely free the course is completely free and before you go also one more thing go down there go down to the comments section on this youtube video and leave me some kind of engagement go there and write something funny think of some kind of play on words with engagement like hey mitch this video was engaging all capitals or you know something you know get creative i've seen a lot of people get very creative with this uh sort of engagement thing that i've been asking people to do down below in the comments so uh leave a like of course if you liked the video gotta tell youtube that you liked the video uh thanks for watching as always and i will see you in that next compose video which i'm sure you can't wait for

Channel: CodingWithMitch

Views: 16,337

Rating: 4.9080458 out of 5

Keywords: jetpack compose android, android jetpack compose, jetpack compose navigation component, navigation component jetpack compose, android navigation component with jetpack compose, how to use navigation component with jetpack compose, how to use navigation component with compose, does navigation component work with compose?, does navigation component work with jetpack compose?

Id: 4ljGUQTxVJQ

Length: 14min 51sec (891 seconds)

Published: Tue Dec 08 2020