{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

NestedScrollInteropConnectionKt

public final class NestedScrollInteropConnectionKt


Summary

Public methods

static final @NonNull NestedScrollConnection

Create and remember the NestedScrollConnection that enables Nested Scroll Interop between a View parent that implements androidx.core.view.NestedScrollingParent3 and a Compose child.

Public methods

rememberNestedScrollInteropConnection

@Composable
public static final @NonNull NestedScrollConnection rememberNestedScrollInteropConnection(@NonNull View hostView)

Create and remember the NestedScrollConnection that enables Nested Scroll Interop between a View parent that implements androidx.core.view.NestedScrollingParent3 and a Compose child. This should be used in conjunction with a androidx.compose.ui.input.nestedscroll.nestedScroll modifier. Nested Scroll is enabled by default on the compose side and you can use this connection to enable both nested scroll on the view side and to add glue logic between View and compose.

Note that this only covers the use case where a cooperating parent is used. A cooperating parent is one that implements NestedScrollingParent3, a key layout that does that is androidx.coordinatorlayout.widget.CoordinatorLayout.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
import androidx.compose.ui.unit.dp

val nestedSrollInterop = rememberNestedScrollInteropConnection()
// Add the nested scroll connection to your top level @Composable element
// using the nestedScroll modifier.
LazyColumn(modifier = Modifier.nestedScroll(nestedSrollInterop)) {
    items(20) { item ->
        Box(
            modifier = Modifier
                .padding(16.dp)
                .height(56.dp)
                .fillMaxWidth()
                .background(Color.Gray),
            contentAlignment = Alignment.Center
        ) {
            Text(item.toString())
        }
    }
}
Parameters
@NonNull View hostView

The View that hosts the compose scrollable, this is usually a ComposeView.

Learn how to enable nested scroll interop: