-
SummaryI'm experiencing animation issues with content when transitioning from screens that show Bottom Navigation to screens that don't show Bottom Navigation. EnvironmentCircuit version: 0.29.1(Latest Version) Current BehaviorWhen navigating from a screen with Bottom Navigation to a screen without Bottom Navigation, the content area animation doesn't behave as expected 1. Basic SetupCircuitCompositionLocals(circuit) {
val backStack = rememberSaveableBackStack(root = ListScreen)
val navigator = rememberCircuitNavigator(backStack)
val currentScreen = backStack.topRecord?.screen
val shouldShowBottomBar = currentScreen is ListScreen || currentScreen is FavoritesScreen
Scaffold(
modifier = Modifier.fillMaxSize(),
bottomBar = {
if (shouldShowBottomBar) {
NavigationBar(modifier = Modifier.fillMaxWidth()) {
NavigationBarItem(
modifier = Modifier.weight(1f),
selected = backStack.topRecord?.screen is ListScreen,
icon = {
Icon(
imageVector = ImageVector.vectorResource(R.drawable.ic_list),
contentDescription = "List",
)
},
label = { Text("List") },
onClick = {
navigator.resetRoot(ListScreen, saveState = true, restoreState = true)
},
)
NavigationBarItem(
modifier = Modifier.weight(1f),
selected = backStack.topRecord?.screen is FavoritesScreen,
icon = {
Icon(
imageVector = ImageVector.vectorResource(R.drawable.ic_list),
contentDescription = "Favorites",
)
},
label = { Text("Favorites") },
onClick = {
navigator.resetRoot(FavoritesScreen, saveState = true, restoreState = true)
},
)
}
}
},
) { innerPadding ->
NavigableCircuitContent(
navigator = navigator,
backStack = backStack,
modifier = Modifier
.fillMaxSize()
.padding(innerPadding),
)
} Basic.mp42. Apply AnimatedVisibilityCircuitCompositionLocals(circuit) {
val backStack = rememberSaveableBackStack(root = ListScreen)
val navigator = rememberCircuitNavigator(backStack)
Scaffold(
modifier = Modifier.fillMaxSize(),
bottomBar = {
val currentScreen = backStack.topRecord?.screen
val shouldShowBottomBar = currentScreen is ListScreen || currentScreen is FavoritesScreen
AnimatedVisibility(
visible = shouldShowBottomBar,
enter = slideInVertically(initialOffsetY = { it }),
exit = slideOutVertically(targetOffsetY = { it })
) {
// same code above.
}
},
) { innerPadding ->
// same code above.
}
} AnimateVisibility.mp43. Apply CrossFadeNavDecorator in bottom-navigation samplesCrossFadeNavDecorator.mp4Expected BehaviorSmooth transition animation for content area when Bottom Navigation visibility changes Full Source Codehttps://github.com/easyhooon/CircuitScreenAnimation ETCThis was a common issue in regular Compose Navigation when the screen size wasn't set to full size. Even though I've handled all the related processing, the animation issue is still occurring... I think I need to investigate further. While using Box instead of Scaffold in the top-level layout to control BottomNavigation can prevent the above issue, but not using Scaffold can cause problems with windowInsets handling, so I'd like to find a solution within the approach that uses Scaffold. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Think this ends up being a Scaffold issue from not animating the content size change with how it does its own layout? Thought I had this in the sample (If I find it I'll add it at some point), but you could also make the entire root a |
Beta Was this translation helpful? Give feedback.
Think this ends up being a Scaffold issue from not animating the content size change with how it does its own layout?
Thought I had this in the sample (If I find it I'll add it at some point), but you could also make the entire root a
NavigableCircuitContent
. Bottom bar setup becomes it's ownScreen
where it's presenter gets injected with the root navigator. Lets you route calls "up" for anyScreen
you know can't be shown with the bottom bar, but instead needs to be shown full screen.