Overscroll ripples are missing on scrollable containers (i.e. EdgeEffect) [171682480]

Fixed

Bug

Status Update

No update yet.

Description

al...@gmail.com

created issue #1

Oct 26, 2020 04:16PM

On Android, over-scroll ripples show up by default on scrollable containers such as ScrollView and RecyclerView. Internally they are implemented using EdgeEffect and their colors are typically customized in the application theme using android:colorEdgeEffect.

I noticed this behavior does not seem to exist in Compose. It would be great if it could be supported to achieve parity with the traditional view system!

(I'm filing this under the material tracker because the default edge effect renders a ripple animation on Android, but I realize the scope of this likely falls under the foundation category as well).

Comments

ma...@google.com <ma...@google.com> #2Oct 26, 2020 04:48PM

Reassigned to ma...@google.com.

Project: platform/frameworks/support
Branch: androidx-master-dev

commit c60f33e229e31ab328ef6b59dab63b264954831c
Author: Alexandre Elias <aelias@google.com>
Date: Fri Jul 10 16:23:09 2020

Semantics no-op cleanups

Partly in response to lmr's broad code review, I did a pass of
superficial API/implementation cleanup. The main changes are:

- I changed each Boolean SemanticsProperty where false is equivalent to
not being present to take "Unit" instead. This is conceptually
clearer: it avoids questions like "can I cancel out a semantics from a
merged child by setting it to false?" Because "property = Unit" looks
weird, I also changed the style of these to "property()".

- I moved the Semantics id generator closer to where it's used, in
SemanticsModifierCore. I made it internal and an AtomicInt.
(Note that integer ids are heavily used in the Android
AccessibilityNodeInfo APIs so I can't simply remove them entirely.)

- I deleted dead code. Some examples include SemanticsHintOverrides,
a public API not connected to anything, and SemanticsPropertyKey
merge() open method which is never called. (In both cases I have
a different plan in mind for accessibility.)

Fixes: 145951226
Fixes: 145955412
Test: existing tests
Relnote: "Single-value semantics properties now use a calling style.
For example, 'semantics { hidden = true }' is now written as:
'semantics { hidden() }'."

Change-Id: Ic1afd12ea22c926babc9662f1804d80b33aa0cfc

M ui/integration-tests/benchmark/src/androidTest/java/androidx/ui/benchmark/test/LayoutNodeModifierBenchmark.kt
M ui/ui-core/api/0.1.0-dev15.txt
M ui/ui-core/api/current.txt
M ui/ui-core/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-core/api/public_plus_experimental_current.txt
M ui/ui-core/api/restricted_0.1.0-dev15.txt
M ui/ui-core/api/restricted_current.txt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/graphics/vector/VectorTest.kt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/semantics/SemanticsTests.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidActuals.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeView.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeViewAccessibilityDelegateCompat.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidPopup.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/Expect.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsConfiguration.kt
D ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsHintOverrides.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsModifier.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsNode.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsOwner.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsWrapper.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/semantics/SemanticsProperties.kt
M ui/ui-foundation/api/0.1.0-dev15.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev15.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Clickable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Dialog.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Scroller.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Selectable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Toggleable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/semantics/FoundationSemanticsProperties.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CardTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CheckboxScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/RadioButtonScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SurfaceTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ripple/RippleIndicationTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/AssertsTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/CallSemanticsActionTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ErrorMessagesTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/FindersTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/PrintToStringTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ScrollToTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-test/src/main/java/androidx/ui/test/Actions.kt
M ui/ui-test/src/main/java/androidx/ui/test/Filters.kt
M ui/ui-text/api/0.1.0-dev15.txt
M ui/ui-text/api/current.txt
M ui/ui-text/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-text/api/public_plus_experimental_current.txt
M ui/ui-text/api/restricted_0.1.0-dev15.txt
M ui/ui-text/api/restricted_current.txt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/CoreTextField.kt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/TextSemanticsProperties.kt

https://android-review.googlesource.com/1360099

ki...@gmail.com <ki...@gmail.com> #3Jun 21, 2021 01:00PM

Hey guys, is there any update on this? Will this be available in the 1.0?

ma...@google.com <ma...@google.com> #4Jun 21, 2021 01:23PM

Hello. I'm afraid it won't be available for 1.0.

We're looking at the generic overscroll support in foundation, on of top which we will be able to build material/android-esque edge effect or a new overscroll experience. Given the scope of the task, we will start looking at this only after 1.0.

ki...@gmail.com <ki...@gmail.com> #5Jun 21, 2021 06:33PM

That's cool, no worries, can always wrap a ComposeView in a ScrollView until then I guess ;)

ap...@google.com <ap...@google.com> #6Aug 23, 2021 02:14PM

Project: platform/frameworks/support
Branch: androidx-main

commit 48588ca4927b8277d21845a4e52c1d3d57c4d5b1
Author: Matvei Malkov <malkov@google.com>
Date: Thu Aug 05 16:52:08 2021

Add support for glowing overscroll.

This CL adds support for pre-stretch glowing overscroll in all types of default scrolling containers (LazyColumn, LazyRow, Modifier.verticalScroll, Modifier.horizontalScroll).

With the addition of the effect itself, this CL adds experimental android-only API to allow for customisations of this effect, for functionality to be on par with views glowing effect.

Bug: 171682480
Test: add new intergration and screenshot tests
Relnote: Glow effect for scroll has been added. New experimental OverScrollConfiguration API has been added to allow for configuration of the overscroll visual effect. Provide null to turn off the overscroll effect.
Change-Id: I0c3042f89365408e92f657330ed3164e6f3e12f8

M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/public_plus_experimental_current.txt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/DraggableTest.kt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/ScrollableTest.kt
A compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/gesture/OverScrollScreenshotTest.kt
A compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/gesture/OverScrollTest.kt
A compose/foundation/foundation/src/androidMain/kotlin/androidx/compose/foundation/gestures/AndroidOverScroll.kt
A compose/foundation/foundation/src/androidMain/kotlin/androidx/compose/foundation/gestures/OverScrollConfiguration.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Scroll.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/Draggable.kt
A compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/OverScroll.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/Scrollable.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyList.kt
A compose/foundation/foundation/src/desktopMain/kotlin/androidx/compose/foundation/gestures/DesktopOverScroll.kt

https://android-review.googlesource.com/1788134

ap...@google.com <ap...@google.com> #7Sep 1, 2021 02:09PM

Marked as fixed.

Project: platform/frameworks/support
Branch: androidx-main

commit 0ace9aa53ec295b8342b5f8fc16c11b29f105b82
Author: Matvei Malkov <malkov@google.com>
Date: Fri Aug 13 10:28:10 2021

Support for stretch overscroll [android S+] in Compose.

Adds support for stretch type effect on S+ devices, handling cases for pre scroll and pre fling accordingly to allow for better user experience.

Fixes: 171682480
Fixes: 197851813
Test: Added more tests for OverScrollController + dedicated StretchOverscrollTests
Relnote: Support for stretch overscroll has been added on android S devices.
Change-Id: Iccf3c3830a01469940828e21bc32b569951c187e

M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Scroll.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/OverScroll.kt
M compose/foundation/foundation/src/desktopMain/kotlin/androidx/compose/foundation/gestures/DesktopOverScroll.kt
A compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/gesture/StretchOverscrollTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyList.kt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/gesture/OverScrollTest.kt
A compose/foundation/foundation/src/androidMain/kotlin/androidx/compose/foundation/gestures/EdgeEffectCompat.kt
M compose/ui/ui-test-junit4/src/test/kotlin/androidx/compose/ui/test/junit4/RobolectricComposeTest.kt
M compose/foundation/foundation/src/androidMain/kotlin/androidx/compose/foundation/gestures/AndroidOverScroll.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/Scrollable.kt

https://android-review.googlesource.com/1795727

am...@gmail.com <am...@gmail.com> #8Sep 3, 2021 09:02AM

I suppose android S+ is Android 12+. Will there ever be support for Android 11 and below?

al...@gmail.com <al...@gmail.com> #9Sep 3, 2021 09:58AM

Yes, it is available in the latest compose released yesterday

ma...@google.com <ma...@google.com> #10Sep 3, 2021 10:57AM

Will there ever be support for Android 11 and below?

Stretch effect overscroll will be supported only for android 12 and above. For versions prior to that, the original glow edge overscroll will be shown.

This is done by design, so that overscroll in every app will feel the same, leaving users with the feel of consistency.

I hope that makes sense.

ku...@gmail.com <ku...@gmail.com> #11Sep 5, 2021 11:03AM

I tried this effect and theres a weird stretch when overscrolling. I am not sure if this an emulator Issue or compose issue. I am attaching the screenrecording.

2021-09-05-16-23-00_Lctuh49Y_75lI.mkv

783 KB

Download

ma...@google.com <ma...@google.com> #12Sep 6, 2021 09:36AM

This looks broken indeed. I believe this should not happen if you are using latest snapshot where we properly support stretch effect. Could you share more information about this sample's setup? Compose version, code with snippet (is it LazyColumn, Modifier.verticalScroll or your own Modifier.scrollable) and any other relevant info.

Thanks.

ku...@gmail.com <ku...@gmail.com> #13Sep 6, 2021 08:34PM

I used LazyColumn in compose_version = '1.1.0-alpha03' . I just created a brand new project to test this, still the same issue. I am attaching android version,build number... if that helps.

//code snippet


@Composable
fun ScreenMain() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        content = {

            items(30) {
                RowItem(number = it)
            }
        })
}

@Composable
fun RowItem(number: Int) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .padding(all = 8.dp)
            .border(width = 1.dp, color = Color.Red),
        contentAlignment = Alignment.Center,
    ) {
        Text(text = "Row $number", color = Color.Black)
    }
}

Message last modified on Sep 7, 2021 06:14PM

android_version.png

62 KB

View

Download

ma...@google.com <ma...@google.com> #14Sep 7, 2021 03:26PM

Thanks for additional info.

I tried this example in the emulator, pixel 3 and some various Samsungs, and I cannot reproduce the issue for some reason.

There's a version check that prohibits any kind of overscroll for S devices on 1.1.0-alpha03.

Could you please try a real phone with android S if you have some? Or a fresh emulator image?

Alternatively, you can turn off overscroll for now and wait for alpha04 where stretch overscroll for S devices will be fully supported.

ku...@gmail.com <ku...@gmail.com> #15Sep 7, 2021 07:35PM

Thanks for the reply. I reinstalled Android S Images and then created a new virtual device. Issue seems to be resolved now. Probably issue was with the S preview.

ma...@google.com <ma...@google.com> #16Sep 8, 2021 09:02AM

Oh, that makes sense as well, as some S previews had incomplete support for stretch in the RenderNode, so it might have been broken there.

I'm glad that everything is working well for you now!

al...@gmail.com <al...@gmail.com> #17Sep 15, 2021 06:22PM

Is the default material color correct for both light mode and dark mode? I see 0xff666666 hardcoded here: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/androidMain/kotlin/androidx/compose/foundation/gestures/OverScrollConfiguration.kt;l=38?q=OverScrollConfiguration%20lang:kotlin&ss=androidx%2Fplatform%2Fframeworks%2Fsupport:compose%2F

But IIRC this color is themed using android:colorEdgeEffect, for example here: https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/res/res/values/themes_material.xml;l=775?q=themes_material.xml&ss=android%2Fplatform%2Fsuperproject:frameworks%2Fbase

Might need to update MaterialTheme.kt and the material-components-android-compose-theme-adapter project too if this is the case.

ma...@google.com <ma...@google.com> #18Sep 15, 2021 06:37PM

Yup, you are right.

The default color is design system agnostic. Since we're waiting for API feedback - we cannot wire up foundation glow api with material just yet. It will be done as soon as we will graduate OverScrollConfiguration from experimental.

you can do it manually for now in your app.