Compose Navigation
Navigate between screens easily with Jetpack Compose 🚀
22.02.2022

Set-up
Dependencies and additional steps 🚧

Basic navigation
Navigating between screens and passing arguments

Passing complex data
Add your favorite library for serialization

Navigation testing
Add following dependency
Note: If youʼre using Hilt you might need more dependencies, but this wonʼt be covered in this meetup 🙈

Navigation animation
Animating your screen transitions with Accompanist Navigation Animation
Note: Learn more about Navigation Animation: https://google.github.io/accompanist/navigation-animation/

Navigation basics
Creating NavHost and destinations 🚩

Create NavHost
And pass NavController with start destination
Note: To create an instance of NavController, use rememberNavController() function
Start
destination

And your Composable to the NavGraphBuilder
You need to pass the route name - you will use it later to navigate to this screen
Add route

Passing primitive types
Itʼs recommended to pass only essential data 🙌

This is the recommended way 🚨
It doesnʼt break SSOT principle
Note: To learn more, please visit this link Retrieving complex data when navigating

What types can we pass?
We can pass 11 available types without any additional set-up
NavType Type Description
NavType.BoolArrayType NavType<BooleanArray?> NavType for storing boolean arrays, corresponding with the "boolean[]" type in a Navigation XML file.
NavType.BoolType NavType<Boolean> NavType for storing boolean values, corresponding with the "boolean" type in a Navigation XML file.
NavType.FloatArrayType NavType<FloatArray?> NavType for storing float arrays, corresponding with the "float[]" type in a Navigation XML file.
NavType.FloatType NavType<Float> NavType for storing float values, corresponding with the "float" type in a Navigation XML file.
NavType.IntArrayType NavType<IntArray?> NavType for storing integer arrays, corresponding with the "integer[]" type in a Navigation XML file.
NavType.IntType NavType<Int> NavType for storing integer values, corresponding with the "integer" type in a Navigation XML file.
NavType.LongArrayType NavType<LongArray?> NavType for storing long arrays, corresponding with the "long[]" type in a Navigation XML file.
NavType.LongType NavType<Long> NavType for storing long values, corresponding with the "long" type in a Navigation XML file.
NavType.ReferenceType NavType<Int> NavType for storing integer values representing resource ids, corresponding with the "reference" type
in a Navigation XML file.
NavType.StringArrayType NavType<Array<String>?> NavType for storing String arrays, corresponding with the "string[]" type in a Navigation XML file.
NavType.StringType NavType<String?> NavType for storing String values, corresponding with the "string" type in a Navigation XML file.

Create new destination
With out-of-the-box arguments
Note: This is the recommended way to pass data
Add route and
arguments separated
by /
Provide a list of
NamedNavArguments

Passing simple data
Simply using template expression
Note: This is the recommended way to pass data

Getting simple data from NavBackStackEntry
From arguments parameter
Note: This is the recommended way to pass data
Get argument
from
NavBackStackE
ntry

Passing complex data
If you still want to pass your Parcelables 💭

Create custom NavType
By extending NavType
Note: You can use your favorite library for serialization, Kotlin Serialization, Moshi, etc.

Create new destination
With your custom NavType
Note: This goes against the SSOT principle and Google recommendations, as well as adds more complexity to navigation.
Add route and
arguments separated
by /
Provide a list of
NamedNavArguments

Passing complex data
In 3 steps - encode our Parcelable into Json string, encode to UTF-8 scheme and pass to NavController
Note: Since navigation is using NavDeepLinkRequest under the hood, we need to make sure we use Uri.encode(...)

Why do we need Uri.encode(...)?! 😱
If you forget to encode your JSON string, you will get an exception…
Note: Uri.encode(...) encodes characters in the given string as '%'-escaped octets using the UTF-8 scheme. Leaves letters ("A-Z", "a-z"),
numbers ("0-9"), and unreserved characters ("_-!.~'()*") intact. Encodes all other characters.

Get your Parcelable
Similar to primitive types you can get from NavBackStackEntry
Note: This goes against the SSOT principle and Google recommendations, as well as adds more complexity to navigation.
Get Parcelable

Organizing navigation code
No-one likes endless NavHosts 😰

Create extension functions
Declare your composable destination, inject your ViewModels and get arguments in a separate file
Note: This is especially useful when you process multiple arguments 😊

Deeplinks
Set-up deeplinks to your destinations 🌎

Declare intent filter
In your AndroidManifest.xml
Intent filter for your
deeplink

Pass the list of deeplinks
To your composable.
Add a list of NavDeepLinks
Note: Thatʼs it! You donʼt need additional logic to get the argument, it will work exactly the same as regular arguments!

Your deeplinks are ready! 👏
Time to verify if they are working

Testing your navigation
Making sure it works correctly 👋

Set-up your test
Under androidTest directory (e.g. NavigationTest.kt)

Perform some actions with ComposeTestRule
And assert NavBackStackEntry destination

Animate screen transitions
Adding extra touch to your navigation in 4 steps 🎶

Step 1. Replace your NavController
To AnimatedNavController
Replace
with

Step 2. Replace NavHost
With AnimatedNavHost
Replace
with

Step 3. Replace composable import
To the one provided by Accompanist library
Replace
with
Note: If you forget this, you will not see any screen in your navigation 😐

Step 4 (Option 1). Add transitions to all NavHost
The solution below will add default transitions for all destinations

Step 4 (Option 2). Add transitions to composables
If you need different transitions for your destinations, you can pass them to composable(...) function

UPCOMING MEETUP
Check out our event page
Stay tuned for whatʼs coming next!