Nested navigation graphs in Android Kotlin - Mini App: Build & Ship

Build: Nested Navigation Example

This screen demonstrates nested navigation graphs in an Android app using Kotlin. The main graph has two sections: Home and Settings. The Settings section contains a nested graph with Profile and Notifications screens.

Target UI

Main Screen
+-----------------------+
| [Home] [Settings]     |
+-----------------------+

Settings Section (nested)
+-----------------------+
| Profile               |
| Notifications         |
+-----------------------+

Create a main navigation graph with two destinations: HomeFragment and SettingsNavGraph.

SettingsNavGraph is a nested navigation graph containing ProfileFragment and NotificationsFragment.

HomeFragment shows a simple text 'Home Screen'.

ProfileFragment shows 'Profile Screen'.

NotificationsFragment shows 'Notifications Screen'.

Bottom navigation bar switches between Home and Settings sections.

Within Settings, user can navigate between Profile and Notifications.

Starter Code

Android Kotlin

package com.example.nestednav

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.NavController
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.bottomnavigation.BottomNavigationView

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

        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController

        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
        bottomNav.setupWithNavController(navController)

        // TODO: Add nested navigation graph and fragments
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.nestednav

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.bottomnavigation.BottomNavigationView

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

        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController

        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
        bottomNav.setupWithNavController(navController)
    }
}

// HomeFragment.kt
package com.example.nestednav

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import android.widget.TextView

class HomeFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val textView = TextView(requireContext())
        textView.text = "Home Screen"
        textView.textSize = 24f
        textView.textAlignment = View.TEXT_ALIGNMENT_CENTER
        return textView
    }
}

// ProfileFragment.kt
package com.example.nestednav

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import android.widget.TextView

class ProfileFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val textView = TextView(requireContext())
        textView.text = "Profile Screen"
        textView.textSize = 24f
        textView.textAlignment = View.TEXT_ALIGNMENT_CENTER
        return textView
    }
}

// NotificationsFragment.kt
package com.example.nestednav

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import android.widget.TextView

class NotificationsFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val textView = TextView(requireContext())
        textView.text = "Notifications Screen"
        textView.textSize = 24f
        textView.textAlignment = View.TEXT_ALIGNMENT_CENTER
        return textView
    }
}

This solution sets up a main navigation graph with two destinations: HomeFragment and a nested navigation graph called SettingsNavGraph. The nested graph contains ProfileFragment and NotificationsFragment. The MainActivity hosts the NavHostFragment and connects it to a BottomNavigationView for switching between Home and Settings sections.

Each fragment displays a simple centered text label. The nested navigation graph allows navigating inside the Settings section without leaving the main graph. This structure keeps navigation organized and modular.

Final Result

Completed Screen

+-----------------------------+
| [Home] [Settings]           |
+-----------------------------+

When Home selected:
+-----------------------------+
|                             |
|         Home Screen          |
|                             |
+-----------------------------+

When Settings selected:
+-----------------------------+
| Profile                     |
| Notifications               |
+-----------------------------+

Selecting Profile or Notifications shows respective screen text.

Tap 'Home' in bottom navigation to show Home Screen text.

Tap 'Settings' in bottom navigation to enter nested graph with Profile and Notifications options.

Tap 'Profile' to show Profile Screen text.

Tap 'Notifications' to show Notifications Screen text.

Stretch Goal

Add a toolbar with a back button that appears when navigating inside the nested Settings graph.

💡 Hint

Use NavigationUI.setupActionBarWithNavController() in MainActivity and override onSupportNavigateUp() to handle back navigation.

Practice

1.

What is the main purpose of using nested navigation graphs in Android apps?

easy

A. To group related screens for better organization and easier navigation

B. To increase app size by duplicating navigation code

C. To disable navigation between screens

D. To replace fragments with activities

Solution

1. Step 1: Understand navigation graph purpose

   Navigation graphs define how screens connect and transition in an app.

2. Step 2: Role of nested graphs

   Nested graphs group related screens to keep navigation organized and maintainable.

3. Final Answer:

   To group related screens for better organization and easier navigation -> Option A

4. Quick Check:

   Nested graphs = group related screens [OK]

Hint: Nested graphs organize related screens inside main graph [OK]

Common Mistakes:

• Thinking nested graphs duplicate code
• Believing nested graphs disable navigation
• Confusing nested graphs with replacing fragments

2.

Which XML tag is used to include a nested navigation graph inside a main navigation graph?

easy

A. <graph>

B. <navigation>

C. <fragment>

D. <include>

Solution

1. Step 1: Identify tag for including nested graphs

   The <include> tag is used to insert one XML layout or graph inside another.

2. Step 2: Confirm usage in navigation graphs

   To add a nested navigation graph inside the main graph, <include> is the correct tag.

3. Final Answer:

   <include> -> Option D

4. Quick Check:

   Include tag adds nested graph [OK]

Hint: Use <include> tag to add nested graphs in XML [OK]

Common Mistakes:

• Using <graph> instead of <include>
• Confusing <fragment> with <include>
• Mistaking <navigation> as include tag

3.

Given this main navigation graph XML snippet:

<navigation xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:id=\"@+id/main_graph\"
    app:startDestination=\"@id/homeFragment\">
    <include app:graph=\"@navigation/profile_graph\" />
    <fragment android:id=\"@+id/homeFragment\" android:name=\"com.example.HomeFragment\" />
</navigation>

What happens when the app starts?

medium

A. The app starts at HomeFragment as the start destination

B. The app starts at the first fragment inside profile_graph

C. The app crashes due to missing start destination in profile_graph

D. The app shows a blank screen

Solution

1. Step 1: Check startDestination in main graph

   The main graph's startDestination is set to homeFragment explicitly.

2. Step 2: Effect of including profile_graph

   Including profile_graph adds its screens but does not change main graph's startDestination.

3. Final Answer:

   The app starts at HomeFragment as the start destination -> Option A

4. Quick Check:

   Start destination in main graph controls start [OK]

Hint: Start destination in main graph controls app start [OK]

Common Mistakes:

• Assuming nested graph startDestination overrides main
• Thinking app crashes without startDestination in nested graph
• Believing included graphs start automatically

4.

What is wrong with this nested navigation graph XML snippet?

<navigation xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:id=\"@+id/profile_graph\">
    <fragment android:id=\"@+id/profileFragment\" android:name=\"com.example.ProfileFragment\" />
</navigation>

When included in main graph, navigation to profileFragment fails. Why?

medium

A. Fragment ID is invalid with plus sign

B. Missing startDestination attribute in profile_graph

C. Fragment name is incorrect format

D. Navigation tag is missing namespace

Solution

1. Step 1: Check required attributes in navigation graph

   Every navigation graph must have a startDestination attribute to define entry point.

2. Step 2: Identify missing startDestination

   The profile_graph lacks startDestination, so navigation fails when included.

3. Final Answer:

   Missing <code>startDestination</code> attribute in profile_graph -> Option B

4. Quick Check:

   startDestination required in nested graphs [OK]

Hint: Always set startDestination in nested graphs [OK]

Common Mistakes:

• Thinking plus sign in ID causes error
• Assuming fragment name format is wrong
• Ignoring missing startDestination attribute

5.

You want to create a nested navigation graph for a settings section with two fragments: SettingsListFragment and SettingsDetailFragment. Which is the correct way to define the nested graph XML?

<navigation xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:id=\"@+id/settings_graph\"
    app:startDestination=\"@id/settingsListFragment\">
    <fragment android:id=\"@+id/settingsListFragment\" android:name=\"com.example.SettingsListFragment\" />
    <fragment android:id=\"@+id/settingsDetailFragment\" android:name=\"com.example.SettingsDetailFragment\" />
</navigation>

How should you include this nested graph inside the main navigation graph?

hard

A. Copy all fragments from settings_graph directly into main graph

B. Add <fragment android:id=\"@+id/settings_graph\" /> inside main graph

C. Use <include app:graph=\"@navigation/settings_graph\" /> inside main graph

D. Use <navigation app:graph=\"@navigation/settings_graph\" /> inside main graph

Solution

1. Step 1: Define nested graph with startDestination and fragments

   The settings_graph XML correctly defines startDestination and fragments.

2. Step 2: Include nested graph in main graph

   Use <include app:graph=\"@navigation/settings_graph\" /> to add nested graph inside main graph.

3. Final Answer:

   Use <include app:graph=\"@navigation/settings_graph\" /> inside main graph -> Option C

4. Quick Check:

   Include tag adds nested graph correctly [OK]

Hint: Include nested graph with [OK]

Common Mistakes:

• Using fragment tag instead of include
• Copying fragments instead of nesting
• Using navigation tag incorrectly inside main graph