Android Navigation Component. Navigate with ease

Robert Levonyan

·

Follow

Published in

AndroidPub

·

4 min read

·

Jun 15, 2019

--

1

Listen

Share

Android Jetpack’s Navigation Component is already stable and it makes it easy to navigate between fragments. You don’t have to deal with things like Fragment transactions, Fragment Manager, back stack. All you need to do, just create a navigation graph, a “map”, to ask the app where it can navigate and how.

So let’s look on a simple example how to implement that.

First of all, as usual, we need to add some dependencies.

In the project level build.gradle file:

allprojects {
    repositories {
        google()
        jcenter()
    }
}

In the app level build.gradlefile:

dependencies {
     ...implementation 'androidx.navigation:navigation-fragment:2.0.0'
implementation 'androidx.navigation:navigation-ui:2.1.0-alpha02'     ...
}

Once we’ve added all the dependencies that we need and synced the project, let’s get our “hands dirty” and create something interesting.

Imagine, we need to create a messaging app.

What we will have:

• Splash screen
• Sign in
• Sign up
• Messages list
• Message details (which also will be a new message screen)

Nothing complicated. Let’s keep it simple. We always can add more stuff (like group chats, voice messaging, etc.)

So I’ve created an empty project in Android Studio with single Activity.

Note. With the Navigation Component Google is going forward with Single Activity approach. They suggest to have only one Activity, and the rest should be Fragments.

As I said above, we need a navigation graph. For that we need to create a new resource type - navigation. Create a new resources directory and choose the type navigation. Then create a new navigation resource XML with some name.

Looks good.

Note. You can also have DialogFragments as destinations.

From graphic editor we need to add our fragments as destinations. To go from one destination to another, we need to create actions. Just drag from the circle indicator on the middle of your destination and connect it to another one. Because our app will always start from a splash screen, we have to specify it as a Home destination. Home is where everything starts.

By clicking the action you can see all possible options on the right side.

• ID — regular id like all the views have
• Destination — the fragment we want to show
• Animations section — animations for entering and poping
• Arguments to pass
• Pop behavior — where should you pop. After showing the splash screen we will navigate to some destination, but by pressing back, we should not be able to pop back to the splash screen. That’s why I put the pop destination the nav_graph itself.
• Launch single top or not

So we have created our “map”. Let’s go and find some treasures.

First of all, we need to have our hosting fragment, which called NavHostFragment. The rest will be shown inside this one. Let’s add it.

I like that! Now let’s do some coding.

Generally that’s all.

But there are also some nice things here. Let’s also have look on them.

SafeArgs

With navigation Component you also can pass arguments from one destination to another. For example, a user ID to fetch the details of user from a remote server or local database. It is recommended to pass only small data between destinations. Like we said a user ID instead of the user itself.

So, to specify an argument on navigation editor do the following

1. Click the Add (+) button on the Arguments panel
2. Then add argument name, type, is it nullable and a default value (if needed)
3. Then select your action and the argument

The Navigation Architecture Component supports types like Integer, Float, Long, Boolean, String, Resource reference (e.g. layout/my_layout_name), Custom Parcelables or Serializables and Enums.

It has a Gradle plugin called Safe Args that generates simple object and builder classes for type-safe access to arguments specified for destinations and actions. To use it first we need to add dependencies to project and app-level gradle files.

classpath "android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha04"apply plugin: "androidx.navigation.safeargs"

After enabling SafeArgs we will have generated type-safe methods for each action with both sending and receiving destinations. For each originating destination will be created a “Direction” class. E.g., for MessagesListFragmentDirection for MessagesListFragment. Also for each action with and argument will be created a class based on action name. E.g., for startChatAction will be created a StartChatAction class. And from the destination we will have an “Args” E.g., MessageDetailsFragmentArgs for MessageDetailsFragment. With `fromBundle()` method we get the arguments.

Deeplinks

With Navigation Component you can use a URI instead of an action to navigate.

The navigation is very easy with deeplinks or with actions. All is working with the same logic.

Conclusion

Android Jetpack’s Navigation Component is an easy to use solution to create a navigation plan between the fragments in your app. It helps you to “forget” about the Fragment Managers and Fragment Transactions and it does all that work for you.

And that’s it!

If you want more reading or videos about the Navigation component follow the links below.

Also you can follow or contact me:

Twitter: https://twitter.com/RobertLevonyan
Github: https://github.com/robertlevonyan
Email: me@robertlevonyan.com
Website: https://robertlevonyan.com