This article builds on top of the code created in part 1
Adding the next destination
Open up your nav_graph.xml file in the design view, click the “New Destination” button on the top left corner (highlighted in the screenshot above) and click “Create new destination”.
You’ll then be given a number of Fragment options to use for your new destination. Choose “Fragment (blank)” for now.
This fragment will take the users name so let’s call this “NameFragment” and click “Finish”.
Your new destination should now be shown and highlighted on the nav graph. A Fragment class and a layout class should also have been generated.
Now that we have a new destination we can navigate to it from our WelcomeFragment.
Update your fragment_welcome.xml layout file to contain the following:
This gives us a button (“next_button”) we can click in order to navigate to another destination.
Back on your nav_graph.xml, click your WelcomeFragment destination so it is highlighted, then click and hold on the round blue circle on its side and drag until it reaches the NameFragment destination and release. you should then see something like the following:
By doing this drag and drop action, you have created an “action” allowing navigation from the WelcomeFragment to the NameFragment. This action can be customised with arguments, enter and exit animations and launch mode, but for now we’re going to focus on simply navigating to the NameFragment.
SafeArgs is a plugin that essentially provides type safety for passing arguments using actions between destinations. During your build it will generate NavDirection classes for each of the actions you have created, including constructor arguments for any arguments you have defined.
In order to make use of SafeArgs we need to add the plugin to our classpath in our top-level ‘build.gradle’ file:
and then applying the plugin in our app level ‘build.gradle’ like so:
or, depending on your setup:
Once this is done, sync your gradle files and do a clean build of your code. During this build, SafeArgs will generate a class for us to use based on the action we created above.
In order to use this new class we need to write some code in our WelcomeFragment. We can remove the companion object, the onCreate() method and the auto-generated comments, leaving something like this:
We now want to add a click listener to the “next_button” we added earlier and have the app navigate to the NameFragment when we click.
First let’s add an onViewCreated() override and put our logic in there. My WelcomeFragment now looks like this:
The two main things to note in the new code (lines 23–25):
- findNavController() is a Fragment extension function that provides the navController for the fragment that it is called from. This NavController is then used to carry out our navigation.
- WelcomeFragmentDirections — This has been generated by the SafeArgs plugin and includes a function actionWelcomeFragmentToNameFragment() which returns a NavDirections class which you can pass to the NavController’s navigate method().
If you run this code now you should be shown the WelcomeFragment. Clicking on the new button should take you to the NameFragment. Using the system back button will take you back to the WelcomeFragment.
In the next part we’ll add another destination, pass arguments between destinations and link our nav controller with a toolbar to allow us to show titles and provide an “up” action for the user to go back from the current fragment.