Android Navigation Component

Navigation is one of the core concepts to master if you are working on any Android app that has a complex navigation system. Properly handled navigation also helps to reduce any security flaws in your app through the implementation of functions like authenticating the user before navigating to any sensitive content in the app or preventing any sensitive information from being shared with other apps on the device.

There have been constant improvements to the navigation system used in Android over the past year, and this has introduced a lot of new concepts.

In this article I have covered the latest Android navigation component recommended for Navigation. 😀😀

Flow of this article:

1. What and why of Android Navigation Component
2. Gradle plugins
3. Implementation : By creating an Android App

First thing first : What is Android Navigation Component, what problems it solves and why should we use it?

Android Navigation Component is a suite of libraries, tooling and guidance for in-app navigation. Jetpack’s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer.

3 main parts of Navigation component:

1. Navigation graph: An XML resource that contains all navigation-related information in one centralized location. This includes all of the individual content areas within your app, called destinations, as well as the possible paths that a user can take through your app.
2. NavHost: An empty container that displays destinations from your navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.
3. NavController: An object that manages app navigation within a NavHost. The NavController orchestrates the swapping of destination content in the NavHost as users move throughout your app.

Other benefits:

The Navigation component provides a number of other benefits, including the following:

• Handling fragment transactions.
• Handling up and back actions correctly by default.
• Providing standardized resources for animations and transitions.
• Implementing and handling deep linking.
• Including Navigation UI patterns, such as navigation drawers and bottom navigation, with minimal additional work.
• Safe Args — a Gradle plugin that provides type safety when navigating and passing data between destinations.

Navigation component makes the app fast by implementing single activity app

Gradle plugins

App Gradle file

Lets Navigate

App : Simple Navigation app to demonstrate how Android Navigation Works

Components of App:

1. The application contains 3 fragments as screens
2. Main Activity
3. Navigation Graph
4. Actions
5. Navhost Fragment
6. Nav Controller

Fragment1

Fragment2

Fragment3

NavGraph : How to create

Steps:

1. Create a new resource directory named “navigation”
2. Create a navigation resource file “my_nav.xml”

Now define navigation destinations and actions

Steps:

1. Drag and drop all three created fragments in design view of my_nav.xml file
2. Hover each fragment and decide your connections by actually making connections
3. Make sure points 4, 5, 6, 7 have assigned safely
4. android:id: unique id for the fragment, just like we are assigning id to any other widgets in xml layout
5. android:name: It is the fully qualified name of your fragment class in kotlin/java
6. android:label: A string to identify the fragment
7. tools:layout: An id of layout resource file from res/layout

Navigation Editor : and nav graph code

To make all this work we have to add Navhost Fragment in our main “activity_main.xml”

<fragment
    android:id="@+id/fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/my_nav"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

1. This is a layout for an activity. It contains global navigation, including a bottom nav and a toolbar
2. android:name="androidx.navigation.fragment.NavHostFragment" andapp:defaultNavHost="true" connect the system back button to the NavHostFragment
3. app:navGraph="@navigation/my_nav" associates the NavHostFragment with a navigation graph. This navigation graph specifies all the destinations the user can navigate to, in this NavHostFragment

activity_main.xml looks like as below

NavigationController

NavController is powerful because when you call methods like navigate() or popBackStack(), it translates these commands into the appropriate framework operations based on the type of destination you are navigating to or from. For example, when you call navigate() with an activity destination, the NavController calls startActivity() on your behalf.

Few ways to get NavigationController

• Fragment.findNavController()
• View.findNavController()
• Activity.findNavController(viewId: Int)

Finally we are at the end. We don’t need to write any code in MainActivity , all our code resides in fragments 💥💥

setOnClickListeners on buttons of fragments to navigate as described in code below

FirstFragment.kt

SecondFragment.kt

ThirdFragment.kt

Now run the app and enjoy navigation 😀😀

Congratulations 🎇🎇🎇🎇🎇

We have successfully created our app and understood android navigation component. Cheers 🍻 🍻

https://developer.android.com/guide/navigation/navigation-getting-started

About me 😀

I am Anubhav Kumar Rao. I am a member of App Development wing, GeekHaven at Indian Institute of Information Technology, Allahabad. I am an Android developer and a full stack web developer. Reach me on Github, LinkedIn, Facebook