All about navigation within the Jetpack Compose-based manufacturing code-base | by Kaaveh Mohamedi | Jan, 2023 | Mercy Tech

In With most Android apps, it’s normal to have a number of screens with backside navigation. On this article, I clarify the best way to handle navigation in a Jetpack compose utility, point out some frequent issues that may happen and the answer that you could take.

As an example we’re engaged on a wealthy multi-modular manufacturing codebase and begin migrating it to Jetpack compose. How can we cope with the navigation stuff? Right here, now we have two fields; backside navigation and navigation between screens.

Configuration Navigation fundamentals

To start with, with Scaffold arrange aNavHost in Most important exercise and this would be the fundamental navigation graph:

@Composable
enjoyable MyAppNavHost(
navController: NavHostController,
modifier: Modifier,
) 
NavHost(
navController = navController,
startDestination = Locations.NewsListScreen.route,
modifier = modifier,
) 
// backside navigation screens & nested graphs
newsListGraph(navController)
favoriteNewsGraph(navController)
profileGraph(navController)
// frequent screens in total app
newsDetailGraph()
...

To keep away from creating an enormous fundamental navigation chart, we cut up it into separate screens and nested charts. In truth, every display has its personal composable wrapped by a NavGraphBuilder extension perform. For a standard display it will be like:

enjoyable NavGraphBuilder.VerifyCodeGraph() 
composable(
route = Locations.VerifyCodeScreen().route,
) 
VerifyCodeScreen()

To handle the trail of every display, we are able to use a sealed class like this:

sealed class Locations(val route: String) 
object NewsListScreen : Locations("news_list_screen")
information class NewsDetailScreen(val information: String = "information") : Locations("news_detail_screen")
object FavoriteNewsScreen : Locations("favorite_news_screen")
object ProfileScreen : Vacation spot("profile_screen")
object SettingScreen : Vacation spot("setting_screen")
object ThemeScreen : Vacation spot("theme_screen")
object LoginScreen : Vacation spot("login_screen")
object VerifyCodeScreen : Vacation spot("verify_code_screen")
...

Additionally, if some display wants some parameters, a information class could possibly be embedded within the display like information class NewsDetailScreen(val information: String = “information”).

If any display must navigate to a different display, simply cross in a perform to deal with that:

enjoyable NavGraphBuilder.settingListGraph(
navController: NavController,
) 
composable(Locations.SettingScreen.route) 
NewsListRoute(
onNavigateToThemeScreen = 
navController.navigate(
route = Locations.ThemeScreen().route,
)

)

This manner there isn’t any must rely in your perform module within the navigation library. There would be the duty of the applying module to deal with the navigation stuff.
If some screens may be grouped right into a nested chart, do the next:

enjoyable NavGraphBuilder.profileGraph(
navController: NavHostController
) 
navigation(
startDestination = Vacation spot.ProfileScreen.route,
route = Vacation spot.ProfileScreen.route.addGraphPostfix(),
) 
composable(Vacation spot.ProfileScreen.route) 
ProfileScreen(
onNavigationToLoginScreen = 
navController.navigate(
route = Vacation spot.LoginScreen.route.addGraphPostfix(),
)

)

loginGraph()

For nested charts, contemplate the following pointers:

1. Every nested navigation chart will need to have a startDestination
2. Every nested navGraph ought to have a singular path like others composable. A easy resolution is to make use of the startDestination route + “_graph”
3. You possibly can simply add others composable and charts nested to this chart

To set the underside navigation bar, simply observe The doc. If you wish to have Deeplink, observe this part.

cross arguments

One other want in navigation is to cross some arguments. To cross primitive information, you may observe The doc. However in some situations, it is advisable to cross an object. At the moment (as of early 2023), there isn’t any resolution when utilizing navigate() with a route, however there’s an overload that accepts a bundle :

public open enjoyable navigate(
@IdRes resId: Int,
args: Bundle?,
navOptions: NavOptions?,
navigatorExtras: Navigator.Extras?
)

‌As you may see, you get an id for the vacation spot. Let’s write an extension perform so we are able to use it:

enjoyable NavController.navigate(
route: String,
args: Bundle,
navOptions: NavOptions? = null,
navigatorExtras: Navigator.Extras? = null
) 
val routeLink = NavDeepLinkRequest
.Builder
.fromUri(NavDestination.createRoute(route).toUri())
.construct()
val deepLinkMatch = graph.matchDeepLink(routeLink)
if (deepLinkMatch != null) 
val vacation spot = deepLinkMatch.vacation spot
val id = vacation spot.id
navigate(id, args, navOptions, navigatorExtras)
 else 
navigate(route, navOptions, navigatorExtras)

And to make use of this perform on the supply display:

enjoyable NavGraphBuilder.newsListGraph(
navController: NavController,
) 
composable(Locations.NewsListScreen.route) 
NewsListScreen(
onNavigateToDetailScreen =  information ->
navController.navigate(
route = Locations.NewsDetailScreen().route,
args = bundleOf(Locations.NewsDetailScreen().information to information)
)

)

On the goal display:

enjoyable NavGraphBuilder.newsDetailScreen() 
composable(
route = Locations.NewsDetailScreen().route,
)  entry ->
val information = entry.parcelableData<Information>(Locations.NewsDetailScreen().information)
NewsDetailScreen(information = information,)

inline enjoyable <T> NavBackStackEntry.parcelableData(key: String): T? 
return arguments?.parcelable(key) as? T