Remove LazyColumn overscroll effect in Jetpack Compose

Question

I am using version 1.1.0-alpha05 of Jetpack Compose and I wanted to know if there is a way to turn off the scrolling effect for LazyColumn like xml (android:overScrollMode="never")?

Answer 1

You can disable it by providing LocalOverscrollConfiguration:

CompositionLocalProvider(
    LocalOverscrollConfiguration provides null
) {
    LazyColumn(Modifier.fillMaxWidth()) {
        items(1000) {
            Text(it.toString())
        }
    }
}

You can also build it into your theme so that it applies to the entire application:

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkThemeColors
    } else {
        LightThemeColors
    }
    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = shapes,
    ) {
        CompositionLocalProvider(
            LocalOverscrollConfiguration provides null,
            content = content
        )
    }
}

p.s. in 1.2.0-rc01 LocalOverScrollConfiguration has being renamed to LocalOverscrollConfiguration

Answer 2

For people who have nested LazyColumns:

To remove the unsightly overscroll effect that appears around the nested content, don't forget to set userScrollEnabled = false on it.