You need some new dependencies in your project's Gradle build scripts to add the navigation component to your app. David also describes how to create a navigation graph XML file.
- [Instructor] If you're following along with the course on your computer, you can either continue working with the project you created in the previous video or you can check out this repository from GitHub. You'll find that there's a master branch and then one starting branch and one ending branch for each video in the course. You can clone the repository by copying this URL to your clipboard and then going over to Android Studio and checking it out from the welcome screen. After you've checked out the app, you should be able to open it and run it on your device.
Now, my next step in the process in adding navigation to my application is to add dependencies so that I can use the navigation component libraries. I'm going to start off in the top level Gradle build file. You can find this in your Gradle scripts' virtual directory when you're looking in the project window at the Android scope. First, I'm going to add a variable that designates the version of the libraries that I'll be using.
I'll set this as ext.nav_version. The name of the variable can be anything you like. And then I'll set the value as 1.0.0-alpha-07. That's the most recent version of the navigation component as of the time of this recording. There will probably be a more recent version when you watch this course, though. But after you've finished this whole process of setting up the dependencies, Android Studios should notify you what the most recent version is.
Next, I'll go to the Gradle build script for the module. And I'll add a couple of dependencies right here. I'll start off with implementation and then, inside a pair of double quotes, I'll add the unique identifier for the library. Make sure you're using double quotes and not single quotes because whenever you're concatenation of literal values and variables, you have to use the doubles. The first dependency's identifier is android.arch, and that stands for architecture, .navigation:navigation-fragment.
If you're programming in Java, that's the entire unique identifier. But if you're working in Kotlin, you should add -ktx. Next, add another colon and then after that, $nav_version. And that's the reference to that variable that you created in the project level file. Now, duplicate that line, that's command-D on Mac or control-D on Windows, and for the second library, change fragment to UI.
And then click sync now. And if everything is working so far, successfully, you shouldn't see any errors. Next, go to the main activities layout file. This is where you add the navigation controller component. For the moment, I'm going to leave that text view in place because there's code in the application that refers to it and I'm going to add a fragment right here. I'll set both the layout width and the layout height to 0dp and then I'll add an ID and my ID will be nav_host.
Next, I need the name of the fragment class that I want to display. I'll use the name attribute and I'll set that to androidx.navigation.fragment.NavHostFragment. I'll also set an attribute called defaultNavHost to a value of true. Use the app prefix for that and not the android prefix. And then, finally, I'll add attributes to stretch this fragment to its maximum size.
I'll set left to the left of and that'll be to the parent. I'll do the same thing with right to right of and that'll cause the component to stretch to the entire width of the screen. I'll set top to top of and once again set that to the parent. And then, for the bottom border, I'll use bottom to top of, and I'll use an ID for this. I want to stretch this downward so that it touches the top of the bottom navigation view and that component has an ID of navigation.
And, so now my host component is in place. This is where I'll be placing my fragments that represent complete screens in the application. I'll run the application on my device just to make sure I haven't broken anything. And if the app comes to the screen and is still functional, then you'll know that everything is working as expected so far. And your next step is to start creating fragments and trading them in and out to switch from screen to screen.