Navigation component setup in Android Kotlin

Introduction

The Navigation component helps you move between screens in your app easily and safely. It manages the back stack and animations for you.

When your app has multiple screens and you want to switch between them.

When you want to handle the back button automatically without extra code.

When you want to pass data between screens in a simple way.

When you want to use animations between screen transitions.

When you want a clear visual map of your app's navigation flow.

Syntax

Android Kotlin

1. Add Navigation dependencies in build.gradle:

implementation "androidx.navigation:navigation-fragment-ktx:2.5.3"
implementation "androidx.navigation:navigation-ui-ktx:2.5.3"

2. Create a navigation graph XML (res/navigation/nav_graph.xml):

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.FirstFragment"
        android:label="First Screen" />

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

</navigation>

3. Setup NavHostFragment in your 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" />

4. Use NavController in your activity or fragment to navigate:

val navController = findNavController(R.id.nav_host_fragment)
navController.navigate(R.id.secondFragment)

The navigation graph XML defines all screens and how to move between them.

NavHostFragment is a container that shows the current screen.

Examples

This moves from the current screen to the screen with ID secondFragment.

Android Kotlin

navController.navigate(R.id.secondFragment)

Sets the first screen shown when the app starts.

Android Kotlin

app:startDestination="@id/homeFragment"

Defines a new screen called Profile in the navigation graph.

Android Kotlin

<fragment
    android:id="@+id/profileFragment"
    android:name="com.example.ProfileFragment"
    android:label="Profile" />

Sample App

This example shows how to set up the Navigation component with two screens. The app starts at First Screen and immediately navigates to Second Screen.

Android Kotlin

/* build.gradle (Module) dependencies */
implementation "androidx.navigation:navigation-fragment-ktx:2.5.3"
implementation "androidx.navigation:navigation-ui-ktx:2.5.3"

/* res/navigation/nav_graph.xml */
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.FirstFragment"
        android:label="First Screen" />

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

</navigation>

/* res/layout/activity_main.xml */
<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" />

/* MainActivity.kt */
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import com.example.R

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navController = findNavController(R.id.nav_host_fragment)
        // Navigate to secondFragment after 2 seconds (simulate user action)
        navController.navigate(R.id.secondFragment)
    }
}

Important Notes

Always add the Navigation dependencies in your build.gradle file.

Use the Navigation Editor in Android Studio to visually create and edit the navigation graph.

NavController handles the back button automatically for you.

Summary

The Navigation component helps manage screen changes easily.

Create a navigation graph XML to define screens and paths.

Use NavHostFragment in your layout to show screens.

Use NavController to move between screens in code.