Material3 CenterAlignedTopAppBar with TopAppBarDefaults.pinnedScrollBehavior() color change on scroll [293665988]

Fixed

Bug

Status Update

No update yet.

Description

vi...@gmail.com

created issue #1

Jul 29, 2023 11:25AM

Jetpack Compose BOM version: 2023.06.01
Jetpack Compose component used: CenterAlignedTopAppBar
Android Studio Build: #AI-223.8836.35.2231.10406996
Kotlin version: 1.9.0

Steps to Reproduce or Code Sample to Reproduce:

Here is github link:

https://github.com/vladimirlogachov/MoviesPot/blob/master/app/src/main/java/com/vlohachov/moviespot/ui/movies/upcoming/UpcomingMovies.kt

Video that shows the issue is in attachments.

Screen_recording_20230729_131557.mp4

2.7 MB

Download

Comments

vi...@gmail.com <vi...@gmail.com> #2Dec 11, 2023 10:05PM

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

commit a330c0d3bcdd41326f37968a60e6084ad4a2e32c
Author: Chet Haase <chet@google.com>
Date: Wed Jul 05 07:26:46 2023

Convert APIs using PointF to use Float instead

PointF is a convenient mechanism for passing around x.y values
representing 2D points. But there are downsides, including:
- Converting to PointF: You may not have the data in PointF form
to begin with, so using an API which takes PointF requires converting
the data to that form (including allocating a PointF object every time)
- Mutability: Point structures can be mutated internally, causing
unpredictability in what that mutation means. Should the library
react to those changes? Ignore them? Do defensive copies (requiring
even more allocations)? Using primitive types like Float make the
behavior more obvious (by making the data inherently immutable).
- Allocations: Whenever we use object types, there are necessarily
allocations on the Java heap for them. This puts pressure on the GC
at both allocation and collection time. Given the amount of points
being passed around (especially at morph creation time, when curves
are being split and created), this causes a lot of PointF objects to
be allocated (even temporarily). Using Float avoids that problem.

Also fixed bug with unclosed paths causing discontinuity at the
start/end point.

Bug: 276466399
Bug: 290254314
Test: integration and unit tests pass
Relnote: PointF parameters changed to Float pairs
Change-Id: Id4705d27c7be31b26ade8186b99fffe2e2f8450e

M graphics/graphics-shapes/api/current.txt
M graphics/graphics-shapes/api/restricted_current.txt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/CubicShapeTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/CubicTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/PolygonMeasureTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/PolygonTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/RoundedPolygonTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/ShapesTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/TestUtils.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Cubic.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/CubicShape.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/FeatureMapping.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/FloatMapping.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Morph.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/PolygonMeasure.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/RoundedPolygon.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Shapes.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Utils.kt
M graphics/integration-tests/testapp-compose/src/main/java/androidx/graphics/shapes/testcompose/DebugDraw.kt
M graphics/integration-tests/testapp-compose/src/main/java/androidx/graphics/shapes/testcompose/ShapeEditor.kt
M graphics/integration-tests/testapp/src/main/java/androidx/graphics/shapes/test/MaterialShapes.kt

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

ma...@google.com <ma...@google.com> Dec 28, 2023 07:40PM

Reassigned to ma...@google.com.

sg...@google.com <sg...@google.com> #3Jan 2, 2024 09:15PM

PointF was the main (possibly only) mutability issue, marking this as fixed

vi...@gmail.com <vi...@gmail.com> #4Jan 2, 2024 09:23PM

The following release(s) address this bug.It is possible this bug has only been partially addressed:

androidx.graphics:graphics-shapes:1.0.0-alpha04

vi...@gmail.com <vi...@gmail.com> #5Jan 3, 2024 11:53AM

Here is screen recording with pull refresh removed from grid content modifier. AppBar color animation on scroll no longer blocked, but when I call gridState.scrollToItem(0) by clicking scroll to top button, it's color not changed unless I pull content down manually.

Screen_recording_20240103_124946.mp4

4.9 MB

Download

il...@gmail.com <il...@gmail.com> #6Jul 19, 2024 05:00PM

We're facing the same issue with TopAppBar and TopAppBarDefaults.pinnedScrollBehavior. When scrolling quickly on a lazy layout, the app bar container color does not respond.

Repo: https://github.com/smelfungus/NestedScrollAppBarIssue/tree/master

Video: https://drive.google.com/file/d/1XmJENXecUYq0hAC2xGBvrr2k_XeeXvZe/view?usp=sharing

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "Hello!",
                    textAlign = TextAlign.Center,
                )
            },
            scrollBehavior = scrollBehavior,
        )
    },
) { innerPadding ->
    LazyColumn(
        modifier = Modifier.padding(innerPadding),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(100) {
            Text(
                text = "Item $it",
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MaterialTheme.colorScheme.surfaceContainerHigh)
                    .padding(24.dp),
            )
        }
    }
}

to...@gmail.com <to...@gmail.com> #7Oct 11, 2024 08:51AM

I am facing the same bug and i think the root case for it is that the PinnedScrollBehavior doesn't override the onPostFling in its NestedScrollConnection implementation.

I made a crude simple custom version and added

override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
    if (available.y > Velocity.Zero.y)
        state.contentOffset = 0f

    return super.onPostFling(consumed, available)
}

and then it works fine for me!

sg...@google.com <sg...@google.com> Oct 11, 2024 11:50PM

Reassigned to sg...@google.com.

sg...@google.com <sg...@google.com> Nov 25, 2024 02:04PM

Accepted by sg...@google.com.

ap...@google.com <ap...@google.com> #8Nov 26, 2024 07:50AM

Project: platform/frameworks/support
Branch: androidx-main
Author: Shalom Gibly <sgibly@google.com>
Link: https://android-review.googlesource.com/3375689

Fix the app-bars behaviors to detect end of scroll

Expand for full commit details

Fix the app-bars behaviors to detect end of scroll 
 
Apply a fix to all the behaviors to detect the end of scroll in the post 
fling function. This will better ensure an app-bar color change when the 
content is scrolled all the way. 
 
Bug: 293665988 
Test: Manual 
Relnote: "Fix the top and bottom app-bar behaviors to reliably change 
color when content is scrolled all the way." 
 
Change-Id: Idc4e834695cbd7cb8099f7b63cf21d5b764f1c81

Files:

M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/AppBar.kt

Hash: 792c8cdf7db425c674de1214e60c7d01f46e9750
Date: Mon Nov 25 06:03:57 2024

sg...@google.com <sg...@google.com> Nov 26, 2024 07:54AM

Marked as fixed.