Navigation Component, Designing Navigation graph
By: Karishma Agrawal
Tags: Android Development, Android App Development, Android, Navigation Graph

A User can enter into this flow by clicking the CREATE COMBO button on the meal tracker screen (fig 1) or CREATE A COMBO button from the Meal combo screen(fig 2) or the ADD FOOD button in the search flow(fig 3).

HOOK 1: Meal tracker screen

<!-- meal_tracker_graph.xml -->

<?xml version="1.0" encoding="utf-8"?>

<navigation xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/meal_tracker_graph"

app:startDestination="@id/mealTrackerFragment"> <include app:graph="@navigation/create_meal_graph" /> <fragment

android:id="@+id/mealTrackerFragment"

android:name="com.example.healthify.MealTrackerFragment"

android:label="MealTrackerFragment"

tools:layout="@layout/fragment_meal_tracker">

<action

android:id="@+id/action_merge_flow"

app:destination="@id/create_meal_graph" />

</fragment> ...

</navigation>

Here we have MealTrackerFragment and we have included create a meal graph. On click of CREATE COMBO button user will enter in create meal flow.

button.setOnClickListener{

Navigation.findNavController(view).navigate(R.id. action_merge_flow )

}

HOOK 2: Meal combo screen

<!-- my_meal_graph.xml -->

<?xml version="1.0" encoding="utf-8"?>

<navigation xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/my_meal_graph"

app:startDestination="@id/myMealFragment"> <include app:graph="@navigation/create_meal_graph" /> <fragment

android:id="@+id/myMealFragment"

android:name="com.example.healthify.MyMealFragment"

android:label="MyMealFragment"

tools:layout="@layout/fragment_my_meal">

<action

android:id="@+id/action_create_meal"

app:destination="@id/create_meal_graph" />

</fragment> ...

</navigation>

Here we have MyMealFragment and we have included create_meal_graph . On click of CREATE A COMBO button user will enter in create meal flow.

button.setOnClickListener{

Navigation.findNavController(view).navigate(R.id. action_create_meal )

}

Hook 3: Search flow, here we will understand nested graph as well as how to pass data between two destinations

Navigation allows you to attach data to a navigation operation by defining arguments for a destination. For example, in this case, we can pass meal Type(Breakfast, Lunch, dinner) as an argument in Create meal Fragment.

In general, you should strongly prefer passing only the minimal amount of data between destinations. For example, you should pass a key to retrieve an object rather than passing the object itself, as the total space for all saved states is limited on Android. If you need to pass large amounts of data, consider using a ViewModel .

To pass data you need to define an argument in the destination fragment where you want to receive data.

In this example, we are sending meal type from 3 diff hooks, and it will be received by CreateMealFragment. SO we need to define arg in CreateMealFragment.

<fragment

android:id="@+id/createMealFragment"

android:name="com.example.healthify.CreateMealFragment"

android:label="fragment_create_meal"

tools:layout="@layout/fragment_create_meal" > <argument

android:name="mealType"

app:argType=" string "

android:defaultValue="" />

</fragment>

If an argument type supports null values, you can declare a default value of null by using android:defaultValue="@null" .

You can check all supported argument types from HERE.

We can pass arguments through “Deeplink” too.

<deepLink

android:id="@+id/deepLink"

app:uri="www.example.com/ createMealFragment /{ mealType }"

android:autoVerify="true"/>

From the sender fragment create a bundle of argument and pass it to nav controller.