Jetpack Navigation Component — Android

5 min readJun 6, 2020

It is part of android architectural components. It helps you to implement navigation from simple clicks to complex patterns

Navigation component simplifies navigation between fragments, Passing data between fragments and animations etc..

Entire app navigation information at one centralised location

Navigation component has mainly

Navigation Graph :

It is an XML resource, It contains all the fragments/dialogs etc(called as destinations) related information and possible path navigations, We can see complete application user flow at one place

Nav Host:

An empty container that displays destinations from your navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.

Nav Controller :

An object that manages app navigation within a NavHost. The NavController orchestrates the swapping of destination content in the NavHost as users move throughout your app

create navController object (TreesActivity)

let’s see how to achieve this with navigation graph

Simple navigation

First we need to create navigation graph, In res create navigation folder, Inside navigation folder create nav_tree_graph.xml file like below

Open navigation graph editor, On top left corner click on plus (+) button to add destinations(fragments/dialogues etc) to the navigation graph

add fragments (destinations) nav_tree_graph.xml

if you want to navigate blueTreeFragment to blueChildFragment, first we need to create link as shown in below

In nav_tree_graph.xml file automatically generated below code

Now, When click on button inside blueTreeFragment we need to navigate from blueTree to blueChild, To do this first we need to create navigation controller object, And call method navigate() it will take action_id(nav_tree_graph.xml file blueTreeFragment action id) as input parameter, Check below code

Passing data between destinations(Fragments)

To pass data between fragments(blueChildFragment => CompleteTreeFragment), First select data received fragment(CompleteTreeFragment) in right attributes panel click on ‘+’ in the arguments section, it will open add argument dialog, In this give input to add name and select type for Eg: below given name as message and type as String(here we are passing only string data)

(nav graph visual editor)nav_tree_graph.xml

Now in nav_tree_graph.xml file you can see generated code in CompleteTreeFragment

(nav graph code editor) nav_tree_graph.xml

Then rebuild the project to see generate args classes in java generated folder

In blueChildFragment take input from text field and send parameter like below

You can receive data in completeTreeFragment like below

CompleteTreeFragment

Safe Args — The Navigation component has a Gradle plugin called Safe Args that generates simple object and builder classes for type-safe navigation and access to any associated arguments. Safe Args is strongly recommended for navigating and passing data, because it ensures type-safety.

Check link for safe args integration : https://developer.android.com/guide/navigation/navigation-pass-data#Safe-args

Create bottom navigation view in fragment

First insert bottom navigation view in activity xml,

Next create menu resource file and add file to bottom navigation view, Here menu resource file menu item id and navigation graph fragment id should be same. Check below code

Final step is to set up link between navigation controller and bottom navigation view for that we need to write below code in activity

Thats it, See hoe It works.

Create toolbar and setup option menu in fragment

create toolbar in fragment xml file

Setup title, backgroundcolor etc.. and inflate toolbar menu in onCreateOptionsMenu function.

and call method setSupportActionBar()

And insert setHasOptionMenu(true) in oncreate() method

Create nested nav_graph

Open navigation graph, select any fragment and right click see options move to nested graph, when click on new graph it will insert nested graph

And also automatically inserted records in nav_tree_graph.xml

nav_graph_orange is nested nav_graph (nav_tree_graph.xml)

Animation to the fragments

Using navigation component we can easily apply animations like slide,fade..etc

We create animation files in anim resourse folder, add these files into actions inside fragment, when fragment enter and leave below these animations are excuted (enterAnim,exitAnim,popEnterAnim,popExitAnim)

Navigation back stack :

Here navigation (blueTreeFragment => blueChildFragment) and (blueChildFragment => CompleteTreeFragment) In completeTreeFragment once click on Finish button we should navigate to blueTreeFragment and clear the stack.

To do that we need to use popUpTo and popUpToInclusive

app:popUpTo attribute to the associated <action> element. app:popUpTo tells the Navigation library to pop some destinations off of the back stack as part of the call to navigate(). The attribute value is the ID of the most recent destination that should remain on the stack.

You can also include app:popUpToInclusive="true" to indicate that the destination specified in app:popUpTo should also be removed from the back stack.