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

In With most Android apps, it’s normal to have a number of screens with backside navigation. On this article, I clarify learn how to handle navigation in a Jetpack compose software, point out some widespread issues that may happen and the answer which you can take.

To illustrate we’re engaged on a wealthy multi-modular manufacturing codebase and begin migrating it to Jetpack compose. How will we take care of the navigation stuff? Right here, now we have two fields; backside navigation and navigation between screens.

Configuration Navigation fundamentals

Initially, 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)
// widespread screens in whole app
newsDetailGraph()
...

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

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

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

sealed class Locations(val route: String) 
object NewsListScreen : Locations("news_list_screen")
knowledge 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 knowledge class might be embedded within the display like knowledge class NewsDetailScreen(val information: String = “information”).

If any display must navigate to a different display, simply move in a operate to deal with that:

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

)

This manner there is no such thing as a must rely in your operate module within the navigation library. There would be the duty of the applying module to deal with the navigation stuff.
If some screens could 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 should 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’ll be able to simply add others composable and charts nested to this chart

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

move arguments

One other want in navigation is to move some arguments. To move primitive knowledge, you possibly can comply with The doc. However in some situations, it’s essential move an object. At present (as of early 2023), there is no such thing as a 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 possibly can see, you get an id for the vacation spot. Let’s write an extension operate so we will 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 operate 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