Sliding transition

[sleeyax]

Is it possible to create a sliding transition between scenes? For example, when I have a bottom navigation bar and click from the item on the left to the right I would like a 'sliding in' transition from the right to the left and vice versa in the other direction. See this image as an illustration:

(Imagine the white part on top is an interesting screen filled with content and the part in purple is the bottom navigation bar)

[Tlaster]

You can use slideInHorizontally as the transition but this only does one way not the vice versa. I wonder if you can just use Pager instead of NavHost for your bottom navigation?

[sleeyax]

The Pager composable is exactly what I need in terms of transitioning between the different screens, but I'm not sure how to implement back presses and deeplinks with it. Both of those are easy to add with NavHost.

[Tlaster]

PreCompose does not expose the BaskStackEntry in NavTransition, so currently is limited to only the one way transition, maybe I can expose the BaskStackEntry in NavTransition so you can make your own transition according to the BackStackEntry.

[sleeyax]

Something like this replicates the Pager effect nicely, but yes then I'd need access to the BackStackEntry to determine the next tab/item:

navTransition = NavTransition(slideInHorizontally(initialOffsetX = {
    val currentTabIndex = tabs.indexOfFirst { it.route == currentRoute }
    val nextTabIndex = currentTabIndex + 1 // TODO: find real next tab index using BaskStackEntry
    if (currentTabIndex < nextTabIndex) {
        1000
    } else {
        -1000
    }
})),

One thing the Pager has is the out of the box ability to switch screens by swiping (instead of tapping the icons at the bottom). I suppose I'd need to implement that manually with the NavHost approach.

How do people actually implement this properly? I would think this is a common use-case.

[Tlaster]

One thing the Pager has is the out of the box ability to switch screens by swiping (instead of tapping the icons at the bottom). I suppose I'd need to implement that manually with the NavHost approach.

How do people actually implement this properly? I would think this is a common use-case.

Well seems like current material guidelines does not like this behavior: https://m3.material.io/components/navigation-bar/guidelines#f2fb63e1-cc22-4853-acf6-b345e340fc47 , and I usually use Pager instead of NavHost to do this before, with some manual handing with back presses and deeplinks.

[sleeyax]

Ah I see. Well it's not exactly a requirement in for the app I'm working on anyways, I was just curious how one would implement such a feature.

maybe I can expose the BaskStackEntry in NavTransition so you can make your own transition according to the BackStackEntry.

It would be nice if this were possible.

[hoangchungk53qx1]

This action is inconsistent with UX

[sleeyax]

This action is inconsistent with UX

What do you mean?