Hey! :wave: I'm currently implementing a collapsin...

# compose

[jermainedilao]

Hey! 👋 I'm currently implementing a collapsing toolbar behavior with a Header + LazyColumn using custom NestedScrollConnection implementation. Everything works perfectly on portrait mode, but I switch to landscape mode, the collapsing toolbar behavior is working BUT the contents of the header gets clipped (because it is longer than the screen height, and I marked it as scrollable in order to participate on nested scroll connection).

Currently, my workaround is when receiving gesture, I consume the scroll to Header first until its fully scrolled, and then I send the scroll event to LazyColumn. But it feels like a hacky workaround.

Does anyone have a working solution for this?

[jermainedilao]

I hope this illustration gives you context of what's happening.

[Seri]

Are you hard-coding the headers height, or measuring it for use in your custom NestedScrollConnection?

[Seri]

I've found that in order to support different layouts due to orientation changes, font sizes, screen densities, etc, I need to measure the height of the app bar layout at run-time

[Seri]

for example, this is on my app bars modifier chain:

modifier = Modifier.layout { measurable, constraints ->
                        // Measure the app bar
                        val placeable = measurable.measure(constraints)
                        connection.appBarMaxHeight = placeable.height.toFloat()

                        // Place it above the screen, according to the scroll offset
                        layout(placeable.width, placeable.height + appBarOffset) {
                            placeable.place(0, appBarOffset)
                        }
                    }

[Seri]

The var appBarMaxHeight is then used inside my NestedScrollConnection to calculate how much scroll offset to consume

[jermainedilao]

Thank you for your response!

No, the header height is dynamic, I get its measured height and use it inside NestedScrollConnection.

We have pretty much the same setup, I think, the only problem for me is that when switching the device to landscape orientation, the header is clipped.

With your current setup, does your entire app bar fit inside the screen height on landscape orientation?

[Seri]

In my setup, there's plenty of room for the app bar and content in landscape

[Seri]

I use remember rather than rememberSaveable to store the connection, so the connection object is completely recreated after an orientation change