AndroidPub
Published in

AndroidPub

Android Navigation Component. Navigate with ease

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.

Image from Dribbble ( https://dribbble.com/shots/5855823-Trunow-Find-Deals-Illustration)

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.

An activity which contains a NavHostFragment for Android Navigation component

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

Navigate at runtime
Navigate on button click

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.

Declare argument
Set argument
Retrieve data

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.

--

--

--

The (retired) Pub(lication) for Android & Tech, focused on Development

Recommended from Medium

Android Clean Adapter — This is how adapters should be

Logger Library — The Kotlin way

Android Custom Button Vertical Left Bottom Alignment with Icon

Android 12 — Back Press On Launcher Activity

Sharing In-app Images with Huawei’s App Linking

Simplifying RecyclerView using Groupie.

How To Make Android Apps With Kotlin

How to Update Android on Phone Or Tablet

How to Update Android on Phone Or Tablet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robert Levonyan

Robert Levonyan

Senior Android Developer @Picsart. Find my projects here: https://robertlevonyan.com

More from Medium

RecycleView Kotlin — Android Studio

Why Jetpack Compose for Android Development?

Wireless Debugging — Android Apps

Android 13: Notification Runtime Permission