3

Using PaddingValues for content padding makes Animated visiblility have jumpy effect for a few seconds after Hiding bottom bar. The jumpy effect only goes off only when PaddingValues is not used in the content. but I need to use the padding values in content ex(Modifier.padding(PaddingValues)) to avoid Bottom Bar from overlapping content. Is there a way to fix the jump effect issue.. thanks

enter image description here

MainScreen:

@Composable
fun MainScreenView() {
    val navController = rememberNavController()
    val bottomBarState = rememberSaveable { (mutableStateOf(true)) }
    val navBackStackEntry by navController.currentBackStackEntryAsState()

    when(navBackStackEntry?.destination?.route){
        DetailsNavScreen.WallpapersDetail.route  -> {bottomBarState.value = false}  // on this screen bottom bar should be hidden
        else -> bottomBarState.value = true
    }

    com.google.accompanist.insets.ui.Scaffold(bottomBar = {BottomNavigationBar(navController = navController,bottomBarState) })
    {
            Box(modifier = Modifier.padding(it))// Using Padding Values here to prevent
//Bottom bar from overlaping screen content.. Note the jumppy effect goes off if paddingValues is not used

 {
        NavigationGraph(navController = navController)

        }
    }
}

BottomNavigation:

@Composable
fun BottomNavigationBar(navController: NavController,bottomBarState: MutableState<Boolean>) {

AnimatedVisibility(visible = bottomBarState.value,
enter = slideInVertically { it },
exit = slideOutVertically { it } ,
content = {
    BottomNavigation {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentDestination = navBackStackEntry?.destination
        items.forEach { screen ->
            BottomNavigationItem(
                icon = {
                    Icon(
                        painterResource(id = screen.icon),
                        contentDescription = stringResource(screen.resourceID)
                    )
                },
                label = { Text(stringResource(screen.resourceID)) },
                selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
                onClick = {
                    navController.navigate(screen.route) {
                        // Pop up to the start destination of the graph to
                        // avoid building up a large stack of destinations
                        // on the back stack as users select items
                        popUpTo(navController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        // Avoid multiple copies of the same destination when
                        // reselecting the same item
                        launchSingleTop = true
                        // Restore state when reselecting a previously selected item
                        restoreState = true
                    }
                }
            )
        }
    }
})

}
Sky
  • 127
  • 9
  • Have you found a solution to this? I managed to do a workaround by using `val startPadding = animateDpAsState()`, and manually settings start/end/top/bottom paddings that are calculated from e.g. `paddingValues.calculateStartPadding()`. EDIT: I also found this solution (use `AnimatedContent` instead of `AnimatedVisibility`): https://stackoverflow.com/a/73777969/7111456 – mr. Gauss Feb 28 '23 at 15:10

0 Answers0