Navigation Components from Android Jetpack (i)

Photo by Alexander Andrews on Unsplash

A new stable version of Navigation Components was recently released by Google. This framework provides powerful features for in-app navigation, so it’s worth checking it in detail.

Introduction

Navigation components was designed to navigate between the UI components of our app in a simple way.

Its usage brings us several advantages:

high level of abstraction, forgetting all about navigation implementation details. The library uses common underlying operations, such as “Activity.startActivity()” or “FragmentManager.beginTransaction()”, but all of them are hidden behind other classes.
reduction of boilerplate code for common tasks, like setting up the navigation drawer, configuring the toolbar or managing the bottom navigation view.
creation of a visual navigation map for the app.
a consistent user experience when navigating by applying the principles of navigation.
very easy-to-use API.

Moreover, the library brings additional features, like type-safe access to arguments used when navigating from one screen to another or custom viewmodels used to store shared data in related screens.

Basic concepts

Navigation Components allows us to create a navigation graph that includes destinations. So there are 2 core elements:

Destination. Somewhere inside our app we can navigate to. In fact, a destination can be:

a single screen (as the login screen)
a group of related screens (like the ones we have to traverse when onboarding in a new installed app)

As we said before, Navigation Components provides abstraction and hides implementation details. So it makes no difference whether the login screen is implemented using an activity, a fragment or even a view: for the library, it is just another destination.

Destinations are contained in a navigation graph.

Navigation graph containing 3 destinations

Navigation Graph. It’s a map displaying all the screens (aka “destinations”) in our app. The graph also shows possible transitions (links) from one screen to another.

The navigation graph is a XML resource, so it can be created either programatically or by using the editor in the latest version of Android Studio.

“Navigation Components allows us to create a navigation graph that includes one or many destinations”

Main classes

The navigation API is built upon the following resources and classes:

Navigation map (XML resource): similar to iOS storyboards, it displays all the destinations within our app and the actions that get us from one screen to another.

<!-- ROOT NODE -->
<navigation
   android:id="@+id/settings_graph"  app:startDestination="@id/settings_dest"
   >
   <!-- DESTINATION -->
   <fragment     
      android:id="@+id/settings_dest"
      android:label="..."  
      android:name="com.example.navcomponents.settings.SettingsFragment"
      tools:layout="@layout/fragment_settings"
      />

</navigation>

NavHostFragment: instances of this class are declared in XML layout files so they can be used as containers on which we can dinamically display destinations (contents) for a given graph.

<fragment
android:id="@+id/main_activ_nav_container"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="@navigation/home_graph"
/>

NavigationController: performs actual navigation from one destination to another by executing navigation commands. Centralizes all navigation actions and events.

val controller = 
   this.findNavController()

controller.navigate(R.id.home_dest)

How do we get started?

In order to use the library, we can apply the following workflow:

Configure project for jetpack and navigation components
Add UI controllers (activities, fragments, views, etc) and their corresponding layouts
Create a navigation map listing all the previously created UI controllers as destinations. Assign unique ID‘s to each one of them
When required, hook events (like clicking a button) with navigation actions on each UI controller

Coming up next…

We will review each one of the workflow steps in the next post. In the meantime, if you can’t wait to get started with this API, check out the code in the following repo:

https://github.com/begomez/NavComponentsGarden