I’m sure questions like these are frowned upon, bu...

# compose

[Robert Menke]

I’m sure questions like these are frowned upon, but I’m trying to plan for my own project. Are transition animations coming in the 2.5 release of navigation-compose? Deciding between waiting or integrating the accompanist navigation lib.

[mattinger]

I think this is a very fair question to ask in here. I think the goal of a lot of accompanist projects is to get back into the main compose or jetpack code they are trying to supply missing functionality for.

[mattinger]

That said, i have zero clue on the answer 😉

[Robert Menke]

Haha no worries guess I’ll wait and see for a little bit anyways

[Ian Lake]

AndroidX has a strict policy against using experimental APIs across different groups (i.e., androidx.compose and androidx.navigation), so we're still waiting for the Compose Transition APIs we need to become stable before we can officially add them to Navigation Compose (even APIs like AnimatedContent are still experimental)

[Ian Lake]

Given that those APIs are still experimental because shared elements are coming (and those will likely to change the API surface in a number of (small but API incompatible) ways), I'd suggest using Accompanist for the time being

[Robert Menke]

Thanks @Ian Lake 🙌 . I did end up switching over to Accompanist (very easy update - awesome work). Only issue I’m running into is transitioning smoothly from layouts that have bottom/top nav bars to layouts that don’t since my nav graph is defined inside the body of Scaffold .

Scaffold(
    topBar = { NavigationTopBar(navController, drawerState) },
    bottomBar = { BottomNavigationBar(navController, authViewModel, agreementViewModel) },
    content = { padding -> AppBody(padding, navController, authViewModel, agreementViewModel) }
)

Attached a quick video to show off what I’m talking about. The layout jumps suddenly because the padding applied by the scaffold is briefly removed before transitioning.

2022_03_08_17_02_57.mp4

[Ian Lake]

We've talked about how to animate out your bottom bar and observing the animation state to avoid doing both at the same time just yesterday: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1646712758617649?thread_ts=1646388328.541899&cid=CJLTWPH7S

[Robert Menke]

Wonderful. Appreciate the help as always!

[Robert Menke]

I believe I’m a step closer with the changes you suggested in #633. It seems like it’s still going to be a bit clunky unless I can also animate the PaddingValues passed to the content block in Scaffold (video attached). I’ve been trying to think about a hacky way of accomplishing this with animateDpAsState but I wanted to post here again in case I have some other misunderstanding of making a transition like this.

2022_03_08_21_13_39.mp4

[Robert Menke]

Ok animating the padding values ended up being trivial - was overthinking that one. Looking into the implementation of Scaffold it looks like the way it places content is actually problematic for this approach. Instead of providing a top padding value it just places the content at an offset, so even when I attempt to animate the top padding the UI still jerks into place.

Inside of ScaffoldLayout:

val bodyContentPlaceables = subcompose(ScaffoldLayoutContent.MainContent) {
    val innerPadding = PaddingValues(bottom = bottomBarHeight.toDp())
    content(innerPadding)
}.fastMap { it.measure(looseConstraints.copy(maxHeight = bodyContentHeight)) }

// Placing to control drawing order to match default elevation of each placeable

bodyContentPlaceables.fastForEach {
    it.place(0, topBarHeight)
}

2022_03_08_21_56_11.mp4

[Robert Menke]

Opened an issue here related to the Scaffold component. I don’t think it’s currently possible to create a smooth animation given the way it places the content https://issuetracker.google.com/issues/223556623.