Can LazyColumn work along with CoordinatorLayout?

Question

I am migrating an app to Jetpack Compose and I have the following situation on a view/compose hybrid screen:

• The layout root element is a CoordinatorLayout that has a top bar which is collapsible.
• The content is a FragmentViewPager, and one of the pages is the Fragment I am migrating to Compose.
• When I scroll the LazyColumn inside this fragment, the top bar won't collapse/expand.

My question is: Can I do something to make both pieces work together? i.e: When I scroll a LazyColumn, a CoordinatorLayout that contains it will make it's top bar collapse/expand.

Answer 1

LazyColumn could be a cooperating nested child of the parent. CoordinatorLayout.
You have to add only one extra modifier to your LazyColumn.

Notice: fling is also working completely fine (out of the box)

val nestedScrollInterop = rememberNestedScrollInteropConnection()

// Add the nested scroll connection to your top level @Composable element
// using the nestedScroll modifier.
LazyColumn(modifier = Modifier.nestedScroll(nestedScrollInterop)) {
   ...
}

Check official documentation for detailed explanation.

Answer 2

It looks like the Compose Interop Android Documentation was recently updated with a subsection on Nested Scrolling With Views. At this time, Android CoordinatorLayout and Compose LazyColumn interop UX is not officially supported. The official Google Issue Tracker is here.