Hello everyone, hope you are all doing well. Does ...

# compose-android

[Djuro]

Hello everyone, hope you are all doing well. Does someone have an idea on how to do this? Should I use `material3`'s LargeTopAppBar or should I approach this issue with a custom solution?

VID_20240801_144545_295.mp4

[MR3Y]

This is quite straightforward if you understand nested scrolling in compose.
Coincidentally, Compose team Just published this short video yesterday:

https://www.youtube.com/watch?v=JfYBCKRjFA0▾

which should give you a good start, and you can google nested scrolling in compose or search here in this channel to get more materials and see other ideas & their implementation.

[Colton Idle]

@Doris Liu is this a case where shared elements would be useful? Or would you recommend using the nestedScroll modifier?

[Djuro]

My question was if this can be made with material3 TopAppBar component, I understood that i should go with a custom solution, did I get it correctly? @MR3Y

[MR3Y]

I didn't use material3 TopAppBar for anything beyond simple Top bars, so, I can't be sure if it fits your needs but I guess it would be limited in terms of customization as it implements the "opinionated" material3 design system.

[Doris Liu]

You won't be able to achieve this shared-element effect with the current implementation of material3 LargeTopAppBar. The title is composed twice in the current impl and there's no straightforward way to distinguish which one is entering vs exiting, which makes it challenging to setup a shared element transition. I would recommend filing a feature request for it in the material component, and going with a custom solution.

[Colton Idle]

@Doris Liu to clarify on my question... if I went for a custom solution would you rec just going with shared element or nestedScroll modifier?

[Doris Liu]

In this particular example, either approach would work.

With shared element transition, you'll need to create a Transition with SeekableTransitionState , and seek the transition between the collapsed and expanded state. It might be an overkill for a simple application like this. If you have other things changing simultaneously such as background color, alpha of other elements, then shared element would be my recommendation.

With nestedScroll, you'll need to obtain the target position for both states, and interpolate between the two positions. It'll likely be easier to do for this simple example.

[Djuro]

okay, seems like I am going with a custom implementation