Select Page

Android Jetpack – How to Develop an Application Using Navigation Component?

What is Android Jetpack?

Android Jetpack is a set of components, tools, and guidance to make great Android apps. We can use it by adding Androidx namespace into our project which comprises of Android Jetpack Libraries. They are highly useful to develop apps with the latest features and make them more useful and attractive.

Android Jetpack comes with five new components:

  1. WorkManager alpha release
  2. Navigation alpha release
  3. Paging stable release
  4. Slices alpha release
  5. Android KTX (Kotlin Extensions) alpha release

What is Navigation?

Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app using a single activity and multiple Fragments. In place of using different activities, we can use Fragments in main_activity to reduce the complexity of an application. Works like intent; we can also pass data between destinations.

Example: Navigation Drawer, by clicking a button to go to different fragment, app bars, etc.

Three Key Parts:

  • Navigation-Graph:

It is 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

  • NavHost:

It is an empty container that displays destinations from your navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.

  • NavController:

It is 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.

Benefits of Navigation Component:

  • 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.
  • ViewModel support – you can scope a ViewModel to a navigation graph to share UI-related data between the graph’s destinations.

Here are the steps to Implement Navigation Component: (For J)

First of all, add the dependency in the application module Gradle file (build.gradle).

dependencies

Create a Navigation Graph:

To create a navigation graph, go to App>>res, right-click on res and make new Android Resource Directory and set the File name as “navigation” and set resource type as navigation. Now there will be a new folder named navigation. Right-click on the folder; make a new Navigation Resource File named “navigation_graph”. Now you can see in the screenshot that .xml file is generated.

project_list

Open nav_graph.xml

open nav_graph

Navigation Graph includes 3 sections – Destination, Graph and Attributes.now, NavHost main activity. Which will be a single activity. By adding this code into activity_main.xml we can host activity.

activity_main_xml

  • app:navGraph: defines which Navigation Graph will be associated with the Navigation Host
  • app:defaultNavHost=”true”: ensures that the Navigation Host intercepts the system back button when pressed.

Now, we can see the Top first icon in Graph toolbar using which we can add new fragments and placeholders.

Click on create a new destination and you can create new fragments.

new_placeholder

Make at least two fragments. First Home Fragment will be Fragment and another will be the destination. Here we can see 3 fragments- Start fragment, Second fragment, and Third fragment.

Home Fragment

start_fragment.xml

navigation_graph_xml

navigation_graph_xml2

Second_fragment.xml

second_fragment_xml

Third_fragment.xml

third_fragment_xml

Now add action between fragments for navigation by dragging an arrow from one fragment to another fragment.

start_third_action

start_second_action

In start_fragment, write this java code to perform the navigation action

start_fragment_java

NavController manages app navigation within the NavHost. We pass the action id inside the createNavigateOnClickListener method.

Second_fragment.java

second_fragment_java

Third_fragment.java

third_fragment_java

navigateUp() is used to return to the previous fragment.

Output:

fragment1
fragment2
fragment3

 

 

 

 

 

 

 

graph_ss

Conclusion

As we came to the end of this tutorial, we hope it was helpful enough. Android Jetpack navigation Component is an easy to use solution to create a navigation plan in your app. We tried our best to show you every step clearly and we hope it was useful enough. We hope after this tutorial, you will be able to integrate the navigation component in Android Jetpack. (Metizsoft Solutions)

If you want to read or refer to other tutorials for the navigation component, you can check out these links:

Android Jetpack – How to Develop an Application Using Navigation Component?

Hardik Dabhi

Hardik Dabhi is an expert developer knowing the Android app development inside out. He is a deep thinker and prefers to do his work with great perfection. He is creative and always comes up with great new ideas. He specializes in designing applications for the Android marketplace!