Nested Navigation Graphs
A nested navigation graph (shortly, nested graph) is a group of some destinations in a navigation graph. We can use a nested graph to organize and reuse sections of your app’s UI, such as a self-contained login flow. A nested navigation graph can contain destinations and/or children nested navigation graphs. All nested graphs must have a start destination. Destinations outside of the nested graph, such as those on the parent navigation graph, access the nested graph only through its start destination.
2. Creates the destinations you want to group in a navigation graph.
3. Go to Navigation Editor of Android Studio and, in the Design Tab, selects the destination you want to group in a nested graph and click in the button Group into nested graph as image below indicates:
Example of Nested Navigation Graph
In the Navigation Editor of Android Studio, we see a nested navigation graph as image below:
The parent navigation graph contains two destinations: mainFragment and viewBalanceFragment, and one nested navigation graph: sendMoneyGraph. The start destination of parent navigation graph is mainFragment. The sendMoneyGraph contains two destinations: chooseRecipient and chooseAmountFragment. The start destination of nested navigation graph is chooseRecipient.
Note that the destination mainFragment constains two actions: one to the destination viewBalanceFragment and one to the nested navigation graph sendMoneyGraph. The latter forwards the user to the destination chooseRecipient, because it is the start destination of the nested graph sendMoneyGraph.
We can't create an action from parent navigation graph to another destination on the nested navigation graph other than your start destination. Likewise, we cannot create an action on the parent navigation graph that directs the user to a nested graph inside its nested navigation graph.
The code below represents the navigation graph of the image:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
app:startDestination="@id/mainFragment">
<fragment
android:id="@+id/mainFragment"
android:name="com.example.cashdog.cashdog.MainFragment"
android:label="fragment_main"
tools:layout="@layout/fragment_main" >
<action
android:id="@+id/action_mainFragment_to_sendMoneyGraph"
app:destination="@id/sendMoneyGraph" />
<action
android:id="@+id/action_mainFragment_to_viewBalanceFragment"
app:destination="@id/viewBalanceFragment" />
</fragment>
<fragment
android:id="@+id/viewBalanceFragment"
android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
android:label="fragment_view_balance"
tools:layout="@layout/fragment_view_balance" />
<navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
<fragment
android:id="@+id/chooseRecipient"
android:name="com.example.cashdog.cashdog.ChooseRecipient"
android:label="fragment_choose_recipient"
tools:layout="@layout/fragment_choose_recipient">
<action
android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
app:destination="@id/chooseAmountFragment" />
</fragment>
<fragment
android:id="@+id/chooseAmountFragment"
android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
android:label="fragment_choose_amount"
tools:layout="@layout/fragment_choose_amount" />
</navigation>
</navigation>
How to create a nested graph?
1. Creates a navigation graph. If you don't know how, checks this.2. Creates the destinations you want to group in a navigation graph.
3. Go to Navigation Editor of Android Studio and, in the Design Tab, selects the destination you want to group in a nested graph and click in the button Group into nested graph as image below indicates:
