IssueTracker

I'll have a look in this sprint, sorry for the slow response.

I wrote a simple repro of this: https://screenshot.googleplex.com/3N6JjKeRMJWGrEz

A couple of observations:

1. it occurs with Pager + LazyColumn as well as Pager + ScalingLazyColumn (so isn't Wear specific)
2. if you delay clicking/scrolling, then the UI does respond to the clicks first time. Could be that there's a Pager animation running on the main thread that's blocking the gestures.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PagerWithIndicator(swipeState: SwipeToDismissBoxState) {
    val pagesCount = 3
    val pagerState = rememberPagerState { pagesCount }
    var background by remember { mutableStateOf(Color.Black) }
    var selectedPage by remember { mutableIntStateOf(0) }
    val animatedSelectedPage by animateFloatAsState(
        targetValue = pagerState.targetPage.toFloat(), label = "page-indicator",
    ) {
        selectedPage = it.toInt()
    }

    val pageIndicatorState: PageIndicatorState = remember {
        object : PageIndicatorState {
            override val pageOffset: Float
                get() = animatedSelectedPage - selectedPage
            override val selectedPage: Int
                get() = selectedPage
            override val pageCount: Int
                get() = pagesCount
        }
    }

    Box(modifier = Modifier.background(background)) {
        HorizontalPager(
            modifier = Modifier.fillMaxSize().edgeSwipeToDismiss(swipeState),
            state = pagerState,
        ) {page ->
            val scrollState = rememberScalingLazyListState()
            ScalingLazyColumn(
//            val scrollState = rememberLazyListState()
//            LazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxWidth()
            ) {
                item {
                    ListHeader { Text("Page $page") }
                }
                items(4) {
                    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                        Chip(
                            onClick = {
                                background =
                                    if (background == Color.Black) Color.DarkGray else Color.Black
                            },
                            label =  {
                                Text(text = "Click", color = Color.Black)
                            }
                        )
                    }
                }
            }
        }
        HorizontalPageIndicator(
            pageIndicatorState = pageIndicatorState,
        )
    }
}

As a workaround, it's possible to use pagerState.isScrollInProgress to determine whether the UI is ready to receive clicks. In my repro, I disabled the buttons until the scroll was complete: https://screenshot.googleplex.com/8YkyCYBX9SHakYW

Alternatively, you could experiment with the fling behavior, as the defaults do seem to take longer to settle that I'd expect - https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/pager/Pager.kt;l=358

For example, I've just tried setting HorizontalPager(state = pagerState, flingBehavior = PagerDefaults.flingBehavior(pagerState, snapAnimationSpec = tween(150, 0))) and that eliminates the wait in my demo between the scroll visibly finishing and the buttons being re-enabled.

You could also try Horologists HorizontalPagerDefaults.flingBehavior, but I think that still takes a little too long for the scroll to finish.

From discussions, b/268160207 is a related issue. This is a known interaction between scrollables vs pointer input. It's more pronounced in pager because of the snapping animation, but it's reproducible in other scrollables. It comes from the fact that whilst a scrollable is moving, click interactions will not be captured but rather contribute to the continuation of the scrolling movement.

Meanwhile, please try the workaround to reduce the duration of the fling animation spec suggested in https://b.corp.google.com/issues/303807950#comment8.

This is a screencast with PagerDefaults.flingBehavior(pagerState, snapAnimationSpec = tween(150, 0)) https://screenshot.googleplex.com/3byRFXyRAQK5xAh

Does this have some noticeable impact in some edge cases? Does it look jarring if you cross the snap threshold but the page is in the middle?

Basically, what's the down side?

Overall, this looks great to me.

Thanks Yuri - here's a screencast of edge-case snapping, still looks ok IMO: https://screenshot.googleplex.com/8rSP3CcVhhBFV73

would be great to test this on device, do we have an apk?

Tested on device and looks good from UX side

Made an update to horologist to recommend PagerDefaults.flingBehavior(pagerState, snapAnimationSpec = tween(150, 0)) in https://github.com/google/horologist/pull/1866

Nothing seems obviously wrong. This is our demo, which definitely allows the user to tap first time:

@Composable
fun PagerWithIndicator(swipeState: SwipeToDismissBoxState) {
    val pagesCount = 3
    val pagerState = rememberPagerState { pagesCount }
    var background by remember { mutableStateOf(Color.Black) }
    var selectedPage by remember { mutableIntStateOf(0) }
    val animatedSelectedPage by animateFloatAsState(
        targetValue = pagerState.targetPage.toFloat(), label = "page-indicator",
    ) {
        selectedPage = it.toInt()
    }

    val pageIndicatorState: PageIndicatorState = remember {
        object : PageIndicatorState {
            override val pageOffset: Float
                get() = animatedSelectedPage - selectedPage
            override val selectedPage: Int
                get() = selectedPage
            override val pageCount: Int
                get() = pagesCount
        }
    }

    Box(modifier = Modifier.background(background)) {
        HorizontalPager(
            modifier = Modifier.fillMaxSize().edgeSwipeToDismiss(swipeState),
            state = pagerState,
            flingBehavior =
                PagerDefaults.flingBehavior(
                    pagerState,
                    snapAnimationSpec = tween(150, 0),
                )
        ) { page ->
            val scrollState = rememberScalingLazyListState()
            ScalingLazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxWidth()
            ) {
                item {
                    ListHeader { Text("Page $page") }
                }
                items(4) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.Center
                    ) {
                        Chip(
                            onClick = {
                                background =
                                    if (background == Color.Black) Color.DarkGray else Color.Black
                            },
                            label = {
                                Text(text = "Click", color = Color.Black)
                            },
                            enabled = !pagerState.isScrollInProgress
                        )
                    }
                }
            }
        }
        HorizontalPageIndicator(
            pageIndicatorState = pageIndicatorState,
        )
    }
}

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

commit 418f3a6588d2384e49d996cebcb2d5678ceeb3ea Author: Levi Albuquerque levima@google.com Date: Mon Feb 12 16:23:19 2024

Click on moving list initial issue

Due to an early fix we were prioritizing continuing the scroll of nested lists in any direction when taping on a parent list. The actual intended behavior was to consider nested children that scroll -on the same direction- if the click happened on the said child. In this CL I'm reverting those changes as we will revisit the nested scrolling UX and there will be more benefits to having the original behavior without the issues the fix introduced.

Test: Added test to check behavior.
Relnote: N/A
Fixes: 293777304
Fixes: 289685606
Fixes: 296064317
Bug: 175010956
Bug: 179417109
Change-Id: Ia71ed02e06603c6c27ad4648cfc8e32587397d63

M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/ScrollableTest.kt M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/Scrollable.kt

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

Hey @stevebower @pedrobatista could you verify if this fixes the issue for wear foundation? Thanks!

Ok, I'll take a look at this.

Still not fixed, if we remove our custom animation override, the pager takes a while to settle: https://screenshot.googleplex.com/ATbXBpJbeHW3JAh

(edited to upload a gif for ease of reference)

Hi @stevebower just bringing the chat conversation we've had to this bug for visibility. In order to update the behavior in Foundation Pager with some good default spring animation (that also works for wear devices) we need wear compose to provide a good visibility threshold to be used here.

Project: platform/frameworks/support
Branch: androidx-main
Author: Aman Khosa <akhosa@google.com>
Link:      https://android-review.googlesource.com/3315519

Change Wear Compose foundation pager snapAnimationSpec

Change Wear Compose foundation pager snapAnimationSpec 
 
Currently the snapAnimationSpec is set to a tween with a duration 
of 150ms. This was set to ensure the Pager settles quickly so that 
contents are focused and clickable, see b/345191109. 
 
However a tween animation causes an ugly double jump when flinging 
fast to the top or bottom of a SLC inside of a VerticalPager, see 
b/349781047. 
 
Changing to a Spring animation with no bounciness and high 
stiffness achieves the same behaviour of settling quickly, and 
avoids the double jump. Added a test to ensure this is the case. 
 
Bug: 303807950 
Bug: 345191109 
Bug: 350466286 
Bug: 349781047 
Test: Added test case to PagerTest.kt 
 
Change-Id: I9bfefca9998e856279d63d2595f3bed0d67639bb

Please use the Wear HorizontalPager component which settles with a faster animation than the default Compose Foundation HorizontalPager.

Project: platform/frameworks/support
Branch: androidx-main
Author: Aman Khosa <akhosa@google.com>
Link:      https://android-review.googlesource.com/3320255

Change Wear foundation pager snapAnimationSpec

Change Wear foundation pager snapAnimationSpec 
 
Currently the snapAnimationSpec is set to a tween with a duration 
of 150ms. This was set to ensure the Pager settles quickly so that 
contents are focused and clickable, see b/345191109. 
 
However a tween animation causes an ugly double jump when flinging 
fast to the top or bottom of a SLC inside of a VerticalPager, see 
b/349781047. 
 
Changing to a Spring animation with no bounciness and high 
stiffness achieves the same behaviour of settling quickly, and 
avoids the double jump. Added a test to ensure this is the case. 
 
Test to ensure the Pager settles quickly can be ran locally. 
 
Bug: 303807950 
Bug: 345191109 
Bug: 350466286 
Bug: 349781047 
Test: Added test case to PagerTest.kt 
Relnote: "Change pager snapAnimationSpec from Tween to Spring" 
 
Change-Id: I10d0275b7f3b957af279893d2ed52d63e42b8115

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

• androidx.wear.compose:compose-foundation:1.5.0-alpha06