Nested navigation graphs in Android Kotlin - UI Render Trace

Component - Nested navigation graphs

This UI component demonstrates how nested navigation graphs work in Android using Kotlin. It shows a main navigation graph containing a nested graph, allowing organized and modular screen navigation within an app.

Widget Tree

NavHostFragment
├── MainNavGraph
│   ├── HomeFragment
│   ├── ProfileFragment
│   └── SettingsNavGraph (nested)
│       ├── SettingsFragment
│       └── AboutFragment

The root is a NavHostFragment hosting the MainNavGraph. The MainNavGraph includes HomeFragment and ProfileFragment as direct destinations. It also contains a nested graph called SettingsNavGraph, which itself hosts SettingsFragment and AboutFragment. This structure visually organizes navigation flows, grouping related screens under the nested graph.

Render Trace - 5 Steps

Step 1: NavHostFragment

Step 2: MainNavGraph

Step 3: User action

Step 4: SettingsNavGraph

Step 5: User action

State Change - Re-render

Trigger:User taps navigation button to go to Settings

Before

HomeFragment is displayed

→

After

SettingsFragment inside nested SettingsNavGraph is displayed

Re-renders:NavHostFragment subtree re-renders to show nested graph's start destination

UI Quiz - 3 Questions

What happens when the app navigates to the nested SettingsNavGraph?

A The HomeFragment remains visible and Settings screen opens in a new window

B The nested graph loads its start destination fragment inside the NavHostFragment

C The entire app restarts and shows the Settings screen

D The ProfileFragment is shown instead of Settings

Key Insight

Nested navigation graphs help organize complex app navigation by grouping related screens. This modular approach keeps navigation manageable and reusable, improving app structure and user experience.