Navigation Routes in Jetpack Compose
How to goto destination fragments in your Android application
Prior to the Jetpack Compose era, we always use XMLs in order to perform a navigation in an Android Application. However now, it is even easier thanks to the Jetpack Compose Library. So how do we apply navigation in Jetpack Compose?
This is the third part of our Jetpack Compose tutorial, where we are going to learn about navigation in Jetpack Compose.
You can find the list here :
In this article, we will learn how to apply navigation to Android applications using Jetpack Compose.
Get Started
In my last article, I explained about our architecture where MainActivity can go to HomeFragment or DetailFragment.
As can be seen from the illustratoin, the source class that can lead users to other page is the MainActivity. Hence we will handle the navigation there.
Before we start, we have to import the navigation library from the Jetpack Compose. Open build.gradle in app folder, and add this line of code in theimplementation section.
Open MainActivity.kt. Our code should look like this:
Change our code into the following:
That way, now we can place our navigation in JetpackComposeAppScreen()
Now, we want to make MainActivity to have some destination fragments in order to perform navigation.
We have to change our code in JetpackComposeAppScreen() to the following:
So now in NavHost, there are HomeFragment and DetailFragment. Each of them has route, so we can use the route to navigate to which fragment.
For example, in Navhost there is a parameter called startDestination. This parameter will navigate it to which composable function has the specific name at the very start when NavHost is created.
Don’t forget to add val navController = rememberNavController(), because that controller will help you navigate inside Navhost.
Now “Home” and “Detail” is scattered in Navhost. To make sure they don’t scatter again, we will make a class that will contain the name of the route.
Create a class named Route.kt. Copy the code below:
Now route name is contained in Route.kt using sealed class. This is similiar to enum. For more information about sealed class, you may refer it here.
Change JetpackComposeAppScreen() code to the following:
In the future, if you want to add or edit the name of the route, just open Route.kt and do the things. Then you may use it in anywhere.
Now, we just have to figure out how to navigate from HomeFragment to DetailFragment. We will use navController for that, since navController has the ability to navigate.
From the GIF above, we click from ProductCard in HomeFragment to DetailFragment, so we need to open ProductCard.kt and place this code here:
Now we have to figure it out how to make navController from MainActivity.kt to ProductCard.kt.
Usually, this can be done by parsing the parameter from MainActivity.kt to ProductCard.kt .
But this action will make our code become tight coupled, because ProductCard.kt will depend on navController from MainActivity.kt to make it work — and MainActivity.kt will know that ProductCard.kt requires navController to make it work.
There is a way to avoid it happening. Open ProductCard.kt and copy the below code there:
That way, it is optional for us to give function to ProductCard.kt since the default in onClickProduct is {} .
So now ProductCard.kt will not depend on navController from MainActivity.kt to make it work, and MainActivity.kt will not know what does ProductCard.kt do with navController.
Now we have to figure out how to use navController to navigate to DetailFragment, Open HomeScreen.kt and HomeFragment.kt, and copy this code:
Now in MainActivity.kt for onClickToDetailScreen parameter in HomeFragment(), add the following code:
Now we can navigate it from HomeFragment to DetailFragment. Add the following code in MainActivity.kt to make a preview in that class:
Now we can look at the preview in MainActivity.kt:
Now we have managed to make simple navigation from HomeFragment to DetailFragment .
HomeFragment has an infinite list of ProductCard, with each card having an unique ProductId.
Going from this, let’s say we have a use case in our DetailFragment to fetch data based on the card’s ProductId, how can we achieve this? Luckily, Jetpack Compose has provided an API to send arguments when navigating.
Open MainActivity.kt, copy the code like the following:
In order for DetailFragment to receive something while navigating, we have to know which data we are expecting to be received. For example we want gamesId that has Integer type. We have to declare it in Navhost.
For that, we pass the information to the parameter named arguments that received list of navArguments in composable function for DetailFragment. After that, we will check whether the gamesId is exist in arguments or not. If exist, we will pass it to DetailFragment, if not, we will throw an exception.
Now, we have to parse gamesId from HomeFragment.kt to DetailFragment.kt. Open Route.kt and copy this code to Detail.
And in MainActivity.kt, copy this code:
Now HomeFragment have the ability to parse gamesId to DetailFragment, and DetailFragment obtain in their arguments.
Now the final step, open HomeFragment.kt and HomeScreen.kt.
Now we can direct it to DetailFragment with gamesId in there.
Note that, we may not parse the gamesId to ProductCard in code, because ProductCard may not always have to navigate to DetailFragment. That is why we use invoke in HomeScreen.kt.
Detail about invoke in Kotlin can be viewed here.
Conclusion
By now, we have learned much about navigating in Jetpack Compose.
You may view my code on my GitHub for the complete version.
In the next article, I will write about how to apply one of the most used architecture mobile applications to our application. The famous MVVM Architecture.
You can view my next article here
