December 10, 2019 3405

From this Android navigation component tutorial, you will know:

What is Android jetpack’s navigation component?

Benefits of the navigation component

When to use navigation component

How to implement Android navigation component in your application

You must be hearing a lot about Android Jetpack, which is a set of components, tools and guidance to make great Android apps.

When it comes to talking about Android components, they are highly useful for Android developers while developing an app.

Components like Coroutine and Live Data, Data Binding, Paging, ViewModel, Security, Sharing, WorkManager for background jobs, and Navigation are the collection of libraries that are individually adaptable and built to work together. Among these components, WorkManager, Navigation and Paging are the new ones. Therefore, we are covering tutorials on these new components. Earlier, we covered WorkManager and now here we are covering Navigation.

But do you know what navigation is? What are the benefits of it? When to use this component? How to implement it in the Android app? Let us answer all these questions one-by-one.

What is Navigation?

Generally, navigation refers to the interactions, allowing users to navigate across, into and back out from different pieces of content within your application.

The newly launched Android Jetpack’s Navigation component is launched as a framework for structuring your in-app UI, focusing on making a single activity app. From simple button clicks to complex patterns like app bars and the navigation drawer, this component helps to implement navigation.

Moreover, this component also ensures a consistent and predictable user experience by adhering to an established set of principles. It consists of three parts that are described as follow:

Navigation Graph: It is an XML resource, which has all the information related to navigation in one centralized location. It comprises all the individual content areas within your app known as destinations.

NavHost: An empty container, showing destinations from the navigation graph. This component contains a default NavHost implementation, NavHostFragement that shows fragment destinations.

NavController: A single object which manages app navigation within a NavHost.

Moving ahead, let’s discuss the benefits of Android Jetpack’s Navigation component.

Benefits of Android Navigation Component

It handles fragment transactions easily with its available API

It allows checking the flow of application through navigation graph

Provide standardized resources for animations and transitions

It implements and handles deep linking

It handles Up and Back actions correctly by default

To know about this component, you can refer to this Android development guide that is released by Google. In our Android app development tutorial, you will learn how to implement the Navigation component in your Android application.

Let’s Get Started

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

dependencies { def nav_version = "2.1.0" // navigation implementation "androidx.navigation:navigation-fragment-ktx:$nav_version" implementation "androidx.navigation:navigation-ui-ktx:$nav_version" }

Step 2: In the Project or Android Window, Right-click on the res directory and create a new Android Resource Directory with Resource Type As Navigation and Add new Navigation Resource File and name it whatever you want, this way your navigation graph will be created.

Your navigation graph will contain mainly 3 sections.

Destinations panel : Lists your navigation host and all destinations currently in the Graph Editor .

Graph Editor : Contains a visual representation of your navigation graph. You can switch between Design view and the underlying XML representation in the Text view.

Design Text Attributes : Shows attributes for the currently-selected item in the navigation graph.

Click the Text tab to see the corresponding XML of the Navigation Graph

Step 3: Now, take one fragment in your MainActivity in which you want to navigate to other fragments.

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

Step 4: Now, create one other blank fragment to Navigate from Home Fragment to newly created fragment.

Step 5: Now, add both the fragments into Navigation Graph as shown in the figure.

You can add Action, Arguments and Deep-link from Navigation itself, which will help to pass the data between Fragment while Switching. As shown in the figure.

All the Actions will define the transition and destination, in short, the route of the application through navigation. Arguments will define the default value to a particular key and Deeplinks will forward the user to a particular screen within the app.

Step 6: Now, in the Home Fragment, do the following code to your corresponding view’s on click event to navigate to the next fragment.

class HomeFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { val view = inflater.inflate(R.layout.fragment_home, container, false) if (view != null) { init(view) } return view } private fun init(view: View?) { view?.findViewById(R.id.tvShowAll)?.setOnClickListener { // val bundle = bundleOf("userText" to "John Connor") Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_allFragment) }

view?.findViewById(R.id.tvShowBikes)?.setOnClickListener { val bundle = bundleOf("userText" to "Jack Sparrow") Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_bikesFragment, bundle) } view?.findViewById(R.id.tvShowCars)?.setOnClickListener { Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_carsFragment) } view?.findViewById(R.id.tvShowTrucks)?.setOnClickListener { Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_trucksFragment) } } }

Step 7: After adding 3-4 fragments in your project and adding all of them into the navigation graph, your navigation graph’s design will look something like this.

And the text (XML) file of your Navigation Graph will look something like this.

<?xml version = "1.0" encoding= "utf-8" ?> <navigation xmlns:android= "http://schemas.android.com/apk/res/android" xmlns: app = "http://schemas.android.com/apk/res-auto" xmlns:tools= "http://schemas.android.com/tools" android:id= "@+id/nav_graph" app :startDestination= "@+id/homeFragment" > <fragment android:id= "@+id/homeFragment" android:name= "com.spaceo.testconfirm.navigationgraphdemo.Views.HomeFragment" android: label = "fragment_home" tools:layout= "@layout/activity_home" > <action android:id= "@+id/action_homeActivity_to_carsFragment" app :destination= "@id/carsFragment" app :popEnterAnim= "@anim/nav_default_pop_enter_anim" app :popExitAnim= "@anim/nav_default_pop_exit_anim" app :popUpTo= "@id/carsFragment" /> <action android:id= "@+id/action_homeActivity_to_allFragment" app :destination= "@id/allFragment" app :enterAnim= "@anim/nav_default_enter_anim" app :exitAnim= "@anim/nav_default_exit_anim" app :popUpTo= "@id/allFragment" >

<argument android:name= "userText" app :argType= "string" android:defaultValue= "Hello World 2" /> </action> <action android:id= "@+id/action_homeActivity_to_bikesFragment" app :destination= "@id/bikesFragment" app :popUpTo= "@id/bikesFragment" /> <action android:id= "@+id/action_homeActivity_to_trucksFragment" app :destination= "@id/trucksFragment" app :popUpTo= "@id/trucksFragment" /> </fragment> <fragment android:id= "@+id/bikesFragment" android:name= "com.spaceo.testconfirm.navigationgraphdemo.Views.BikesFragment" android: label = "fragment_bikes" tools:layout= "@layout/fragment_bikes" > <argument android:name= "userText" app :argType= "string" android:defaultValue= "Hello World3" /> </fragment> <fragment android:id= "@+id/carsFragment" android:name= "com.spaceo.testconfirm.navigationgraphdemo.Views.CarsFragment" android: label = "fragment_cars" tools:layout= "@layout/fragment_cars" > <argument android:name= "userText" app :argType= "string" android:defaultValue= "Hello World1" /> </fragment> <fragment android:id= "@+id/trucksFragment" android:name= "com.spaceo.testconfirm.navigationgraphdemo.Views.TrucksFragment" android: label = "fragment_trucks" tools:layout= "@layout/fragment_trucks" /> <fragment android:id= "@+id/allFragment" android:name= "com.spaceo.testconfirm.navigationgraphdemo.Views.AllFragment" android: label = "fragment_all" tools:layout= "@layout/fragment_all" > </fragment> </navigation>

Output:

Conclusion

From this tutorial, you learnt to implement Android jetpack’s navigation component in your Android application. However, you also checked the basic information about this component like what it is and the benefits of this component.

Following this step-by-step tutorial, you can implement the Android navigation component without any hassle. In fact, you can refer to this demo and download the source code from Github.

In any case, if you have any query on implementing this Android navigation component in your app or want to develop an Android app with exclusive features and functionalities, get in touch with us through our contact us form. One of our sales representatives will get back to you shortly to answer your queries.

You may also like,

This page was last edited on September 25th, 2020, at 9:52.