Overview of Navigation in Android Architecture Components

Navigation basically in mobile development refers to the interaction between different screens or pieces of contents within the application. Android Jetpack's architecture Component the Navigation is so powerful, providing a consistent and predictable user experience. The navigation component helps to implement the Navigation between activities and fragments or chunks of the data in the application by simple button clicks. In this article, it's been discussed from Navigation key properties to implementing sample Navigation between the fragments.

Three key properties of Navigation are:

1. Navigation Graph: This is the XML file containing all of the individual content areas, within the applications called destinations. These may be possible paths that users may take through the application.
2. NavHost: This is the XML file which is an empty container that displays the destinations as the user navigates, an. This basically contains the NavHostFragment, which displays the various destinations from Navigation Graph.
3. NavController: NavController is an object which manages the navigation of destinations with NavHost. This controls the swapping of destination content as the user navigates through the destinations through the application.

Benefits that developers get from Navigation Component are:

• Navigation Component handles the Fragment transaction.
• Handling Up and back actions, basically handling the Backstack.
• Provides standardized animation and transitions while switching the content of the NavHost.
• Easy handling and implementation of deep linking.
• Easy handling and implementation of Navigation UI patterns such as Navigation Drawer or Bottom Navigation Views etc.
• Safe Args, a Gradle plugin that provides type-safe data transfer between the destinations.
• Navigation Component also supports ViewModel. Can scope a view model to navigation graph to share UI related between destinations.

Step by Step Implementation

Note: Navigation Component requires Android Studio version 3.3 or above

Step 1: Create an empty activity project

Create an empty Activity Android Studio Project. Refer to Android | How to Create/Start a New Project in Android Studio?

Select Kotlin as the programming language.

Step 2: Adding the required dependencies

Following are the dependencies, need to be invoked inside Gradle Scripts > build.gradle.kts(Module :app).

dependencies {
 ...
 implementation ("androidx.navigation:navigation-fragment-ktx:2.8.9")
 implementation( "androidx.navigation:navigation-ui-ktx:2.8.9")
}

Step 3: Creating the first property of the Navigation Component

Creating the Navigation component Graph, which contains all the destinations. To create a Navigation Graph XML file right-click on the res folder and goto New > Android Resource File. This step is demonstrated in the below image.

Now give the name for the home fragment as navigation_graphs and select the Resource Type as Navigation and click on the OK button. This step is demonstrated in the below image.

Now create a new fragment by clicking on the + icon shown in the editor and select "Create New Destination" then blank fragment and click next. Now give the fragment name as fragment_1. This step is demonstrated in the below video

Now by following the previous step creates another fragment named fragment_2. Now add the Navigate button to fragment_1.xml file, as when it is clicked navigates to fragment_2. To implement the UI invoke the following code inside the fragment_1.xml file.

Now to differentiate between also make the UI changes inside the fragment_2.xml file. To implement the changes invoke the following inside fragment_2.xml file.

Step 4: Adding actions to navigate from fragment 1 to fragment 2

From the navigation_graphs.xml under the design section drag and drop the arrow from fragment 1 to fragment 2. And then popUpTo fragment 1, as when the user clicks on the back button the user needs to be navigated to fragment 1. Refer to the following video if unable to get this step.

popUpTo pops the fragments to specified fragments from the backstack if the user presses the back button.

navigation_graphs.xml:

Step 5: Handle the button click from fragment 1

Handle the button click from fragment 1 to navigate to fragment 2. To implement the same invoke the following code inside fragment_1.kt file.

fragment_1.kt:

Step 6: Working with activity_main.xml

Now the in activity_main.xml, there is a need to host the start fragment, that is fragment 1. To implement the same invoke the following code inside the activity_main.xml file.

activity_main.xml:

Output:

The output looks odd and adding animations makes it look sleek. Follow the video given below to add animations to fragment transitions.