AndroidX Navigation: An Introduction

[AndroidX Navigation]( is a powerful library that simplifies the implementation of navigation in Android apps. It provides a declarative way to define and handle navigation between different screens or destinations within an app. In this article, we will explore the basics of AndroidX Navigation and learn how to use it with the navigation-fragment-ktx version 2.5.3.

Gradle Setup

To start using AndroidX Navigation in your project, you need to add the necessary dependencies to your build.gradle file. Open the build.gradle (Module: app) file and add the following lines:

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

Make sure to sync your project after adding the dependencies.

Navigating Between Destinations

Destinations represent individual screens or fragments in your app. The navigation-fragment-ktx library provides extension functions that simplify the navigation process. Let's say we have two fragments, HomeFragment and DetailsFragment, and we want to navigate from the home screen to the details screen.

First, define a navigation graph in an XML file (nav_graph.xml) under the res/navigation directory:

<navigation xmlns:android="
    xmlns:app="
    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.HomeFragment"
        android:label="Home">
        <action
            android:id="@+id/action_homeFragment_to_detailsFragment"
            app:destination="@id/detailsFragment" />
    </fragment>
    <fragment
        android:id="@+id/detailsFragment"
        android:name="com.example.app.DetailsFragment"
        android:label="Details" />
</navigation>

In the HomeFragment class, use the findNavController() extension function to get an instance of the NavController:

import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController

class HomeFragment : Fragment(R.layout.fragment_home) {

    // ...

    fun navigateToDetails() {
        val action = HomeFragmentDirections.actionHomeFragmentToDetailsFragment()
        findNavController().navigate(action)
    }
}

The HomeFragmentDirections class is automatically generated by the plugin based on the navigation graph. It provides type-safe arguments and actions for navigating between destinations. In this case, actionHomeFragmentToDetailsFragment() is the action we defined in the navigation graph.

To navigate from the home screen to the details screen, simply call the navigate() function with the action as the parameter.

Passing Arguments

AndroidX Navigation makes it easy to pass arguments between destinations. Let's say we want to pass a productId from the HomeFragment to the DetailsFragment.

In the nav_graph.xml, add an argument to the DetailsFragment:

<fragment
    android:id="@+id/detailsFragment"
    android:name="com.example.app.DetailsFragment"
    android:label="Details">
    <argument
        android:name="productId"
        app:argType="integer" />
</fragment>

In the HomeFragment, update the navigateToDetails() function to pass the argument:

fun navigateToDetails(productId: Int) {
    val action = HomeFragmentDirections.actionHomeFragmentToDetailsFragment(productId)
    findNavController().navigate(action)
}

Now, when calling navigateToDetails(productId), the productId argument will be passed to the DetailsFragment.

Handling Up Navigation

AndroidX Navigation simplifies the implementation of the Up button or back navigation. By default, the library handles the Up button based on the navigation graph hierarchy.

To enable the Up button in an activity, add the following code in the onCreate() method:

import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController

class MainActivity : AppCompatActivity(R.layout.activity_main) {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val navController = findNavController(R.id.nav_host_fragment)
        val appBarConfiguration = AppBarConfiguration(navController.graph)
        setupActionBarWithNavController(navController, appBarConfiguration)
    }

    // ...
}

This code sets up the ActionBar to display the Up button and handles the navigation based on the graph.

Conclusion

AndroidX Navigation is a powerful library that simplifies navigation in Android apps. It provides a declarative way to define and handle navigation between different destinations. In this article, we covered the basics of AndroidX Navigation and saw how to navigate between destinations, pass arguments, and handle Up navigation.

This is just a brief introduction to AndroidX Navigation. The library offers many more features like deep linking, conditional navigation, and more. I encourage you to explore the official documentation to learn more about AndroidX Navigation and its capabilities.

Happy navigating!