Navigation Component in Android Studio using Kotlin | Android Knowledge

foreign welcome back to my channel in this video we will learn about navigation component Library I'll be using navigation in one of my upcoming project hence I wanted to cover it and also it is one of the most important topic when you will deal with jetpack compose it's super duper easy to understand but there are few terms that you need to remember in navigation component okay all right let's understand what is navigation first don't see the technical definition of it just simply answer the meaning of navigation word I'll say to ship from one place to another place basically you can say to navigate from one screen to another screen sounds simple right let's see the technical definition of it it says that navigation component is a library that can manage navigation flow that's what we saw in the above definition right basically it navigates from one screen to another screen and that is nothing but navigation flow got it then it can also manage transition animation look you know how PPT works right they'll move from one slide to another slide and sometimes to make PPT more creative we put transition between the slides right similarly to navigate from one screen to another screen in the app you can add a transition between them cool right then deep link deep link is a link that takes you directly to a specific screen within your app and lastly obviously while navigating from one screen to another screen you may have to pass some data that is also possible with the help of navigation so I guess you got an idea what exactly navigation does right so all of these things are managed using destination actions visual editor and components these are all technical terms in simple language destination is the target screen on which we are supposed to land on then action is basically from which screen to which screen next visual editor is like you know how we have XML editor where we can drag and drop UI component similarly there is a visual editor which we will help us to manage navigation flow and then we have three components navigation graph navigation host and navigation controller which we will cover in the upcoming slides okay so I guess we are pretty much clear about it now if you are aware with Android beginner concept then you might be wondering same things like navigating from one screen to another screen or passing the data that can also be done by using intent then why is there a need of navigation well let me clear that first of all both of them are completely different from each other I'll give you three major points to differentiate first an intent we usually write the target activity class name right but in navigation we Define a path and a destination that makes the code more organized then second the important point that is intent are usually used for navigating between activities while navigation is used for navigating between fragments if you remember navigation drawer or bottom navigation code there we used to have a block of a code that represent replace fragment code which consists of fragment manager fragment transaction right but now in advance and latest project we use navigation then third point it says in intent we have to manually manage the back stack means what are we supposed to do when back button is pressed while in navigation it automatically handles it clear right moving on to the next slide as I said all this navigation flow is handled by these three components that is navigation graph navigation host and navigation controller let's understand it one by one first is nav graph I'll tell like how we have separate menu directory in resource folder similarly we will have a separate directory for navigation which will consist of name graph navcraft and slacker visual edited where we will have destination screens basically all the fragments present inside it this is where we assign paths and navigate from one screen to another screen but all of this is Possible only when we will have an host as an activity layout means activity XML layout that could be activity main.xml which will act as a nav host under which all the fragments will be managed so nav host is basically a container that we are supposed to add in the activity layout and that container is nothing but fragment container view itself you will understand it better when we will implementing sample project now we have Dev graph that is hosted by nav host and nav host that is controlled by a third component that is nav controller which is present in your main activity it programmatically control and navigates programmatically answered through logic this is all theoretically but everything will be cleared once we will create the example project so let me give you a quick overview so there will be three fragments handled by one activity first fragment will be a welcome screen that has two buttons in it login and sign up button when you will click on login button then it will navigate you from welcome screen to login screen and when you click on sign up button then it will navigate you from welcome screen to sign up screen and that's what navigation is I know it's very simple but very important as well there are more Concepts in it like transition deep linking passing the data which I'll cover in upcoming videos maybe in Jetpack compose series but for now let's understand how these three components will contribute see navcraft will consist of all the three fragments with their respective part then all these fragments will be handled by one activity in our project activity main.xml will act as a nav host and Main activity will act as a nav controller so let's create it open Android Studio choose MD views activity name it as learn navigation and then let's do the prerequisite first go to colors.xml add red color with hex code AS ff3131 and 10. then go to themes.xml and this three lines color primary color primary variant an Android status bar color and then as it's a login screen we will require fancy edit text so let me quickly create it and done then just to make app look more presentable I'll add background variables and done please skip this step then as it's a library so we need to add dependency so go to Gradle app here add a plugin then below it add both the dependency and also don't forget to add view binding as well and also as navigation is a New Concept so it requires compile SD can study for or greater okay do not click on sync now yet then go to Gradle build project here add the entire build script also build script should always be at top and plugin should be below it now you can click on sync now and done you can find all the dependency in the description box next as I said we will have one activity that is a default activity main activity and three fragments welcome fragment login fragment and Signal fragment so let me quickly create them and done I'll quickly clear all the unnecessary codes from each fragment activity [Music] and then now close all the tabs then let's design all the fragments XML first go to fragment welcome here we will create two buttons so let me quickly create it and done see linear layout as parent layout then inside it a linear layout and then inside it to button first is to go to login button and second is to go to sanctum button and that's it next go to fragment sign up here we will create two edit text and one button so let me quickly create it and done see two linear layout and inside it a edit text whose ID is sign up username then another edit text whose ID is sign in a password and then a button whose ID is sign up button and that's it next go to fragment login here we will copy paste the sign up code and done now change the IDS as login username login password login button and also change the other required details and done so all the fragments are ready and now it's time for navigation components our first navigation component is navcraft so let's create it right click on resource folder create a new directory keep the resource type as navigation and done then inside it create a new navigation resource file name it as nav graph and click ok this is our visual editor remember I said there will be a visual editor where we will add all the fragments with the respective path this is where it is but I also said that everything is handled by host so as you can see over here it says no host found hence first let's assign The Host so go to activity main.xml here we are assign host and in main activity we assign controller but how do we assign nav host to activity made remember I said nav host is a container in palette section we have something called as container click on it then keep scrolling till you find nav host fragment here it is also an easy way to find it simply search it first remove the default x view now drag and drop new host fragment in the middle of activity Main perfect choose name graph which we created before end it then constraint it from each side and that's it our host is ready how simple was that let's see how it looks in the code look their host fragment is nothing but fragment container view itself I'll rename the ID as new host fragment container View keep the name as it is and default layer host as true also it automatically assigns our name graph and that's it now our nail host is ready so let's quickly set up name craft as well also remember this first create new graph file then set up nav host and then go back to name graph and set it up what I mean by that is you need name graph file to set up nav host and name host to set up nav graph getting it come back to navcraft here we will create destination status fragment itself so click on plus sync first choose welcome fragment then next choose login fragment and then next your sign up fragment you can rearrange it as you want also as if the launcher fragment so assign it as start destination once all the fragments or destinations are created then let's give them a path or actions so can you see a spot here start an arrow from welcome fragment to login fragment and see there is a path similarly we will create another path that will go from welcome fragment to singular fragment and that's it see so easy right let's see the code this looks kinda complicated right hence design is preferable but still you should be aware with all these terms look the start destination is welcome fragment okay and inside navigation we have our three fragments that is login fragment sign of fragment and welcome fragment also as you can see login and sign up does not have action present in it while welcome fragment has two actions in it because both the path comes from welcome fragment hence it has two action present in it like first action is from welcome fragment to login fragment that is basically our ID and destination obviously as login fragment similarly second action is from welcome fragment to sangna fragment and destination is sagno fragment and that's it so our name graph is ready as well as nav host is also ready and now it's time to set up Nev controller hence go to main activity here we will set up our name controller first declare it and then create an override function called as on support navigate up here initialize nav controller and find nav controller and inside it mention the fragment container view which we created before in activity Main then return it as nav controller dot navigate up or super dot on support Navigator let me explain it see this line is responsible for determining whether the navigation action should be handled by the nav controller or by the parent class if navigate up returns true then navigation flow will work and is defined but in case it returns false means due to certain reason it fails to navigate from one screen to another screen then in that case it falls back to the default Behavior provided by the parent class got it now once all the three components is successfully set up you can use it in your fragment like I'll show you go to welcome fragment this is where we have two buttons right login and Signal button where each one will redirect to their respective element so to do that first we need to set a binding and this is how we set up binding in fragment then we will write the code between The Binding code here first write binding dot go to login button dot set on click listener then when the user will click on login button it will navigate to login screen correct so to do that first let me write the code and then I'll explain and then now see it refers to the view that was click in our case that is go to login View then find nav controller is a function provided by navigation component it allows you to find the navigation controller associated with the current view or fragment our nav controller is present in main activity right so using find nav controller it will navigate from one screen to another screen like from welcome fragment to login fragment click on it and see it leads us to navgraph this is where the idea similarly we will write the code for go to sign up button as well it is the view that find name controller and then navigated from welcome fragment to sign up fragment and that's it we are done with the coding now let's run the app see our first clearance welcome fragment then I click on login button and here it is login screen then I'll click on sign up button and here it is synced up screen I know the project is very basic but all I wanted to show you is that how navigation component works okay also for more updates you can follow us on Instagram or join a telegram group Link in the description box so yeah and that is it for the video if you are new to this channel then please consider subscribing to my channel and I'll see you in the next video [Music] foreign

Channel: Android Knowledge

Views: 3,226

Keywords: navigation, architecture component, component, nav controller, android, navcontroller, navhostfragment, android studio, fragment, transition animation, nav graph, fragments, destionation, fragment transation, action, global action, destionations, connect, animate, safe args, controller, nested graph, editor, navhost, integer, transfer, nav host, nav, data, send, guide, handle, studio, between, arg, safe, args, with, graph, value, array, gradle, string, bundle, how to, jetpack, xml, pass, host, plugin, tutorial., login, ui

Id: yWWuOqFRwfg

Length: 21min 18sec (1278 seconds)

Published: Wed Oct 04 2023