Getting Started With The Jetpack Navigation Component
Navigation has always been a key component in every app, however, it has presented many challenges for Android developers to ponder over. Common among these challenges is fragment transactions, up/back navigation, passing arguments between scenes safely and securely, managing the back stack of an app and many more. That is why in 2018 Google announced the Navigation Architecture Component library. The navigation component forms part of a collection of libraries, tools, and guides known as Android Jetpack which is aimed at making android app development easy and quick.
In this article, I will be presenting my experience using the Navigation Component as part of my learnings. Let’s start by getting an overview of exactly what the library does:
- It handles Fragment transaction
- Simplifies handling Up/Back navigation
- Handles deep linking to different parts of the app
- Allows us to pass arguments in a safe and secure way
- Handles back stack management in the app
- It simplifies testing navigation in the app
- Most of all it does all of this in a consistent way, which helps developers to follow Android’s principles of navigation.
This leads us to:
The Principles of Navigation
According to androids documentation on the principles of navigation, The Navigation component is designed to implement these principles by default, ensuring that users can apply the same heuristics and patterns in navigation as they move between apps. Let us take a look at each of these principles:
1. Fixed start destination
Every app has a fixed start destination. This is usually the first screen the user sees when they launch your app from the launcher. It is also the last screen they see when they click the back button before exiting your app. It is worth noting that apps that require login can have an exception to this rule since a user will usually not log in every time they are going to use your app.
2. Navigation state is presented as a stack of destinations
The navigation state of your app should be represented with a last in first out structure(LIFO). A typical navigation stack has the start destination at the bottom of the stack and the current destination at the top of the stack. Operations that change the navigation of the app should always operate at the top of the stack either by pushing a new destination to the top or popping the topmost destination from the stack.
3. Up and Back are identical within your apps tasks
The Up button in the ActionBar and the system Back button both work in the same way when navigating the history of screens a user has recently visited within your app. While the two buttons perform similar actions, it is important to note that only the Back button is used to navigate out of the app. The Up button, does not appear in the start destination of the app because it never exits the app (note that this is an effort to ensure consistency across android apps).
How to Navigate
Now that we have covered the principles of navigation, let’s see how we will implement this in a project that has one activity and fragments.
1. Adding the Navigation Component to the project
First, we need to add the navigation component to our project in the app’s build.gradle file.
dependencies {
implementation "android.arch.navigation:navigation-fragment- ktx:$version_navigation"
implementation "android.arch.navigation:navigation-ui- ktx:$version_navigation"
}2. Adding the Navigation Graph to the project
The navigation graph is a resource file that contains all your app’s destinations, and actions that a user can take to navigate from one destination to another. To add it:
right-click on the res directory in your project window and select New > Android resource file. The New Resource dialog appears. Select Navigation as the resource type and name the file navigation. This creates a navigation.xml file which serves as your navigation graph.
3. Put Navigation Host fragment in your Activity Layout.
Now go to your activity layout (eg. activity_main.xml) and include your container fragment. Give it an ID navHostFragment, set the name attribute the name of the fragment and the app:navGraph attribute to @navigation/navigation and then set defaultNavHost = true, this allows the navHost to intercept the system back key.
<fragment
android:id="@+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="@navigation/navigation"
app:defaultNavHost="true"/>4. Adding Fragments to the Navigation Graph
Now that your host fragment is set up, it is time to add fragments to it. This is has been made very simple by using the navigation editor. To do this, open the design view of your navigation editor, click on the little plus like button in the left corner, and from the list that appears, choose the destination you want to add to the navigation graph.
5. Connecting Two Fragments with an Action
To connect FragmentA and FragmentB, hover over FragmentA. You’ll see a circular connection point on the right side of the fragment view. Click on the connection point and drag it to FragmentB to add an Action that connects the two fragments.
6. Navigating from FragmentA to FragmentB using a Button
Now to navigate between these two fragments using a button, set an onClick listener on the button and then using the Navigation’s onClick listener to implement it as follows.
binding.button.setOnClickListener(
Navigation.createNavigateOnClickListener(R.id.action_FragmentA_to_FragmentB))And with this, you should successfully navigate from one fragment to another.
To further read on this topic, here are the reference materials I used:
