In Android, the Navigation Component is made up of 3 key parts that work together to
manage in-app navigation:
🧩 The 3 Main Parts of Navigation Component
1. Navigation Graph (nav_graph.xml)
● An XML resource that defines all navigation routes in your app.
● It includes destinations (fragments/activities) and actions (transitions between
destinations).
● Also defines the startDestination.
📌 Example:
<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.app.HomeFragment"
android:label="Home" >
<action
android:id="@+id/action_home_to_detail"
app:destination="@id/detailFragment" />
</fragment>
<fragment
android:id="@+id/detailFragment"
android:name="com.example.app.DetailFragment"
android:label="Details" />
</navigation>
2. NavHost (NavHostFragment)
● A special container that swaps fragments based on navigation actions.
● You include it in your layout (usually activity_main.xml).
📌 Example:
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
3. NavController
● An object that controls the navigation between destinations.
● You use it in Kotlin/Java code to navigate programmatically.
📌 Example:
val navController = findNavController(R.id.nav_host_fragment)
navController.navigate(R.id.action_home_to_detail)
It works behind the scenes to:
● Manage the back stack
● Handle transitions
● Pass arguments (optionally with Safe Args)
✅ Summary Table
Part Role
Navigation Graph Defines screens (destinations) and navigation
paths
NavHostFragment UI container that swaps screens
NavController Code-based API to trigger navigation actions
Would you like a full example that ties all three parts together?