Navigation Component for Kotlin: Complete Guide with Examples

What is Navigation Component and why is it needed

Navigation Component is a library from Google for Android, designed to simplify navigation between screens (fragments, Activities, dialogs) in Kotlin and Java applications. It is part of Android Jetpack and provides a unified, predictable way to manage transitions, handle arguments, and work with the "Back" button.

Why is it needed? Without Navigation Component, developers often wrote a lot of boilerplate code: creating FragmentManager, handling BackStack, passing data via Bundle, and tracking transition states. The library solves these problems by offering:

\n
• Visual navigation editor — transition graph in XML.
\n
• Safe argument passing via Safe Args (Gradle plugin).
\n
• Automatic BackStack management — the "Back" button works correctly.
\n
• Deep Links — transitions from notifications or external links.
\n
• Transition animations — simple settings in XML.
\n

Installing Navigation Component

Since Navigation Component is an Android library, installation is done via the Gradle build system, not via pip or npm. Add dependencies to the build.gradle file (module level, usually app/build.gradle):

// build.gradle (Module: app)\nplugins {\n    id 'com.android.application'\n    id 'org.jetbrains.kotlin.android'\n    id 'androidx.navigation.safeargs.kotlin' // for Safe Args\n}\n\nandroid {\n    // ... standard settings\n}\n\ndependencies {\n    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'\n    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'\n    // For working with dynamic features (Feature Modules)\n    implementation 'androidx.navigation:navigation-dynamic-features-fragment:2.7.7'\n}\n

Also make sure the Safe Args plugin is added in the root build.gradle:

// build.gradle (Project level)\nplugins {\n    id 'androidx.navigation.safeargs.kotlin' version '2.7.7' apply false\n}\n

After Gradle sync, the library is ready to use.

Quick start with code example

Let's create a simple application with two screens: HomeFragment and DetailFragment. The user clicks a button on the first screen and navigates to the second, passing a string.

Step 1: Create a navigation file

In the res/navigation folder, create a file nav_graph.xml:

<?xml version="1.0" encoding="utf-8"?>\n<navigation xmlns:android="http://schemas.android.com/apk/res/android"\n    xmlns:app="http://schemas.android.com/apk/res-auto"\n    xmlns:tools="http://schemas.android.com/tools"\n    android:id="@+id/nav_graph"\n    app:startDestination="@id/homeFragment">\n\n    <fragment\n        android:id="@+id/homeFragment"\n        android:name="com.example.app.HomeFragment"\n        android:label="Home"\n        tools:layout="@layout/fragment_home">\n        <action\n            android:id="@+id/action_homeFragment_to_detailFragment"\n            app:destination="@id/detailFragment" />\n    </fragment>\n\n    <fragment\n        android:id="@+id/detailFragment"\n        android:name="com.example.app.DetailFragment"\n        android:label="Detail"\n        tools:layout="@layout/fragment_detail">\n        <argument\n            android:name="message"\n            app:argType="string" />\n    </fragment>\n</navigation>\n

Step 2: Configure the Activity

In activity_main.xml, add NavHostFragment:

<?xml version="1.0" encoding="utf-8"?>\n<androidx.constraintlayout.widget.ConstraintLayout\n    xm