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

Gwen

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

Ulani

Is there a way, to create custom overscroll animation something like #40759135 ? – Selfabsorption

@Selfabsorption https://mcmap.net/q/472671/-does-jetpack-compose-have-the-tools-to-create-custom-overscrolleffect – Ulani

@Selfabsorption Here is the compose way of customising overscrolleffect. developer.android.com/reference/kotlin/androidx/compose/… – Chloras

is there any way to add that scroll animation if we have minimum content in the screen because the lazy column won't animate if we have minimum data on the screen @PhilDukhov – Aiguille

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.

Achromaticity

Is there any way to add that scroll animation if we have minimum content on the screen the lazy column won't animate if we have minimum data on the screen – Aiguille

That's probably its own question - try making a new SO question and filling out with all the details you can muster – Achromaticity

doesn't this disable scrolling? – Shocker

@MartyMiller no – Achromaticity

userScrollEnabled - whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. You need to check the documentation :) – Subdiaconate

Thanks for your comment. You need to set userScrollEnabled = false on the inner nested scrollable; this is an important step, otherwise the layout will fail to build (infinite constraints) or if it somehow built would have some strange behaviour when you tried to scroll the inner scrollable. The outer scrollable will still have it set to true and so the entire set of content will scroll. In shorter words - no, this won't disable scrolling. Cheers – Achromaticity