Navigation Component: Simplify Navigation with Kotlin and Jetpack

The article introduces the Navigation Component, as well as its key elements and classes. Navigation components are extremely useful for implementing and visualizing correct navigation in mobile applications. It handles complex navigation in the simplest way.

In the world of android development Navigation refers to the interaction that allows users to navigate across the different pieces of information and pages within the mobile application. Historically, it was accomplished through user interaction in the fragment transaction, such as clicking a button.

However, if you want to make some complex transactions, such as bottom navigation where you are required to take care of the right navigation path, highlighting the correct button, and need to handle the back-stack uniformly in such cases, the Navigation Component plays an important role in handling complex situations.

What is a Navigation Component?

The navigation component is a collection of libraries, tools, and plugins for uniform and smooth navigation.  Navigation Architecture Component simplifies implementing navigation regardless of the app complexity.

Android Jetpack provides a set of tools, libraries, and architectural guidelines that help to build quality Android applications faster. The Navigation component is the latest library introduced by Android Jetpack.  

Benefits of the navigation component

1. Visualize and edit your application navigation flow
2. Automates fragment transaction
3. Handles back and forth navigation by default
4. Sets animation and transitions by default
5. Simplifies deep linking
6. Easily Implement navigation UI patterns
7. Enforce type safety when passing information while navigating through different fragments.

Most importantly it provides built-in support for fragments and activities. Also, the libraries can be extended to work with custom destinations and variant screens.

If you are planning to build an Android application with Kotlin then Navigation Component can be used for in-app navigation.

Main players of Navigation Components

There are three major players of Navigation components: Navigation graph, Nav Host Fragment, and Nav Controller.

• Navigation Graph

A navigation graph is an XML file that can be generated programmatically or inflated from the layout. The file contains navigation-related information that can be visualized in the navigation editor (Available in Android Studio 3.3).

Each of the screens in the Navigation editor is called a destination. These destinations are connected using arrows called actions.

Destination stores information regarding deep linking, URLs, and launch options while arrow encapsulates a bunch of information such as transition animation, back stack manipulation, etc.

Navigation Graph

• Nav Host Fragment

The nav host fragment is a special widget that you add to your layout if you want to do fragment navigation. It is essentially a window that shows various destinations from your Navigation graph.

Nav Host Fragment

• Nav Controller

Nav controller manages navigation within nav host fragment by interacting with nav graph. It is the object that can be used in Kotlin or Java code that is responsible for navigation. It orchestrates swapping destination information placed in the nav host fragment as you move through the navigation graph.

Nav Controller object

The basic way to perform the navigation action through the nav controller is by using the action’s XML ID to specify the particular actions to follow.  But there is a better way to pass safe arguments in the navigation component using Safe Args.

Safe Arg Plugins: Type safety

The navigation component includes a Gradle plugin, called safe args, which generates simple objects and classes for type-safe navigation graphs to ensure type-safe access to the argument for safe navigation to destinations via actions.  

Safe Args Direction classes

Use safe args direction classes to navigate in a type-safe manner. You can navigate here with or without arguments. It is generated for each distinct destination using the actions.

It assists you in ensuring that,

• You have an action that is correctly associated with the destination.
• Type safety while setting argument of the action

Navigation UI library and Navigation-UI-KTX: Setting up bottom navigation

The Navigation Component includes Navigation UI class in Java and navigation-ui-ktx Kotlin extension that have support for options menu, bottom navigation, navigation view, and navigation drawer. Also, it supports the action bar, toolbar, and collapsing toolbar.

Navigation UI has static methods that associate menu items with navigation destination and navigation-ui-ktx is a set of extension functions that provides the same functionality as Navigation UI.

Navigation UI with an option menu

The simplest implementation of  Navigation UI is using it for options menu setup. You can create an XML menu with ids of the destination and the navigation graph that you will need to go at the bottom navigation.

Navigation UI to configure bottom navigation

If you have two or three bottom navigation bars and need to quickly navigate to different destinations via direct access. The XML layout code to implement bottom navigation is already present in your code. To use Navigation UI for bottom navigation, you must first configure the bottom navigation menu using the nav controller.

Navigation UI to configure Navigation Drawers

Navigation UI is also used to configure side navigation and the navigation drawer that includes handling the ActionBar. This is useful if the screen is too short for bottom navigation.

Overall, Navigation Component helps to minimize errors in complex navigation and helps to deliver a smooth navigation experience.

Simplify your app development with DhiWise

Building an Android application has never been easy for a developer; numerous challenges necessitate additional effort and time. DhiWise allows developers to build applications more quickly by automatically generating code with minimal input.

Further, it provides different features for faster and clean application development so that developers can concentrate on more difficult tasks.

DhiWise supports a variety of popular application development technologies, including Node.js, MongoDB, Kotlin, and React.js (Coming soon). Developers can use Kotlin with the different library support to simplify app development.

Developers can take advantage of the modern UI development toolkit that includes navigation components through Google’s latest material design components support(Available with DhiWise).

Start your android application development with DhiWise today.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.