Create a Smooth Android App Navigation Experience! Navigation with Kotlin: Solve Your App Navigation Issues in One Article!

Introduction to Navigation

Navigation is a powerful library

It provides a simple way to handle navigation between different fragments in an Android application.

The following example

shows how to import navigation into a project

and set up navigation.

When we complete a project

we can clearly see the entire navigation logic at a glance.

Navigation Development

Add the Navigation library to the project's build.gradle file

Add the relevant library to build.gradle

<b>Note: The "Navigation" component requires Android Studio 3.3 or above</b>

Navigation Development

0. Quickly Create via IDE

Through Android Studio Right-click the res folder in the project directory > New > Android Resource File to add a Navigation XML.

Alternatively, if you want to add it manually, you can create a navigation folder under res and add nav_graph.xml inside it.

1. Create <fragment> and Set startDestination

Actual folder structure

Add fragment

id = name

name = path of the fragment

label = label message or similar tag

tools:layout = layout XML resource to preview

Add startDestination

Example: app:startDestination="@id/landingFragment"

2. Add the following three lines to the FragmentContainerView in the Activity

android:name="androidx.navigation.fragment.NavHostFragment"

app:navGraph="@navigation/navigation_main" (optional, adds preview in IDE)

app:defaultNavHost="true"

3. Add <action> and set the destination

Add action within the fragment

After adding, set the destination

For example: app:destination="@id/signInFragment"

(action can also be written outside for global navigation)

4. Add code to navigate to the destination

Directly add the following code where you want to navigate

findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)

5. To navigate to an Activity, use <activity> similar to <fragment>

6. For multiple nav graphs, use nesting or include

Directly add another navigation graph:

After adding a new nav graph XML

Use include to import it:

Navigation Development Example - Dialog Fragment

Enter from dialog fragment

Similar to above, directly add a dialog tag in the nav graph

And import your created DialogFragment to use it

(id = name, name = fragment path, label = display message or similar tag, tools:layout = layout XML resource to display)

Navigation Development Example - Passing Variables

Add argument

Similarly, directly add an argument in the nav graph

You can preset the variables to be passed (argType = variable type, defaultValue = default value)

Passing Variables in Code

a. Without using the default value method in the above XML

You can directly pass variables using the two sets of code below

b. If default values are passed using the XML method

You can directly receive them using the code below

Variable Types Supported by Navigation

Navigation Development Case - Animation

Support for Directly Setting Transition Animations

By passing enterAnim, exitAnim, popEnterAnim, and popExitAnim, you can easily set transition animations

Support for Adding Exit Animations to Activities

Using the code below, you can use the built-in activity exit animations in navigation

Navigation Development Case - Supporting Multiple Back Stacks

Method for Handling Multiple Back Stacks

By using the API provided by Navigation to associate related views

You can handle the issue of multiple back stack transitions

For example, setupWithNavController to associate with the bottom navigation view

setupActionBarWithNavController to associate with the action bar

Navigation Development Case - popUpTo and popUpToInclusive

Using popUpTo to Remove All Pages on the Stack When Navigating to the Destination Page

Using popUpToInclusive to Remove the Topmost Same Page

This diagram illustrates the general transition logic

Fragments transition in order 1 -> 2 -> 3 and then back from 3 to 1

And then transition again 1 -> 2 -> 3 and back to 1

At this point, the fragments in the back stack are in the order [1,2,3,1,2,3,1]

If you want to transition back to 1 without having the destination fragment above in the stack, you can add

popUpTo and popUpToInclusive in the XML action

This will allow the next transition back to the destination fragment to have a stack instance cleared above it

Before Adding, Based on Actual Example

After Adding, Based on Actual Example

Navigation Development Case - NavOptions

Set NavController through NavOptions

Similarly, navigation also provides a corresponding builder to set some of the features mentioned above. NavOptions example:

val options = NavOptions.Builder()
    .set....
    .build()

Finally, pass it in when navigating

findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment, null, options)

Configurable Items Include:

Navigation Reference Materials

Official Documentation

Slide Presentation

Navigation Sample Code

Github Source Code