Blog Infos
Author
Published
Topics
Published
@Composable
fun MyAppNavHost(
    navController: NavHostController,
    modifier: Modifier,
) {
    NavHost(
        navController = navController,
        startDestination = Destinations.NewsListScreen.route,
        modifier = modifier,
    ) {
        // bottom navigation screens & nested graphs
        newsListGraph(navController)
        favoriteNewsGraph(navController)
        profileGraph(navController)

        // common screens in entire app
        newsDetailGraph()

        ...
    }
}

For prevent to create a huge main navGraph, we split it to separate screens and nested graphs. In fact, every screen has its own composable wrapped by a NavGraphBuilder extension function. For a common screen be like:

fun NavGraphBuilder.VerifyCodeGraph() {
    composable(
        route = Destinations.VerifyCodeScreen().route,
    ) {
        VerifyCodeScreen()
    }
}

For managing the route of every screen, we can use a sealed class like this:

sealed class Destinations(val route: String) {
    object NewsListScreen : Destinations("news_list_screen")
    data class NewsDetailScreen(val news: String = "news") : Destinations("news_detail_screen")
    object FavoriteNewsScreen : Destinations("favorite_news_screen")
    object ProfileScreen : Destination("profile_screen")
    object SettingScreen : Destination("setting_screen")
    object ThemeScreen : Destination("theme_screen")
    object LoginScreen : Destination("login_screen")
    object VerifyCodeScreen : Destination("verify_code_screen")
    ...
}
fun NavGraphBuilder.settingListGraph(
    navController: NavController,
) {
    composable(Destinations.SettingScreen.route) {
        NewsListRoute(
            onNavigateToThemeScreen = {
                navController.navigate(
                    route = Destinations.ThemeScreen().route,
                )
            }
        )
    }
}

In this way, there is no need to depend your feature module on the navigation library. There will be the app module responsibility to handle navigation stuff.
If some screens can be grouped in a nested graph, do like this:

fun NavGraphBuilder.profileGraph(
    navController: NavHostController
) {
    navigation(
        startDestination = Destination.ProfileScreen.route,
        route = Destination.ProfileScreen.route.addGraphPostfix(),
    ) {
        composable(Destination.ProfileScreen.route) {
            ProfileScreen(
                onNavigationToLoginScreen = {
                    navController.navigate(
                        route = Destination.LoginScreen.route.addGraphPostfix(),
                    )
                }
            )
        }
        loginGraph()
    }
}

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

, ,

Migrating to Jetpack Compose – an interop love story

Most of you are familiar with Jetpack Compose and its benefits. If you’re able to start anew and create a Compose-only app, you’re on the right track. But this talk might not be for you…
Watch Video

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer for Jetpack Compose
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engin ...
Google

Migrating to Jetpack Compose - an interop love story

Simona Milanovic
Android DevRel Engineer f ...
Google

Jobs

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

‌As you can see, it gets an id for the destination. Let’s write an extension function so we can use it:

fun NavController.navigate(
    route: String,
    args: Bundle,
    navOptions: NavOptions? = null,
    navigatorExtras: Navigator.Extras? = null
) {
    val routeLink = NavDeepLinkRequest
        .Builder
        .fromUri(NavDestination.createRoute(route).toUri())
        .build()

    val deepLinkMatch = graph.matchDeepLink(routeLink)
    if (deepLinkMatch != null) {
        val destination = deepLinkMatch.destination
        val id = destination.id
        navigate(id, args, navOptions, navigatorExtras)
    } else {
        navigate(route, navOptions, navigatorExtras)
    }
}

And for using this function in the source screen:

fun NavGraphBuilder.newsListGraph(
    navController: NavController,
) {
    composable(Destinations.NewsListScreen.route) {
        NewsListScreen(
            onNavigateToDetailScreen = { news ->
                navController.navigate(
                    route = Destinations.NewsDetailScreen().route,
                    args = bundleOf(Destinations.NewsDetailScreen().news to news)
                )
            }
        )
    }
}

In the destination screen:

fun NavGraphBuilder.newsDetailScreen() {
    composable(
        route = Destinations.NewsDetailScreen().route,
    ) { entry ->
        val news = entry.parcelableData<News>(Destinations.NewsDetailScreen().news)
        NewsDetailScreen(news = news,)
    }
}


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

This article was originally published on proandroiddev.com

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

1 Comment. Leave new

  • Krzysztof
    11.04.2023 1:29

    I’ve been thinking for a long time how to pass parameters in an object-oriented way. This is the best solution on the internet! Simple and fast. No need to play with json and reflection.
    In Tiramisu, the getParcelable(String key) method is currently deprecated, so I have to make a condition and use getParcelable(String key, Class clazz).
    Thank you so much for help. Regards.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu