im having an issue trying to animate my details page using navhost with a bottom naveigation bar... ...

# compose

[Jeremie D]

im having an issue trying to animate my details page using navhost with a bottom naveigation bar... I used enter/exit transitions of slide into/ slide out of on both the navcontroller and the bottom bar, but the details view only has the height of the previous view initially and then snaps to full height after the transition ends which is kind of jank.

[Jeremie D]

I guess the main issue is resizing of the rest of the view when i animate dismiss my bottom nav.

[Arsildo Murati]

I have tried so many things to try to avoid this but i simply could not find a smooth way of doing it with using just 1 wrapper scaffold and 1 navhost to wrap all of the nested graphs / destinations

[Arsildo Murati]

the only way i know is to have 2 navhosts

[Arsildo Murati]

one that is separate to the bottom bar destinations

[Arsildo Murati]

and the other one for the rest of the app flows

[Arsildo Murati]

In an app where there is a lot of this it causes so much jank and lag

[Arsildo Murati]

My solution looks like this

[Arsildo Murati]

@Serializable
object DashboardRoute

@Serializable
private object Dashboard

fun NavController.navigateToDashboard(navOptions: NavOptions? = null) {
    this.navigate(route = DashboardRoute, navOptions = navOptions)
}


fun NavGraphBuilder.dashboard(
    builder: NavGraphBuilder.(NavController) -> Unit
) {
    navigation<DashboardRoute>(startDestination = Dashboard) {
        composable<Dashboard> {
            val navController = rememberNavController()
            val navBackStackEntry by navController.currentBackStackEntryAsState()
            val currentDestination = navBackStackEntry?.destination
            LaunchedEffect(currentDestination) {
                val routes = navController.currentBackStack.value.joinToString(" >>> ") {
                    it.destination.route.toString()
                }
                println("Dashboard BackStack: $routes")
            }
            Scaffold(
                contentWindowInsets = WindowInsets(0, 0, 0, 0),
                bottomBar = {
                    NavigationBar(
                        navController = navController,
                        currentDestination = currentDestination
                    )
                }
            ) { contentPadding ->
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(contentPadding)
                        .consumeWindowInsets(contentPadding)
                ) {
                    NavHost(
                        navController = navController,
                        startDestination = RelativesScreen,
                        modifier = Modifier.fillMaxSize(),
                        builder = { builder(navController) }
                    )
                }
            }
        }
    }
}

[Arsildo Murati]

and it looks like this

[dorche]

Do you need the scaffold? Can you use a Box instead, put bottom alignment on the BottomBar composable and pad your screen content with the height of the bottom bar for the screens that show a bottom bar. That's what I have and it works fine without the "jump" that a Scaffold or a Column introduces

[Arsildo Murati]

Tried, you still end up calculating the size difference so this doesn't work either

[dorche]

Not really if you do what Material3 does and your BottomBar has a fixed height

[Arsildo Murati]

I would be happy to see some code, I tried setting a fixed height padding and that as i said doesn't do the job either

[dorche]

Can't quite share real code as it's not public but a toned down version is as simple as this

Box(
    modifier = Modifier.fillMaxSize()
) {
    NavHost()
    Box(
        modifier = Modifier.align(Alignment.BottomCenter)
    ) {
        AnimatedVisibility(
            visible = showBottomNav,
            modifier = Modifier,
            enter = bottomNavEnter,
            exit = bottomNavExit,
        ) {
            BottomBar()
        }
    }
}

Then each Composable route inside the NavHost can add bottom padding to it's elements, with correct first frame because you know which screen has the bottom nav showing and which doesn't

[Arsildo Murati]

I tried this, and it seems to work nicely 🙌 Guess I was too lenient on the scaffold wrapping the whole app

[Arsildo Murati]

Thanks for the take

[Arsildo Murati]

The drawback is that you have to add manual padding to the elements as you said.

[dorche]

Yeah I suspect it's possible to overcome that if you copy Scaffold's code and change it so it lays out elements as if they are in a Box instead of a Column but also keep the part where it measures the bottom nav and exposes its size as contentPadding. Then you'd get the best of both worlds but you're back to Subcomposition

[dorche]

Another option is to use Shared element ransitions and move your BottomBar to your screen content

[Arsildo Murati]

No you could use scaffold I was just too lenient on the bottom bar slot I guess

[dorche]

The latter is probably much easier and neater code tbh

[Arsildo Murati]

this seems to work perfectly fine

[Arsildo Murati]

best of both worlds

[Arsildo Murati]

only problem is need to add spacers

[dorche]

But then you're not using any functionality of Scaffold if you have it like that really so you're just paying the cost of subcomposition for no reason

[Arsildo Murati]

i get free paddings

[dorche]

Padding of what? contentPadding I bet is now always 0

[Arsildo Murati]

Unless i it is being consumed it is not always zero

[Arsildo Murati]

the content itself is within the navhost so it is being applied no?>

[dorche]

The actual padding values inside the contentPadding variable will be 0,0,0,0
Print them out and you'll see.

I'm 99% sure your Scaffold now gives you no benefit/functionality that can't be achieved without Subcomposition. But you're still paying the price of it by using it over Box/Column/Whatever

[Arsildo Murati]

I can test 🙂

[Arsildo Murati]

Good input

[Arsildo Murati]

Paddings are PaddingValues(start=0.0.dp, top=0.0.dp, end=0.0.dp, bottom=0.0.dp)

[Arsildo Murati]

Youre right again, i guess i can just fallback to putting a background modifier on the top parent box

[Arsildo Murati]

Thanks for the input this was very helpful

[Jeremie D]

awesome! will try to implement this week. Thanks !!