Material3 Bottom Sheets should support hiding via external gestures like system back [304850357]

Fixed

Feature Request

Status Update

No update yet.

Description

il...@google.com

created issue #1

Oct 11, 2023 11:48PM

With Android 14, apps can opt in for predictive back where they show a preview of what is happening as the system back gesture is happening (rather than only after the user confirms the system back gesture).

The Activity 1.8.0 release adds a new PredictiveBackHandler that allows apps to capture the progress of the system back gesture and use it to drive the state of their own components.

I wanted to use this to start hiding a Material3 Bottom Sheet by writing code like:

PredictiveBackHandler(enabled = showBottomSheet) { progress ->
    try {
        progress.collectLatest {  backEvent ->
            // Progress is 0 (not hidden) to 1 (fully hidden)
            val progress = backEvent.progress
            // TODO: Be able to pass the progress to hide to animate the
            // bottom sheet to a particular gesture controlled progress
            // towards completely hidden
            sheetState.hide(progress)
        }
        // The user has fully committed the system back gesture and the
        // bottom sheet should be completely hidden
        sheetState.hide()
    } catch (e: CancellationException) {
        // The user has cancelled the system back gesture so we should
        // reset its position back to shown
        // TODO: ensure this works even though this suspending scope is cancelled
        sheetState.show()
    }
}

But as per the two TODO messages there, I ran into two issues:

There's no way to drive the progress towards the hidden state from outside the bottom sheet - I see that ModalBottomSheet does this internally to support dragging the bottom sheet down, but this isn't exposed anywhere.
The use of a suspend show method here doesn't actually work well in PredictiveBackHandler since the scope that is provided to the trailing lambda is cancelled by the time we need to call show (similar to other suspending lambdas, it uses coroutine's cancellation as its indicator for cancellation). It would be helpful to have a non-suspending way to set the targetValue and let ModalBottomSheet take care of moving to that state. I think we could possibly work around this by using rememberCoroutineScope and launching the show into that scope, but that seems even harder to get right.

Comments

il...@google.com <il...@google.com> #2Oct 11, 2023 11:56PM

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

jo...@google.com <jo...@google.com> #3Oct 12, 2023 09:40AM

Pasting from M2 issue:

Thanks, Ian! We're still to look into supporting this at the AnchoredDraggable level. Looking the example, this is exactly the type of interaction we enable with AnchoredDraggableState#anchoredDrag which lets you drag to a certain position and then settles at the closest anchor. We might want to expose something similar at the ModalBottomSheetState level, or support predictive back automatically by using the seekable transition APIs.

Filed b/304936017 for predictive back support in AnchoredDraggable.

jo...@google.com <jo...@google.com> #4Oct 12, 2023 09:43AM

Reassigned to bu...@google.com.

Bugjuggler: b/304936017 -> fixed <= 6 weeks

bu...@google.com <bu...@google.com> #5Oct 12, 2023 09:43AM

Accepted by bu...@google.com.

Hi. I've received your bug and will wait for

b/304936017

to be resolved and then mark as fixed by jossiwolf@google.com, or give up at 2023-11-23 09:43 +0000 GMT.

bu...@google.com <bu...@google.com> #6Nov 23, 2023 09:44AM

Assigned to jo...@google.com.

The specified deadline has been exceeded.

jo...@google.com <jo...@google.com> #7Nov 27, 2023 07:41PM

Reassigned to se...@google.com.

Copying comment from M2 issue:

Looking at the Material guidelines and MDC views, it looks like the gesture only influences how the sheet is drawn. AnchoredDraggable's APIs support this, although we might want to improve the contract of the anchoredDrag method so users do not have to call settle manually.

The implementation of this lies with the Material team, reassigning for prioritization:

Here is some example code:

    /**
     * This receiver allows manipulating the sheet's offset.
     */
    interface SheetAnimationScope {
        fun seekTo(fraction: Float)
    }

    /**
     * Seek the [ModalBottomSheetState] to fractional values between [from] and [to]. This is useful
     * to integrate seeking interactions such as predictive back.
     */
    suspend fun seek(
        from: ModalBottomSheetValue = currentValue,
        to: ModalBottomSheetValue = if (from == HalfExpanded || from == Expanded) Hidden
        else if (hasHalfExpandedState) HalfExpanded
        else Expanded,
        block: suspend SheetAnimationScope.() -> Unit
    ) {
        anchoredDraggableState.anchoredDrag { anchors ->
            val startOffset = anchors.positionOf(from)
            val targetOffset = anchors.positionOf(to)
            val distance = abs(startOffset - targetOffset)
            val scope = object : SheetAnimationScope {
                override fun seekTo(fraction: Float) {
                    val newOffset = distance * fraction
                    dragTo(startOffset + newOffset)
                }
            }
            scope.block()
        }
        anchoredDraggableState.settle(0f)
    }

     PredictiveBackHandler { progress ->
          bottomSheetState.seek(to = ModalBottomSheetValue.Hidden) {
               progress.collect { backEvent ->
                    seekTo(backEvent.progress)
               }
          }
     }

se...@google.com <se...@google.com> #8Jan 22, 2024 08:54PM

Reassigned to dn...@google.com.

CC: Dan, is this within the scope of your predictive back work in compose?

dn...@google.com <dn...@google.com> #9Jan 25, 2024 06:01PM

Yes! Working on this in https://android-review.googlesource.com/c/platform/frameworks/support/+/2863667.

With the approach in the CL above, ModalBottomSheet will automatically animate itself during the predictive back swipe gesture on U+.

dn...@google.com <dn...@google.com> Feb 2, 2024 05:57PM

Accepted by dn...@google.com.

ap...@google.com <ap...@google.com> #10Feb 13, 2024 07:29PM

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

commit 699ee4fa3f47da2ccd52fb6b4628fc2d61cd5039
Author: Dan Nizri <dniz@google.com>
Date: Wed Dec 06 20:50:22 2023

Update Compose M3 ModalBottomSheet to support Predictive Back on U+

Bug: 281967264
Bug: 307969902
Bug: 304850357
Test: added screenshot tests
Relnote: "Update Compose M3 ModalBottomSheet to support Predictive Back on U+"
Change-Id: Iccf324cb6dfc7f4ea1fe413b69e035658282360d

A compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/ModalBottomSheetScreenshotTest.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/ModalBottomSheet.android.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/SearchBar.android.kt
A compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/internal/PredictiveBack.android.kt

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

dn...@google.com <dn...@google.com> Feb 14, 2024 02:15PM

Marked as fixed.

pr...@google.com <pr...@google.com> #11Feb 21, 2024 07:33PM

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

androidx.compose.material3:material3:1.3.0-alpha01
androidx.compose.material3:material3-android:1.3.0-alpha01
androidx.compose.material3:material3-desktop:1.3.0-alpha01