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.

Practice

1. What is the main purpose of the Navigation component in Android development?

easy

A. To manage screen transitions and navigation paths easily

B. To handle database operations

C. To style UI components

D. To manage network requests

Solution

1. Step 1: Understand Navigation component role

   The Navigation component is designed to simplify moving between screens in an app.

2. Step 2: Compare with other options

   Database, styling, and network are unrelated to navigation tasks.

3. Final Answer:

   To manage screen transitions and navigation paths easily -> Option A

4. Quick Check:

   Navigation component = screen transitions [OK]

Hint: Navigation component = screen changes manager [OK]

Common Mistakes:

• Confusing navigation with database handling
• Thinking it styles UI elements
• Assuming it manages network calls

2. Which XML element is used to define the navigation graph in Android?

easy

A. <navGraph>

B. <navigation>

C. <navHost>

D. <navController>

Solution

1. Step 1: Identify the navigation graph element

   The navigation graph XML uses the <navigation> root element to define screens and paths.

2. Step 2: Check other elements

   <navHost> and <navController> are not XML tags; <navGraph> is incorrect.

3. Final Answer:

   <navigation> -> Option B

4. Quick Check:

   Navigation graph XML uses <navigation> [OK]

Hint: Navigation graph XML root is <navigation> tag [OK]

Common Mistakes:

• Using <navGraph> which is invalid
• Confusing NavHostFragment with XML tag
• Mistaking NavController for XML element

3. Given this code snippet, what screen will be displayed first?

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

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment" />

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment" />

</navigation>

medium

A. No screen shown

B. DetailFragment

C. HomeFragment

D. Error due to missing NavHostFragment

Solution

1. Step 1: Identify startDestination attribute

   The navigation graph sets startDestination="@id/homeFragment", so HomeFragment is the first screen.

2. Step 2: Confirm fragment IDs

   HomeFragment and DetailFragment are defined; startDestination points to HomeFragment.

3. Final Answer:

   HomeFragment -> Option C

4. Quick Check:

   startDestination = HomeFragment [OK]

Hint: Look for startDestination attribute in navigation XML [OK]

Common Mistakes:

• Choosing DetailFragment by mistake
• Assuming no screen shows without NavHostFragment
• Confusing fragment IDs

4. You wrote this code to navigate but get a crash:

findNavController().navigate(R.id.action_home_to_detail)

What is the most likely cause?

medium

A. All of the above

B. Incorrect action ID in navigation graph

C. Using findNavController() outside a Fragment or Activity

D. Missing NavHostFragment in layout

Solution

1. Step 1: Check NavHostFragment presence

   Without NavHostFragment in layout, navigation cannot work and causes crash.

2. Step 2: Verify action ID and context

   If action ID is wrong or findNavController() is called outside proper context, app crashes.

3. Final Answer:

   All of the above -> Option A

4. Quick Check:

   Missing NavHost, wrong ID, or wrong context cause crash [OK]

Hint: Check NavHost, action ID, and context if navigation crashes [OK]

Common Mistakes:

• Ignoring NavHostFragment setup
• Using wrong action ID
• Calling findNavController() in wrong place

5. You want to navigate from HomeFragment to DetailFragment using the Navigation component. Which steps are required to set this up correctly?

hard

A. Only add NavHostFragment in layout and call navigate() in code

B. Add action in nav_graph.xml and call navigate() without defining fragments

C. Define fragments in nav_graph.xml and call navigate() without NavHostFragment

D. Define fragments and action in nav_graph.xml, add NavHostFragment in layout, call findNavController().navigate(actionId)

Solution

1. Step 1: Define fragments and action in navigation graph

   Both fragments and the action connecting them must be declared in nav_graph.xml.

2. Step 2: Add NavHostFragment in activity layout

   NavHostFragment hosts the navigation and displays fragments.

3. Step 3: Use findNavController().navigate(actionId) in code

   This triggers navigation along the defined action.

4. Final Answer:

   Define fragments and action in nav_graph.xml, add NavHostFragment in layout, call findNavController().navigate(actionId) -> Option D

5. Quick Check:

   Fragments + action + NavHost + navigate() = correct setup [OK]

Hint: All three: graph, NavHost, and navigate() needed [OK]

Common Mistakes:

• Skipping NavHostFragment in layout
• Not defining action in nav_graph.xml
• Calling navigate() without proper setup