Creating a Navigation Graph Using Android Navigation with XML

The Android Navigation Component simplifies the implementation of navigation in Android applications. By using a navigation graph, you can define the app’s navigation paths in a structured and visual way. This blog post will guide you through creating a navigation graph using XML, outlining the key steps and components involved.

What is Android Navigation?

The Android Navigation Component is part of Android Jetpack, providing a framework for structuring in-app navigation. It offers features like handling fragment transactions, managing the back stack, and providing a visual tool for designing navigation flows.

Why Use a Navigation Graph?

• Centralized Navigation: Defines all navigation paths in one place.
• Visual Design: Provides a graphical editor to visualize navigation flows.
• Back Stack Management: Simplifies handling the back stack.
• Deep Linking: Supports creating deep links into specific parts of the app.
• Animations and Transitions: Easy implementation of transitions between destinations.

How to Create a Navigation Graph Using XML

Creating a navigation graph involves defining destinations and actions using XML, which you can then visually manage within Android Studio.

Step 1: Add Navigation Dependencies

First, add the necessary dependencies to your build.gradle file:

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

    // For Kotlin projects with coroutines
    implementation("androidx.navigation:navigation-runtime-ktx:2.6.2")

    // Testing Navigation
    androidTestImplementation("androidx.navigation:navigation-testing:2.6.2")

    // Jetpack Compose Integration
    implementation("androidx.navigation:navigation-compose:2.6.2")
}

Step 2: Create a Navigation Resource Directory

In the res directory, create a new resource directory named navigation. You can do this by right-clicking on the res folder, selecting ‘New’ -> ‘Android Resource Directory’, and then choosing ‘navigation’ as the resource type.

Step 3: Create a Navigation Graph XML File

Inside the navigation directory, create a new XML file, such as nav_graph.xml. Right-click on the navigation directory, select ‘New’ -> ‘Navigation Resource File’, and name it nav_graph.

Step 4: Define the Navigation Graph

Open the nav_graph.xml file and define your navigation graph. Here’s an example:

<?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.example.navigationdemo.HomeFragment"
        android:label="HomeFragment"
        tools:layout="@layout/fragment_home">
        <action
            android:id="@+id/action_homeFragment_to_detailFragment"
            app:destination="@+id/detailFragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right"/>
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.navigationdemo.DetailFragment"
        android:label="DetailFragment"
        tools:layout="@layout/fragment_detail">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>

</navigation>

Explanation:

• <navigation>: The root element for the navigation graph.
• android:id: A unique ID for the navigation graph.
• app:startDestination: Specifies the starting destination.
• <fragment>: Defines a fragment destination.
  • android:id: A unique ID for the fragment.
  • android:name: Fully qualified class name of the fragment.
  • android:label: Label for the fragment (used in titles).
  • tools:layout: Specifies the layout file for the fragment.
  • <action>: Defines a navigation action to another destination.
    • android:id: A unique ID for the action.
    • app:destination: ID of the destination to navigate to.
    • app:enterAnim, app:exitAnim, app:popEnterAnim, app:popExitAnim: Animation resources for transitions.
  • <argument>: Defines an argument that can be passed to the destination.
    • android:name: The name of the argument.
    • app:argType: The type of the argument.

Step 5: Integrate Navigation Graph into Activity

In your Activity’s layout, add a NavHostFragment:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation:

• <androidx.fragment.app.FragmentContainerView>: A container for hosting the navigation graph.
• android:name="androidx.navigation.fragment.NavHostFragment": Specifies that this container will host the navigation graph.
• app:defaultNavHost="true": Intercepts system back button presses.
• app:navGraph="@navigation/nav_graph": Links the navigation graph XML file to this container.

Step 6: Navigate Between Fragments

In your fragments, use the NavController to navigate between destinations:

import androidx.navigation.fragment.findNavController
import android.os.Bundle
import android.view.View
import androidx.fragment.app.Fragment
import com.example.navigationdemo.databinding.FragmentHomeBinding

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

    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        _binding = FragmentHomeBinding.bind(view)

        binding.buttonNavigate.setOnClickListener {
            findNavController().navigate(R.id.action_homeFragment_to_detailFragment)
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

In the DetailFragment, retrieve arguments if any:

import android.os.Bundle
import android.view.View
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.navArgs
import com.example.navigationdemo.databinding.FragmentDetailBinding

class DetailFragment : Fragment(R.layout.fragment_detail) {

    private val args: DetailFragmentArgs by navArgs()
    private var _binding: FragmentDetailBinding? = null
    private val binding get() = _binding!!

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        _binding = FragmentDetailBinding.bind(view)

        val itemId = args.itemId
        binding.textViewDetail.text = "Item ID: $itemId"
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

Advanced Navigation Features

Here are some advanced navigation features that enhance the navigation graph:

Passing Data Between Destinations

You can pass data between destinations using arguments. Define the arguments in the navigation graph and access them in the destination fragment using navArgs().

Deep Linking

Deep linking allows users to navigate directly to a specific destination from outside the application. To set up deep linking, add a <deepLink> tag to the destination in the navigation graph.

<fragment
    android:id="@+id/detailFragment"
    android:name="com.example.navigationdemo.DetailFragment"
    android:label="DetailFragment"
    tools:layout="@layout/fragment_detail">
    <argument
        android:name="itemId"
        app:argType="integer" />
    <deepLink app:uri="www.example.com/details/{itemId}" />
</fragment>

Navigation Drawer and Bottom Navigation

The Navigation Component can be easily integrated with Navigation Drawers and Bottom Navigation views. Use the setupWithNavController method to link these UI elements with the NavController.

Conclusion

Creating a navigation graph using XML is a straightforward and effective way to manage navigation in Android applications. By following the steps outlined in this guide, you can define destinations, actions, and arguments in a structured and visual manner, resulting in a more organized and maintainable codebase. Utilizing advanced features like deep linking and integration with UI elements further enhances the navigation experience for users.