From the course: Android Development Essential Training: Manage Data with Kotlin

Create and navigate to a detail fragment

From the course: Android Development Essential Training: Manage Data with Kotlin

Start my 1-month free trial

Create and navigate to a detail fragment

“

- [Instructor] When you architect an app using the navigation component, each new screen can be defined as a fragment rather than as a separate activity. In this app, I want to display the details of a data item that the user selects. So when they press one of the tiles in the grid, I'll navigate to a new fragment called the detail fragment and display that data item's details. I'm starting in the navgraph.xml file in the navigation directory under resources. I'll click this button to create a new destination, and I'll name is new destination detail fragment. I'll uncheck these options. Because I'm using the navigation component, a lot of the complexities that traditionally have gone with using fragments aren't going to be needed. I'll create both the new class, detail fragment, and it's associated layout file. Next, I'll connect my main fragment to my detail fragment creating an action that I can call from my application to navigate to the detail fragment. I'll arrange my fragments on the screen, and then I'll click on this anchor on the main fragment and drag it to the detail. That creates an action. This is what the generated code looks like. The action element is nested within the main fragment element. That means it can only be called from that fragment. And the action has an ID that I can refer to in my code. The generated ID is pretty long and it doesn't need to be that long for my purposes, so I'm going to shorten it to simply action_nav_detail. I'll also change the ID for this fragment from detail fragment two to simply detail fragment and I used refactoring there so it will change in the references as well. So now I have my detail fragment and I'm ready to navigate to it. I'll go to my main fragment class and I'll declare an instance of the nav controller class as a property of this fragment. This will make it possible to work with the navigation controller from anywhere in the class. I'll name it nav controller and the type will be nav controller from the Androidx.navigation package. Next, I'll initialize that object. I'll use this expression: navigation.findnavcontroller. There are two signatures for this function. I'll use the first one. My navigation controller is declared in the activities layout. And so I need to pass that activity reference. And I'll do that by calling the require activity function and then I'll pass in the ID of the object. I'll go to that layout and I'll look at the fragment and I'll see that it has an ID fragment right now. I'm going to change that to nav_host. Then I'll come back here to main fragment and I'll pass in R.id.nav_host. So now I have a reference to my nav controller and I'll come down here to where I'm handling the click event in the item in the recycler view. I'll call nav controller .navigate. And I'll pass an R.id.action_nav_detail. And so now my navigation is complete. When the user clicks on an item, I'll jump to the new detail fragment. And I'll test it out. When the app appears, I'll choose any item, touch the button, and I go to the detail fragment. I'll press the back button on the device and I come back to the main fragment automatically. That navigation is handled by the navigation controller component. There's still a couple more steps to implement all of my navigation. In my detail fragment, I want to display an up button to navigate back to the main fragment. And I also need to display the details of the selective data item. I'll show how to do that in the following videos.

Contents