Jetpack Compose Navigation Best Practices (Beginners)
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 !! 🚀