🚨Composable Future of Android Development - Compose Navigation🚨
Fedor Erofeev, our Google Certified Associate Android Developer. He has over five years of experience developing and publishing a variety of applications, ranging from delivery applications to widgets.
He will introduce you to recommended practices on implementing navigation between screen composables with Jetpack Compose. You may use it to help you organize your navigation code, pass simple types and complex data using the Kotlin Serialization plugin and receive them in the destinations on the screen, add lovely animations to your screen transitions, and cover your navigation host with tests.
To know more about Event at Seven Peaks please visit:
https://sevenpeakssoftware.com/events/
#android #androiddeveloper #androiddevelopment #mobileappdevelopment #mobiledeveloper #mobileapplicationdeveloper #Sevenpeakssoftware #sevenpeaksspeaks #softwaredevelopment #softwarecompanythailand #digitalproductconsultancy #meetup #techmeetup
5. 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 🙈
6. Navigation animation
Animating your screen transitions with Accompanist Navigation Animation
Note: Learn more about Navigation Animation: https://google.github.io/accompanist/navigation-animation/
8. Create NavHost
And pass NavController with start destination
Note: To create an instance of NavController, use rememberNavController() function
Start
destination
9. 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
11. This is the recommended way 🚨
It doesnʼt break SSOT principle
Note: To learn more, please visit this link Retrieving complex data when navigating
12. 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.
13. 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
15. Getting simple data from NavBackStackEntry
From arguments parameter
Note: This is the recommended way to pass data
Get argument
from
NavBackStackE
ntry
17. Create custom NavType
By extending NavType
Note: You can use your favorite library for serialization, Kotlin Serialization, Moshi, etc.
18. 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
19. 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(...)
20. 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.
21. 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
23. 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 😊
26. 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!
34. 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 😐
35. Step 4 (Option 1). Add transitions to all NavHost
The solution below will add default transitions for all destinations
36. Step 4 (Option 2). Add transitions to composables
If you need different transitions for your destinations, you can pass them to composable(...) function