Getting started with Navigation Architecture Components

Getting started with Navigation Architecture ComponentsReema PrajapatiBlockedUnblockFollowFollowingFeb 17Source: Vskills blogOn Google I/O last year, Google announced Jetpack.

Jetpack combines the existing Android support libraries and components and wraps them into a new set of components (including a couple of new ones).

These libraries are moved into the new androidx.

* package so as to make the application development process easier along with producing a robust and fast application.

Among the other components in the Jetpack, the one that fascinates me the most is the Navigation Architecture Component.

Navigation handles navigating between destinations.

These destinations are usually the fragments but it also supports activities and other custom destinations.

Navigation Architecture Component helps to implement the complex android navigation in a much simpler way.

It provides a set of Navigation components that handles most of the details itself like Fragment transactions, Up and Back navigation, Navigation UI patterns like navigation drawers, bottom navigation and many more with minimal code.

You should read more about the benefits of Navigation Component Architecture and some key points that are to be considered before working with Navigation Component Architecture in the official documentation.

The Navigation Component is available in beta version 1.


0-beta01 currently(when this blog is being written).

Before getting started…Following is the demo of the application that we are going to build shortly.

The applications has three fragments namely HomeFragment, ProfileFragment and SettingsFragment in the Bottom Navigation View.

The HomeFragment has a a button that gets us to FirstPageFragment.

The FirstPageFragment leads to LastpageFragment.

Adding dependenciesIn the app level build.

gradle, add the following dependencies.

implementation "android.



navigationVersion" //get the lastest versionimplementation "android.



navigationVersion"Also, add the following classpath dependency.

classpath "android.


navigation:navigation-safe-args-gradle-plugin:$navigationSageArgs" //get the latest versionNow, the following plugin is for passing arguments between the destinations i.


the Fragments in our case.

apply plugin: 'androidx.


safeargs'Setting up the MainActivityThe MainActivity comprises of a NavHost Fragment and a Bottom Navigation View in the XML layout.

Navhost Fragment: An activity hosts navigation for an app in a NavHost.

The NavHost is an empty container which swaps different fragment destinations in and out as you navigate through the navigation graph.

Here, in the NavHost Fragment, we have assigned a navGraph property whose value is an XML resource.

This XML resource is called a navigation graph that represents the individual destination nodes within your app along with the actions that connect the nodes.

In other words, destinations are the fragments that you reach as a result of actions.

To create a navigation graph, create a directory named navigation under the res directory.

Create an XML resource in that directory.

The navigation graph for our app looks like this.

The lines represent the actions that leads to the destinations.

The design part of the android_navigation.

xml looks like this.

Whereas the following is the text part of android_navigation.


But…who controls this?NavController.

This is an object that keeps track of the current position within the navigation graph.

It coordinates the swapping of destination content in the NavHostFragment as you move through a navigation graph.

In the MainActivity, we create an object of NavController.

val host: NavHostFragment = supportFragmentManager .



my_nav_host_fragment) as NavHostFragment?.?: returnval navController = host.

navControllerWe can navigate to destinations by using NavController.




first_page_fragment)Setting up the Bottom NavigationWell, with the Navigation Architecture Component, navigation with menus, drawers, bottom navigation has been made super easy.

The following two lines is all that costs for setting up the bottom navigation view.

private fun setUpBottomNav(navController: NavController) { val bottomNav = findViewById<BottomNavigationView>(R.


bottom_nav_view) bottomNav?.

setupWithNavController(navController)}Up to here, we have created four fragments of the Bottom Navigation View.

Action!Apart from using NavController for navigation, we can also use Actions.

The lines shown on the navigation graph are the actions.

This action id action_goto1 connects home_fragment with the destination first_page_fragment.

Using app:popUpTo instead of app: destination pop fragments off of the back-stack until first_page_fragment is reached.





setOnClickListener ( Navigation.



action_goto1))Lets work with Arguments now!Safe args, the Gradle plugin we have used, generates simple object and builder classes for type-safe access to arguments specified for destinations and actions.

The use of <argument> tag in the first_page_fragment generates FirstPageFragmentArgs class.

Here we are passing an integer testNumberfrom the HomeFragment to the FirstPageFragment.

Remember, the argument tag is defined in the fragment which is receiving the arguments.

The FirstPageFragmentArgs class generates getters and setters for the testNumberargument.

We set the value in HomeFragment by using Directions classes.

var action: HomeFragmentDirections.

ActionGoto1 = HomeFragmentDirections.




navigate(action);The Directions classes are generated for every distinct destination with actions.

The Directions class includes methods for every action a destination has.

Now, for getting the value of testNumber in the FirstPageFragment,val safeArgs = FirstPageFragmentArgs.

fromBundle(arguments)val flowStepNumber = safeArgs.

testNumberThis is it!.We have successfully used the Navigation Architecture Component for building our application.

Fire up the app, and see the result.

You can also view the full code in github.

Happy coding!Referenceshttps://developer.







. More details

Leave a Reply