Jetpack Compose Navigation Best Practices (Beginners)

by

What is Jetpack Compose?

Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

With that, you can not navigate between screens like Activity in XML Base applications.

Jetpack Compose is mostly a single-activity application so how you can manage navigation between the screen.

Here is the solution. The NavController is the central API for the Navigation component. It is stateful and keeps track of the back stack of composables that make up the screens in your app and the state of each screen

Creating a NavHost

Each NavController must be associated with a single NavHost composable. The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between. As you navigate between composables, the contentNavHost is automatically recomposed. Each composable destination in your navigation graph is associated with a route

@Composable
fun HomeScreen(activity: Activity) {

    val navController = rememberNavController()
    val startDestination = Screen.ImageScreen.route

    HomeNavHost(
        activity = activity,
        navController = navController,
        startDestination = startDestination
    )
}

@Composable
fun HomeNavHost(
    activity: Activity,
    navController: NavHostController,
    startDestination: String,
) {
    val imageViewModel: ImageViewModel = viewModel()

    NavHost(
        navController = navController, startDestination = startDestination
    ) {

        composable(route = Screen.ImageFullScreen.route,
            enterTransition = {
                slideIntoContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Left,
                    animationSpec = tween(700)
                )
            },
            exitTransition = {
                slideOutOfContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Left,
                    animationSpec = tween(700)
                )
            },
            popEnterTransition = {
                slideIntoContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right,
                    animationSpec = tween(700)
                )
            },
            popExitTransition = {
                slideOutOfContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right,
                    animationSpec = tween(700)
                )
            },
            arguments =
            listOf(
                navArgument("position") { defaultValue = 0 }
            )
        ) {
            val position = it.arguments?.getInt("position")
            ImageFullScreen(
                state = imageViewModel.state,
                onEvent = {
                    imageViewModel.onEvent(it)
                },
                position = position!!,
                application = activity.application
            ) {
                navController.popBackStack()
            }
        }

        composable(route = Screen.ImageScreen.route, enterTransition = {
            slideIntoContainer(
                towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left,
                animationSpec = tween(700)
            )
        },
            exitTransition = {
                slideOutOfContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left,
                    animationSpec = tween(700)
                )
            },
            popEnterTransition = {
                slideIntoContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right,
                    animationSpec = tween(700)
                )
            },
            popExitTransition = {
                slideOutOfContainer(
                    towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right,
                    animationSpec = tween(700)
                )
            }) {

            ImageScreen(
                state = imageViewModel.state,
                onEvent = {
                    imageViewModel.onEvent(it)
                }
            ) {
                navController.navigate(it)
            }
        }
    }
}

That’s it. It’s DONE.

🍴Check out the complete code on my GitHub Repository. ✍️ Hope this project really helps you.

Hope you enjoy coding Jetpack Compose 😁. Don’t forget to share 📨 and clap 👏. Follow me on LinkedIn and Twitter For More Updates 🔔

Happy Compose !! 🚀

Leave a Comment