How to Implement Navigation in Kotlin Apps

Implementing Navigation Component in a Kotlin-based Android application makes managing in-app navigation much easier and more scalable. This guide will walk you through the setup, configuration, and usage of Navigation Component with full Kotlin code examples.

What is Navigation Component?

Navigation Component is part of Android Jetpack, designed to simplify the implementation of navigation between fragments. It also supports animations, deep linking, and passing arguments between destinations.

Step 1: Add Required Dependencies

Include the following dependencies in your build.gradle (app level):

dependencies {
    def nav_version = "2.7.5"
    implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
    implementation("androidx.navigation:navigation-ui-ktx:$nav_version")
}

Also, make sure to apply the Safe Args plugin:

plugins {
    id("androidx.navigation.safeargs.kotlin")
}

Step 2: Create Navigation Graph

Inside your res/navigation folder (create one if it doesn’t exist), create a new XML file nav_graph.xml.

<?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"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.app.FirstFragment"
        android:label="First Fragment">
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment" />
    </fragment>

    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.app.SecondFragment"
        android:label="Second Fragment" />
</navigation>

Step 3: Set Up NavHostFragment in Activity Layout

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

Step 4: Navigating Between Fragments

From FirstFragment.kt, navigate to SecondFragment using:

findNavController().navigate(R.id.action_firstFragment_to_secondFragment)

To safely pass arguments using Safe Args:

val action = FirstFragmentDirections.actionFirstFragmentToSecondFragment()
findNavController().navigate(action)

Step 5: Handle Up Navigation in Activity

In your MainActivity.kt:

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return navController.navigateUp() || super.onSupportNavigateUp()
}

External Resource

For more advanced patterns, check the official Android Navigation Component guide.