Use Jetpack Navigation in the Android Application Design Process

Wojciech Staniewski

Dec 24, 2018 • 9 min read

Android application design problems

During the development of an Android application I had to implement a custom design system where:

Screens need to be opened from DeepLink.
Dashboard screen has a couple of buttons to open other screens.
Screens with toolbar contain a right button to close the current screen.
Screens only have a left back arrow button sending you to the previous screen (like in iOS).
Screens contain both mentioned-above buttons.
The UX design project contains more than a hundred screens.

The first things I considered as an Android developer were:

How to implement navigation in the application?
How to implement navigation when a user opens an application from DeepLink?
Does the UX design cover all possible application workflow paths?
Is the UX design efficient from the user perspective?

Answering the first question, I developed something like NavigationHelper or a Navigator class to manage navigation between Fragments in the Activity. The object of this class needs Activity context to start another Activity or FragmentManager to manage the Fragments inside of the Activity. But does this object solve the navigation from DeepLink? To catch a DeepLink we need to implement the following:

Setup a proper <intent-filter> in your Manifest as an entry point.
Consider setting android:launchMode="singleTask" for the target Activity to avoid running multiple copies of your Activity at the same time.
Handle the Intent.
Match the DeepLink with predefined regular expressions to navigate the user to the proper page/content.

The next problems I faced were:

Inefficient UI flow (e.g too many clicks to do something in the application, navigate through too many screens to go somewhere in the application etc.)
Missing or not complete application workflow paths.

Both problems are UX design problems and need to be resolved with a UX designer after the developer discovers that they exist. To do that, you don't have to contact another UX design agency. Netguru will do it for you.

Navigation from Jetpack can help

To simplify these problems, Google presented the Navigation from Jetpack at the annual Google I/O event in May 2018. The Navigation component is “something” which gave us the ability to get rid of these Android application design problems or at least reduce them to the minimum. Firstly, the Navigation component is an object which represents a graph stored as an XML file. Android Studio provides the visualization of this file to represent the navigation flow of an activity. Below is an example of a navigation graph visualized in Android Studio.

In the picture above:

Fragments represented in the graph are Destinations.
Destinations are connected via actions. Each action is represented in the navigation graph line with an arrow. Arrows show the direction in our navigation from source to destination.

The diagram shows that e.g. the Settings fragment is not connected. There is a missing or incomplete workflow path.There are no circular actions between screens. The example above shows how easily all incomplete paths or inefficient UI flows can be checked in Android Studio. The Navigation component simplifies the handling of DeepLinks. I have to handle the DeepLinks coming from other app to trigger specific screen. The Navigation component provides a static context in the navigation graph. Below is a snippet which defines the URL for the destination. In this example, the arguments to pass are described in curly braces.

<fragment
   android:id="@+id/android"
   android:name="com.example.android.codelabs.navigation.DeepLinkFragment"
   android:label="@string/deeplink"
   tools:layout="@layout/deeplink_fragment">

   <argument
       android:name="myarg"
       android:defaultValue="Android!"/>
   <deepLink app:uri="www.example.com/{myarg}" />
</fragment>

The problem with buttons on the left and right side in the toolbar can be solved the following way:

For the left button with an arrow back to the previous screen we have the callback method in Activity class presented below:

override fun onSupportNavigateUp(): Boolean {
    return NavigationUI.navigateUp(drawerLayout,
           Navigation.findNavController(this, R.id.my_nav_host_fragment))
}

For the right button with an “X” icon to close the current screen I have used an XML menu to describe the item:

<item
    android:id="@+id/shopping_cart"
    android:icon="@drawable/ic_shopping_cart_white"
    android:title="@string/shopping_cart"
    app:showAsAction="ifRoom" />

The ID from this item will be used in the navigation graph to navigate to this destination. The snippet below shows the destination part of the navigation graph related to above-mentioned item ID.

<fragment
   android:id="@+id/shopping_cart"
   android:name="com.example.android.codelabs.navigation.CartFragment"
   android:label="CartFragment"
   tools:layout="@layout/cart_fragment" />

Prototyping process

While working with the navigation component I have discovered that the navigation graph preview can render assets for the layouts. To do that I have to set the image from the UX design as a background property for each fragment layout.

Finally, I get the user flow for the top-level application navigation in the Navigation Editor. In an app where there is more than a hundred screens it is very useful to avoid getting lost. The last step to finish prototyping is to handle the actions with the buttons from all destinations to make the application clickable. To do that, I have to add a button to the layout (e.g ImageView, Button), then apply onClick handling in the source code. The snippet below shows how to execute the XML action from the navigation graph.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    view.findViewById(R.id.next_button).setOnClickListener(
            Navigation.createNavigateOnClickListener(R.id.next_action)
    )
}

When this process is done for all screens from the UX design, I have a fully clickable prototype of my Android application.

Summary

The prototyping process described can be treated as the first phase of Android application development. When an Android developer has to deal with a UX design where navigation is not intuitive at the first look, this process can be useful to get a handle on top-level navigation in the application.

Pros and Cons

The process will show what paths in the application workflow are missing according to the UX Design
Speed up the development process for the minimum viable product (MVP)
Prototyping top-level navigation will show how it will work on a real device
Easy and fast to change the Actions and their transition properties in the navigation editor

Navigation from Jetpack can link Actions to Destinations for one Activity. The Navigation Editor will only present the application workflow for that single Activity.
The Navigation Editor is not suitable for design systems where a transition between the source Destination’s layout and a target Destination’s layout is executed with the Toolbar (navigate from Activity to Activity)

Photo by Alvaro Reyes on Unsplash