Video: 1 – Android Jetpack Navigation with Kotlin
hi everyone this is Martin Baraya and today we will be learning about Android jetpack navigation so first of all what's the jetpack navigation the jetpack navigation used for navigating around the app like moving from one screen to another and it is fundamental part of Android development and it is used to do something more complex than clicking a button like bottom navigation so to understand more how the jetpack navigation work there is a three major part of navigation component working together the navigation graph, nav host fragment and nav controller so let's get started to building Android jetpack navigation in Android studio and depend on the Android documentation note if you want to use navigation with Android studio you must use Android studio Version three point III or higher okay let's start from scratch so we're going to start a new project with empty activity we're gonna name it jetpack or whatever you want you can choose the location for it actually I have empty folder named jetpack on the desktop and we can start with Kotlin then we can choose the minimum API level after done just hit finish and the gradle should take some time to build gradle build finished so first of all we need a fragment I can choose fragment fragment with the view model we can name it main fragments with Kotlin well just hit finish so after that we need two more fragments so we gonna choose fragment blank we gonna name it first fragment make sure to uncheck this two boxes just hit finish and we gonna do the same thing for the second fragment blank, second fragment finish actually we can work with main fragment main activity and first fragment and second fragment but we don't gonna use the main view model okay now let's working with the gradle dependency so in the dependency we gonna add this two lines of code with the nav version then we gonna choose sync now okay then we're going to choose the griddle top level and inside the allprojects so we gonna add this line of code android support version to support version 28 just choose sync now so now we gonna create the navigation graph just close this windows.
. ok so inside the resource and layout, inside the main activity XML file we gonna working with the graph, now first of all we gonna delete the text view because we don't need it, and we gonna add the drawer layouts this one we gonna choose match parent, and we can add the ID for it, we gonna name it container okay now we can add tage fragment inside drawer layout just hit alt enter, so we add the ID and we add the Android name because this is nav host fragment for hosting the fragment and we can do the width and high with zero dp and this position for constraint layout so that's it for this one right now then we will create nav graph navigation inside the resource folder so we can choose, new Android resource file make sure to choose the resource type navigation and we gonna name it, nav_graph, press ok and then let's go to their design part from this tape we can choose the main fragment like this one then we gonna return back to the main activity inside the fragment we can add this two line of code for the default nav host = true and the nav graph, this is the path this is the nav graph we made it inside the navigation and nav graph, okay and now we need to switch to the main activity and in main activity we need a drawer layout so we're gonna create a variable for drawer layout after that on the Oncreate method we need a variable for find fragment by ID so we gonna make it val with name host equal equal to support fragment manager find a fragment by id and this is the id name and casting for nav host fragment can accept the null then we will create nav controller from the host, nav controller from the host that that controlling the navigation bar and the drawerlayout we need to connect it with the ID this drawerlayout connected with this ID container this one now we will link nav controller with the drawer by using navigation UI with action bar, setup action bar navigation controller this refer to the activity and nav controller for this variable and drawer for this variable after that we gonna create overwrite methods by pressing ctrl o name it on support navigation up this one and we choose this method that referred to what happen if the user press the back button then change the return value to be navigation UI navigation up, drawer, this drawer and handle the ID for the activity for the main fragment okay now let's switch to the nav graph navigation and we gonna add two more fragments first fragment and second this first fragment the second fragment so we can just made the graphic on nav graph and we can connect by using this nice action, the great think about this we can connect it from one a fragment to another by using this ID this action ID by using this action ID we can connect it from one fragment to another okay now let's switch to the design part inside the main fragment just add two button this.
. two button and this two button use to connect between two fragments so now let's switch to the main fragment inside the main fragment we gonna overwrite the other method called onView create methods and this method used to connect between fragments and then we can use set onclicklistener to connect button with the fragment like this we just use fund view by ID with the ID of the button and the navigation with the action ID for the navigation here, this one on the side and we can do same thing for the second button we just need to change this to button2, and this action to be action main fragment to second fragment that's it actually we're almost done just the last think we gonna go through the nav graph and we gonna change the label for the main fragment to be home or anything you want and the first fragment, second fragment I'm gonna change the text first fragment we can change the text to anything you want, we can make it like first and second fragment we gonna change the text to be second and that's it plus I can add some design to the first and second fragment for the first fragment we can add same design for it it to be like this and for second fragment too – I just add the text size with the the text style this stuff to be like this and that's it okay guys now we will test it by using android studio emulator so this is the first fragment when you choose the first fragment it's goes to the first and the second fragments choose the second that's it thank you for watching.