androidandroid-jetpack-composelazycolumnandroid-overscoll

Remove LazyColumn overscroll effect in Jetpack Compose


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")?

enter image description here


Solution

  • 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