Android Jetpack’s Navigation Component

Firuze Gümüş
Huawei Developers
Published in
3 min readJul 7, 2020

In this article, I will explain how to build the navigation flow of a mobile app and how to pass data between fragments, using the Android Navigation Component. I will also mention some of the headaches that you may experience while using navigation.

Navigation Component offers us two different ways to pass data between fragments. First method is passing data with Bundle and the second one is using Safe Args which are generated automatically by the safe-args gradle plugin.

The documentation mentions that Safe Args is strongly recommended for navigating and passing data, because it ensures type-safety. I will give examples to explain how both methods are used.

Firstly, we need to add some dependencies to the app level build.gradle to use Navigation Component. Then apply plugin “androidx.navigation.safeargs.kotlin” if you use Kotlin for development, if not just leave it as “androidx.navigation.safeargs” to use Safe Args with Java.

Then we need to add navigation-safe-args-gradle plugin to the project level gradle file for using Safe Args method of the navigation component.

We will have a MainActivity and three fragments. CategoriesFragment, ProductsFragment and ProductDetailFragment. When user click the button on the CategoriesFragment, an action will be created to pass categoryId to the ProductsFragment. Then another action also be created to pass product Item(which is Serializable, no matter if you prefer Parcelable) to the ProductDetailFragment.

First we need to add NavHostFragment to the main_activity layout.

Then a navGraph should be provided for the NavHostFragment. It must be located in the navigation folder which is under the app/src/main/res.

Ok now we can pass categoryId to the ProductsFragment as below.

Then get the data by using Bundle or Safe Args. As you can see in the code below, when we use bundle method to pass data, we have to write the argument names correctly. But Safe Args generates simple object and builder classes for type-safe navigation and you don’t need to think of argument names.

We need to pass Product item data to the ProductDetailFragment. You can pass it as a Parcelable or Serializable with Bundle method. Safe Args also supports both interfaces. I will show below how to get product item with Safe Args.

If we talk about the problems we may across while using Navigation, first ensure that you added all dependencies completely. If there is an error in your Navigation graph file, your Safe Args or Directions objects will not be created. First you need to find and fix the error and rebuild the project.
If you are passing data from one fragment to another, you must define an argument for the destination fragment.
You must provide argType correctly. For supported argument types refer to : Supported Argument Types

That’s it. You can use the Navigation component to manage the navigation flow of your application quickly and easily.

You can access the full code from github.

Stay healthy!

Keep coding..

--

--