[Navigation Animation] Add contentZIndex for AnimatedNavHost

[ommiao]

The problem

I found a weird issue is that the back layer covers the front layer when pop back stack like this:

old.mp4

Why and How

The reason is that the z-indices of all layers are same as default. I add contentZIndex for NavGraphBuilder.navigation() and pass it to AnimatedContent in AnimatedNavHost.

Now it looks good:

new.mp4

Here is my test code:

AnimatedNavHost(
    navController = navHostController,
    startDestination = Screen.Homepage.route,
    enterTransition = {
        slideIntoContainer(
            towards = AnimatedContentScope.SlideDirection.Left,
            animationSpec = tween(800)
        )
    },
    exitTransition = {
        slideOutOfContainer(
            towards = AnimatedContentScope.SlideDirection.Left,
            animationSpec = tween(800),
            targetOffset = { it / 2 }
        )
    },
    popEnterTransition = {
        slideIntoContainer(
            towards = AnimatedContentScope.SlideDirection.Right,
            animationSpec = tween(800),
            initialOffset = { it / 2 }
        )
    },
    popExitTransition = {
        slideOutOfContainer(
            towards = AnimatedContentScope.SlideDirection.Right,
            animationSpec = tween(800)
        )
    }
) {
    composable(route = Screen.Homepage.route) {
        HomepageScreen()
    }
    composable(route = Screen.Theme.route) {
        ThemeScreen(theme = theme) { theme = it }
    }
}

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[v1kee]

I was looking for a solution to this yesterday, thanks! Hope to be able to use it soon!

[ommiao]

I was looking for a solution to this yesterday, thanks! Hope to be able to use it soon!

@v1kee No worries. The workaround is that clone the code of navigation with animation and do the changes like this PR. It's won't take much effort.

[maurycyw]

Great solution! Could we just rely on the order within the backstack instead? having a z index override could still be useful tho.

[ommiao]

Great solution! Could we just rely on the order within the backstack instead? having a z index override could still be useful tho.

@maurycyw That's great! Now I use the orders of backQueue as z-index.

[ommiao]

@jbw0033 Hi, any updates?

[ianhanniballake]

As explained in this comment:

We've added what we believe is the correct z-ordering in #1384, released as part of v0.27.1 and aren't planning on offering any ability to override it at this time. Please upgrade and try it out!