Add a navigation controller to the activity - Android Tutorial

- [Instructor] In this version of Plain Ol Notes, each of the app's two screens will be managed as a fragment. Navigation between the screens will be managed by the navigation component. Originally released as an architectural component and then rebranded as a Jetpack library. The first step in using the navigation component is to create an XML file called a navigation graph. In my project window I'll right click on the app module and I'll create a new Android resource file. I'll set the resource type to navigation and I'll name the file nav_graph. It'll automatically get a dot XML file extension. I'll add that file to my Git repository. And then you may see this prompt asking you to add the project dependency. And if you see it click okay. Then go to the gradle build script for the app module, and you'll see a couple of new dependencies have been added. For navigation dash fragment and navigation dash UI. Because I'm working with Kotlin, I have the -KTX suffix. Now, if that didn't happen on your system, you should add these dependencies to your gradle build file, and then re-sync gradle. Now I'll go back to my nav graph that I've created. This is an XML file. It starts with just a navigation root element, and it's up to you to add destinations. Each destination is typically a fragment and you can create both the destination definition, and the fragment in a single step, by clicking this icon for a new destination. I'll select create new destination, and I'm offered a list of templates. I'll scroll down to the bottom and I'll choose this one. Fragment with ViewModel. I'll click next, then I'll change the name of my new fragment from blank Fragment to main fragment, this will be the first fragment that appears when the app starts. And that also renames the associated layout file and the associated view model class. we'll get to that later. Then I'll click finish, and that creates all three files and I'll add them to my repository. Now let's look at that XML file again. It's been expanded, It now has an ID for the navigation element and a start destination pointing to the main fragment. That fragment is defined here, and it points to this class main fragment, and I can Control or Command click to jump to that file, and here I see that there's a new instance companion object function, and then a late innit variable, that's the view model. And then down here in the on activity created function, the initialization of the view model happens. Now, I actually need to move that around a little bit. I'm going to take this bit of code, cut it, and then paste it here in the onCreateView function. My reason for doing that will become clear later, and then I no longer need this on activity created function. So I'll just delete it. I also won't need this companion object function, new instance. When you deal with the fragment using the navigation component, the new instance function isn't called. I'll make those changes. Then I've pressed the keyboard shortcut for rearranging imports. You can find that on the menu under code that's under optimize imports. And now I'm ready to add the navigation host to my main activity. I'll go to my main activity class and I'll Control or Command click to jump to activity main. It starts of with just a text view wrapped inside the constraint layout. I'll get rid of that, then I'll go to design view, I'll select the containers category from the pallet, scroll down, and then I'll drag and drop a NavHostFragment into my activity layout. I'll select nav graph as the navigation graph that I want to use and click, okay. Now there is a bug where sometimes that doesn't work exactly the first time, and it didn't happen this time for me. So I'll go back to design mode, I'll drag and drop again. This time I'll double click and I can see a visual change. I now see my fragment with a text view of hello in the top left corner. Next I need to anchor the edges of my navigation hosts to the four edges of the container. I'll just click on each of these anchors and drag until they're a solid color. And that's a visual indicator that I've successfully anchored the edges to the parent of the container. And then I'll come over here to the attributes window and I'll set both the layout width and the layout height to 0dp, which with the constraint layout container means match the constraint. I'll look at the code for that. And I see that I have an ID of fragment3 here. I'm going to change that, from fragment3 to NavHostFragment, and then I'll use an intention action and change from the legacy fragment element to a newer class called fragment container view. Then I'll do a little reformatting to make sure everything's in good shape and I'm ready to test the app. When the app appears on the virtual device, I see the word hello in the top left corner, and that's a visual indicator telling me that my main fragment was successfully loaded. So now my navigation host and my navigation graph have been created, the required dependencies have been added and I'm ready to start building some functionality in that main fragment.