Android Jetpack-Navigation Library Example

The Navigation Architecture Component, released as part of Android Jetpack , aims to simplify the implementation of navigation in your Android app. This component and its guidelines offer a new look into how navigation should be implemented, including the suggestion for the use of single-Activity architecture as the preferred architecture for Android Jetpack moving forward.

Principles of Navigation

  • The app should have a fixed starting destination
  • A stack is used to represent the navigation state of an app
  • The Up button never exits your app
  • Up and Back are equivalent within your app’s task
  • Deep linking to a destination or navigating to the same destination should yield the same stack

Set up navigation in a project

Note: If you want to use Navigation Architecture Components with Android Studio, you must use Android Studio 3.2 Canary 14 or higher.

  • Add the following Navigation Architecture Component to your app or module’s build.gradle file.
dependencies {

    //Dependencies for Navigation.
    def nav_version = "1.0.0-alpha02"

    implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin

  • In the Project window, right-click on the res directory and select New > Android resource file. The New Resource dialog appears.
  • Type a name in the File name field, such as “nav_graph“.
  • Select Navigation from the Resource type drop-down list.
  • Click OK.
  • Click Design to see the Navigation Editor.

The Navigation Editor’s sections are:

  1. The Destinations list – Lists all destinations currently in the Graph Editor.
  2. The Graph Editor – Contains a visual representation of your navigation graph.
  3. The Attributes Editor – Contains attributes associated with destinations and actions in your navigation graph.


  • From the Graph Editor, click New Destination  . The New Destination dialog appears.
  • Click Create blank destination or click on a fragment or activity.

Connect destinations

Destinations are connected using actions. To connect two destinations:

  • From the Graph Editor,  over the right side of the destination that you want users to navigate from. A circle appears on the destination.

  • Click and hold, drag your cursor over the destination you want users to navigate to, and release. A line is drawn to indicate navigation between the two destinations.


Click on the arrow to highlight the action. The following attributes appear in the Attributes panel:

  • The Type field contains “Action.”
  • The ID field contains a system-assigned ID for the action.
  • The Destination field contains the ID for destination fragment or activity.

Modify an activity to host navigation

An activity hosts navigation for an app through the implementation of a NavHost interface which is added to your activity’s layout. The NavHost is an empty view whereupon destinations are swapped in and out as a user navigates through your app.

A default implementation of NavHost is the NavHostFragment widget which you can add to your layout. We can see an example of this below.


<?xml version="1.0" encoding="utf-8"?>
< xmlns:android=""

        android:layout_height="match_parent" />


Connect destinations to UI widgets

btn_frag1.setOnClickListener(new View.OnClickListener()
public void onClick (View view){

Where action_mainFragment_to_firstFragment is the action ID from main_fragment to first_fragment.

Leave a Reply