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

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

For instance 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, we have now two fields; backside navigation and navigation between screens.

Configuration Navigation fundamentals

Initially, with Scaffold arrange aNavHost in Foremost exercise and this would be the foremost 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 complete app
newsDetailGraph()
...

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

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

To handle the trail of every display screen, 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 screen wants some parameters, a information class might be embedded within the display screen like information class NewsDetailScreen(val information: String = “information”).

If any display screen must navigate to a different display screen, simply go 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 fashion there isn’t a must rely in your perform module within the navigation library. There would be the accountability 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, take into account 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’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.

go arguments

One other want in navigation is to go some arguments. To go primitive information, you may comply with The doc. However in some situations, it is advisable to go an object. At present (as of early 2023), there isn’t 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 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 screen:

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 screen:

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