Android Compose - Use traditional View with ComposeView

Question

I use Compose with existed fragment. My structure in xml

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView />
            <MaterialToolbar />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.compose.ui.platform.ComposeView
            android:id="@+id/composeContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.core.widget.NestedScrollView>
</CoordinatorLayout>

In ComposeView, I use LazyColum, it crashed with log

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

I think reason of that bug is LazyColum (scrollable) put inside other scrollable (NestedScrollView). But if I remove NestedScrollView, it look like

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/composeContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

When I scroll list in LazyColumn, CollapsingToolbarLayout isn't scrolling. That is next bug.

How to fix it?

Please help me. Thanks.

This answer might be helpful to you https://stackoverflow.com/questions/67227755/jetpack-compose-collapsing-toolbar — nglauber, Jun 29 '21 at 23:36

Vít Kapitola · Answer 1 · 2021-12-13T13:18:01.813

4

Unwrap your compose view from <androidx.core.widget.NestedScrollView> and use this workaround from Chris Banes. It works like a charm. Just follow instructions in comments:

 * setContent {
 *     Surface(
 *         // Add this somewhere near the top of your layout, above any scrolling layouts
 *         modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())
 *     ) {
 *         LazyColumn() {
 *             // blah
 *         }
 *     }
 * }

This is an existing Compose bug, which can be found in issue tracker.

edited Dec 13 '21 at 13:18

answered Dec 13 '21 at 13:12

Vít Kapitola

499
1
5
9

It makes the background white always – Viks Apr 07 '22 at 23:59

score 0 · Answer 2 · answered Sep 14 '21 at 04:46

I thought this was an issue so i opened one.

https://issuetracker.google.com/issues/199693522

Turns out it's not an issue.

Based on the response from the compose team, LazyColumn looks to have a non-infinite height. By not giving your LazyColumn a fixed height and making your ComposeView's height match_parent (which is infinite because scrollview's height is infinite), LazyColumn cannot work because it now has infinite height.

Android Compose - Use traditional View with ComposeView

2 Answers2