Navigation component – Introduction

Reading Time: 3 minutes
In this tutorial we are going to talk about how the Jetpack Navigation Component works. Using a starter projcet we will add step-by-step the library to navigate between the fragments, pass data and hold them when we navigate away from the view. These are just some examples what we are going to talk about.

Read the rest of the Introduction chapter to see more detailes about this tutorial. 😊

Introduction of Navigation Component

Navigation refers to the interactions that allow users to navigate across, into, and back from the different pieces of content within our app. Android Jetpack’s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer. The Navigation component also ensures a consistent and predictable user experience by adhering to an established set of principles.

The Navigation component consists of three key parts that are described below:

      • Navigation graph: An XML resource that contains all navigation-related information in one centralized location. This includes all of the individual content areas within our app, called destinations, as well as the possible paths that a user can take through our app.
      • NavHost: It is an empty container that displays destinations from our navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.
      • NavController : This is an object, which manages app navigation within a NavHost. The NavController orchestrates the swapping of destination content in the NavHost as users move throughout your app.

As we navigate through our app, we tell the NavController that we want to navigate either along a specific path in our navigation graph or directly to a specific destination. The NavController then shows the appropriate destination in the NavHost.

Some benefits of the Navigation component
      • Handling fragment transactions.
      • Handling Up and Back actions correctly by default.
      • Providing standardized resources for animations and transitions.
        Implementing and handling deep linking.
      • Including Navigation UI patterns, such as navigation drawers and bottom navigation, with minimal additional work.
      • Safe Args – a Gradle plugin that provides type safety when navigating and passing data between destinations.
      • ViewModel support – you can scope a ViewModel to a navigation graph to share UI-related data between the graph’s destinations.
      • In addition, you can use Android Studio’s Navigation Editor to view and edit your navigation graphs.

Source: Navigation Component, Google documentation

The tutorial’s project

In the Introduction of Navigation Component tutorial we are going to modify the starter project. This project is very simple, contains 5 fragments, a dialog fragment and only one activity.

The first 5 fragments are basic fragments. They contain a TextView for the title, an EditText to test the saved arguments and pass data to the next fragment. The third view is a Button. We will use it to open the next fragment or the dialog.

The third fragment will be different from the others. It will contain a RecyclerView and a FloatingActionButton. In the RecyclerView  we will have a list of todos. The FloatingActionButton will open the dialog fragment, where we can create a new todo.

As a navigation between the first 4 fragments we are going to implement a Navigation drawer and a Toolbar also. They will be the part of the main activity.

The navigation graph will look like this:

The chapters

          1. Introduction
          2. Add library and make action
          3. Passing data
          4. Navigation drawer
          5. Save state using ViewModel
          6. Dialog fragment
          7. Managing back stack
          8. Bottom navigation bar


The source code of the whole tutorial will be available on GitHub. Each chapter will have a separate branch. So later on, you can rebase you code if something went wrong.

The starter project is available here:

GitHub – Starter projcet


I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂



Follow and like us:
Click to rate this post!
[Total: 1 Average: 5]

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications