Given a typical app with some bottom bar buttons and sections in which users can navigate from list to detail, ideally I’d like to keep the nice default fade effect for bottom bar transitions, and slide in/out for list-detail transitions. This is my oversimplified relevant code.-
Scaffold(
...
bottomBar = {
BottomNavigation() {
}
}
) { padding ->
NavHost(navController, startDestination = TabView.Home.route) {
composable(TabView.Home.route) {
Home()
}
navigation(route = TabView.Browse.route, startDestination = NavigationDestination.Games.route) {
composable(route = NavigationDestination.GamesList.route) {
GamesList()
}
composable(route = NavigationDestination.GameDetail.route) {
GameDetail()
}
}
composable(TabView.Contact.route) {
ContactForm()
}
}
my first approach would be to add the wanted animations to my GameDetail
route like this.-
enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(transitionDuration)) },
exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(transitionDuration)) },
popEnterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(transitionDuration)) },
popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(transitionDuration)) }
which works as expected if I open the detail and pop back, but gives undesired result if I tap on a different tab button from the detail (i.e. the home screen appears fading in, BUT the GameDetail disappears with the slide animation).
Is there a simple way to grant that the slide animations would only work when ‘pushing’ / ‘popping’ the detail, but not when navigating through the bottom bar?
And more generally, is there a better approach for combining both kind animations? Would it be a better practice to have two independent navControllers?