How to set up Navigation in your Android application to make your life easier.

The following are a list of steps that one should take to add Navigation in your android app. It is the recommended way of adding navigation to your application. Recommended by Google’s Android team itself in their Udacity course.

1. Adding the Navigation Components to the Project

Start by adding informing Project build.gradle to run the build script which will allow android studio to add the navigation component that we want to use.

We have tested against the version shown, but you can see which version is the latest on this page on

buildscript {
    ext {
        version_navigation = '1.0.0'

Within the App build.gradle file, add the dependencies for navigation fragment ktx and navigation UI ktx.

dependencies {
    implementation "android.arch.navigation:navigation-fragment-ktx:$version_navigation"     
    implementation "android.arch.navigation:navigation-ui-ktx:$version_navigation"

2. Adding the Navigation Graph to the Project

In the Project window, right-click on the res directory and select New > Android resource file. The New Resource dialog appears.

Select Navigation as the resource type, and give it the file name of navigation. Make sure it has no qualifiers. Select the navigation.xml file in the new navigation directory under res, and make sure the design tab is selected.

3. Replace the Title Fragment with the Navigation Host Fragment in the Activity Layout

Go to the activity_main layout. Change the class name of the existing Title fragment to androidx.navigation.fragment.NavHostFragment. Change the ID to myNavHostFragment. It needs to know which navigation graph resource to use, so add the app:navGraph attribute and have it point to the navigation graph resource – @navigation/navigation. Finally, set defaultNavHost = true, which means that this navigation host will intercept the system back key.

<!-- The NavHostFragment within the activity_main layout -->

4. Adding the Title and Game Fragments to the Navigation Graph

Within the navigation editor, click the add button. A list of fragments and activities will drop down. Add fragment_title first, as it is the start destination. (you’ll see that it will automatically be set as the Start Destination for the graph.) Next, add the fragment_game.

<!-- The complete game fragment within the navigation XML, complete with tools:layout. -->
   tools:layout="@layout/fragment_game" />

5. Connecting the Title and Game Fragments with an Action

Begin by hovering over the titleFragment. You’ll see a circular connection point on the right side of the fragment view. Click on the connection point and drag it to gameFragment to add an Action that connects the two fragments.

6. Navigating when the Play Button is Hit

Return to onCreateView in the TitleFragment Kotlin code. The binding class has been exposed, so you just call binding.playButton.setOnClickListener with a new anonymous function, otherwise known as a lambda. Inside our lambda, use view.findNavcontroller to get the navigation controller for our Navigation Host Fragment. Then, use the navController to navigate using the titleFragment to gameFragment action, by calling navigate(

//The complete onClickListener with Navigation
binding.playButton.setOnClickListener { view: View ->

One more thing you might want to do. Navigation can create the onClick listener for us. We can replace the anonymous function with the Navigation.createNavigateOnClickListener call.

//The complete onClickListener with Navigation using createNavigateOnClickListener

You’re done! That was a lot of steps, but you’ve built a graph, connected it to the UI, and made navigation happen.

If you want to start at this step, you can download this exercise code from: Step.02-Exercise-Lets-Navigate-Already.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here Step.02-Solution-Lets-Navigate-Already or diff

Leave a Reply

Your email address will not be published.