Welcome Navigation Architecture Component — Jetpack 🧨(Part-1)

Powered by Android Jetpack (Google I/O 18 and soon in I/O 19)

Business photo created by master1305

Being an android developer we mostly interact with fragments and we make sure to implement one activity architecture.

Why do we need to use fragments?

Quoted Mihaly Nagy: I asked myself and others about why do we use fragments. Almost everyone replied: “it’s in the Android framework and everyone else is using them”.

Soon, I started to research and try out different approaches and come to the conclusion of:

Fragments play an important role while developing multi-pane UI or reuse it in multiple activities. Fragments have their own lifecycle and events that make them robust and useful to build dynamic UI.

In our apps, we navigate through activities or fragments by either intents or fragment transactions. Even more, further complex navigation can be found when dealing with bottom navigation or navigation drawer. Further down the line Google introduced the Navigation architecture component and added it in Android Jetpack.

Navigation Lessons:

• Navigation Lesson 01: Welcome Navigation Architecture Component — Jetpack 🧨(Part-01)(present here)
• Navigation Lesson 02: Basic implementation of Navigation Architecture Component — Jetpack 🧨(Part-02)
• Navigation Lesson 03: Bottom navigation using Navigation Architecture Component — Jetpack 🧨(Part-03) (coming soon)

What is Jetpack? Why should I use it?

According to official documentation

Jetpack is a suite of libraries, tools, and guidance to help developers write high-quality apps easier. These components help you follow best practices, free you from writing boilerplate code, and simplify complex tasks. It comprises the androidx.* package libraries, unbundled from the platform APIs.

Android Jetpack

Navigation component is a collection of libraries and plugins that are used to simplify Android navigation and now they are part of Android X.

Navigation Component

Note: We’ll discuss step by step guidelines on Navigation, Navigation building block, Argument passing, Actions and SafeArgs.

Navigation allows the user to move from one screen to another and back out to a different one. Navigation component works best with single activity architecture and it can provide a visual representation of the navigation flow. Furthermore, users can benefit from ViewModel and Lifecycle including the handling of fragment transition complexity.

Brief intro of Navigation component

Navigation Component is a simple API that provides multiple functionalities such as:

• Simplified setup for common navigation pattern
• Handles back stack
• Automatic handling of fragment transactions
• Safe Args
• Handles transition animations
• Simplified deep linking

The basics when implementing Navigation

* Navigation Graph

The Navigation Graph is an XML resource type. It includes a visual editor that allows drag & drop representation of fragment. It also contains all the navigation-related information.

Navigation graph editor

The screens are called destinations or where you want to move. You can click on the screen to get options like deep link URL and launch options.

The arrows represent the action that defines the navigation route. When clicking on the arrow you’ll get several options including animation transition, defining destination, backstack manipulation and data passing between destinations. You can also define an entry point [HOME] through directly in this graph.

All of the visualizations above are also available in XML too:

Nav Graph XML snippet

* Navigation Host Fragment

The Navigation Host fragment is a widget or screen that provides hosting to your navigation graph. This means that all of the defined navigation in the navigation graph is run on it.

You need to define nav. host fragment in an Activity in the following way:

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

* Navigation Controller

The Navigation controller is an object that controls the whole flow of the navigation graph. It also keeps track of the current position and it also takes instructions on where to navigate and what actions need to be followed from the ones defined in the graph.

To navigate programmatically we would run the following code:

findNavController().navigate(R.id.action_registrationFragment_to_firstFragment)

R.id.action_registrationFragment_to_firstFragment is action ID defined in the nav graph.

Navigation fragment

Let’s have a look at the different actions available

• app:destination: defines the place where it will navigate to.
• app:popUpTo: In navigation components, we can’t access the fragment transition directly or addToBackStack cause it’s abstracted. popUpTo defines where to navigate after pressing the back button.
• app:popUpToInclusive: It requires aboolean value, true means that it will pop out the previous destination after navigating to another one.

Navigation Controller will use the navigation host fragment to show the appropriate screen or destination.

We’ve learned the routing using the navigation controller. We can further improve this by using SafeArgs plugin which is recommended by android.

What is SafeArgs Plugin?

The navigation component has a Gradle plugin called SafeArgs. It generates the classes based on the navigation graph and makes navigation type-safe as well as argument passing.

It creates two types of classes:

• Direction classes
• Argument classes

SafeArgs classes

Now, let’s check some of the generated code from the plugin:

• Navigation

findNavController().navigate(RegistrationFragmentDirections.actionRegistrationFragmentToFirstFragment())

• Argument Passing

Wrong type passing won’t compile the code

findNavController().navigate(RegistrationFragmentDirections.actionRegistrationFragmentToFirstFragment().setWelcomeFlag(
    true
))

Receiving the argument

val flag: RegistrationFragmentArgs by navArgs()
falg.welcomeFlag // getting argument data

I hope this article was useful to cover the basic questions regarding Navigation components and explore the benefits behind it. Follow me on twitter for more updates.

Ali Azaz Alam

Thanks for spending your time reading this article. 👏 and share if you’ve enjoyed it.

Connect with me on my socials and become my friend Medium, Github and LinkedIn.