[Bug] PullRefreshIndicator for Material 3 [323787138]

Fixed

Bug

Status Update

No update yet.

Description

br...@pappin.ca

created issue #1

Feb 5, 2024 02:47PM

Observed Behaviour

The PullToRefreshContainer leaves an outline of the indeterminate indicator on the screen, even when the state is not refreshing.

Expected Behaviour

The expected behaviour is that PullToRefreshContainer would hide all traces, including that outer box with a background colour, based on the PullToRefreshState state.

Steps to Reproduce

This is the outer Box in PullToRefreshContainer, which has the background colour set to containerColor: Color = PullToRefreshDefaults.containerColor, and does not get hidden when isRefreshing is false. See: PullToRefresh.kt:135

To reproduce, and check this accuracy, simple set the containerColor on the PullToRefreshContainer, like this:

PullToRefreshContainer(
    modifier = Modifier.align(Alignment.Center),
    state = state,
    containerColor = Color.Red
)

Other Notes

This is somewhat related to: https://issuetracker.google.com/issues/261760718

Screenshot_20240205_092833.png

74 KB

View

Download

Comments

se...@google.com <se...@google.com> Feb 5, 2024 03:15PM

Reassigned to ma...@google.com.

br...@pappin.ca <br...@pappin.ca> #2Feb 5, 2024 03:23PM

We are working around it with this code, but it means a very unsatisfactory user experience, because the indicator doesn't show up early, when the drag starts:


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PullToRefreshBox(
    modifier: Modifier = Modifier,
    isRefreshing: Boolean,
    enabled: Boolean = true,
    onRefresh: () -> Unit,
    content: @Composable BoxScope.() -> Unit,
) {
    val state: PullToRefreshState = rememberPullToRefreshState(enabled = { enabled })

    if (state.isRefreshing) {
        // XXX This should be adjusted when this RFE is resolved and deployed:
        //  https://issuetracker.google.com/issues/323771603
        LaunchedEffect(true) {
            onRefresh()
        }
    }

    if (!isRefreshing) {
        LaunchedEffect(true) {
            state.endRefresh()
        }
    }

    Box(modifier = modifier.nestedScroll(state.nestedScrollConnection)) {
        content()
        // XXX This if() block should be removed when this bug is resolved and deployed:
        //  https://issuetracker.google.com/issues/323787138
        if (state.isRefreshing) {
            PullToRefreshContainer(
                modifier = Modifier.align(Alignment.Center),
                state = state,
            )
        }
    }
}

Message last modified on Feb 5, 2024 03:26PM

br...@pappin.ca <br...@pappin.ca> #3Feb 5, 2024 09:36PM

This may also be covered in https://issuetracker.google.com/issues/317177683

Message last modified on Feb 6, 2024 03:06PM

ma...@google.com <ma...@google.com> Apr 4, 2024 10:38PM

Reassigned to ma...@google.com.

ma...@google.com <ma...@google.com> Apr 11, 2024 06:34PM

Accepted by ma...@google.com.

ap...@google.com <ap...@google.com> #4Apr 18, 2024 06:28PM

Marked as fixed.

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

commit a1154475dd101bcf9867c11ceb567f9511dc7c1c
Author: Mariano Martin <marianomartin@google.com>
Date: Fri Apr 05 12:00:06 2024

[PullToRefresh] Update Material 3 PullToRefresh APIs

Test: updated existing tests

Fixes: 314496282, 317177684, 323787138, 324573502, 317177683

Relnote: "New pull-to-refresh APIs:

- Simplified PullToRefreshState to use fractional values instead of Dp units.
- isRefreshing state is controlled by the user instead of PullToRefreshState.
- Separated out the nested scroll connection from PullToRefreshState. It is handled by the new PullToRefreshBox or Modifier.pullToRefresh.

- This update is a breaking change to previous experimental APIs."

Change-Id: I0adeb950063988d1a05aca7aa135ccd982431423

M compose/material3/material3/api/current.txt
M compose/material3/material3/api/restricted_current.txt
M compose/material3/material3/integration-tests/material3-catalog/src/main/java/androidx/compose/material3/catalog/library/model/Examples.kt
M compose/material3/material3/integration-tests/material3-demos/src/main/java/androidx/compose/material3/demos/PullToRefreshDemo.kt
M compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/PullToRefreshSamples.kt
M compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshIndicatorScreenshotTest.kt
M compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshIndicatorTest.kt
M compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/pulltorefresh/PullToRefreshStateImplTest.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/pulltorefresh/PullToRefresh.kt

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