Skip to content

Commit 47c307d

Browse files
dsn5ftimhappi
authored andcommitted
[Predictive Back] Update dev docs
PiperOrigin-RevId: 533443345
1 parent e4d0fd3 commit 47c307d

File tree

5 files changed

+197
-7
lines changed

5 files changed

+197
-7
lines changed

docs/components/BottomSheet.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ containing supplementary content that are anchored to the bottom of the screen.
2020
* [Standard bottom sheet](#standard-bottom-sheet)
2121
* [Modal bottom sheet](#modal-bottom-sheet)
2222
* [Anatomy and key properties](#anatomy-and-key-properties)
23+
* [Predictive Back](#predictive-back)
2324
* [Theming](#theming-bottom-sheets)
2425

2526
## Using bottom sheets
@@ -468,6 +469,81 @@ See the full list of
468469
and
469470
[themes and theme overlays](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomsheet/res/values/themes.xml).
470471

472+
## Predictive Back
473+
474+
The modal `BottomSheetDialogFragment` and `BottomSheetDialog` components
475+
automatically support [Predictive Back](../foundations/PredictiveBack.md) by
476+
default.
477+
478+
No further integration is required on the app side other than the general
479+
Predictive Back prerequisites and migration steps mentioned
480+
[here](../foundations/PredictiveBack.md#usage).
481+
482+
Visit the
483+
[Predictive Back design guidelines](https://m3.material.io/components/bottom-sheets/guidelines#3d7735e2-73ea-4f3e-bd42-e70161fc1085)
484+
to see how the component will behave when a user swipes back.
485+
486+
To set up Predictive Back for standard (non-modal) bottom sheets using
487+
`BottomSheetBehavior`, you can create an AndroidX back callback that forwards
488+
the system `BackEvent` objects to your `BottomSheetBehavior`:
489+
490+
```java
491+
OnBackPressedCallback bottomSheetBackCallback = new OnBackPressedCallback(/* enabled= */ false) {
492+
@RequiresApi(VERSION_CODES.UPSIDE_DOWN_CAKE)
493+
@Override
494+
public void handleOnBackStarted(@NonNull BackEvent backEvent) {
495+
bottomSheetBehavior.startBackProgress(backEvent);
496+
}
497+
498+
@RequiresApi(VERSION_CODES.UPSIDE_DOWN_CAKE)
499+
@Override
500+
public void handleOnBackProgressed(@NonNull BackEvent backEvent) {
501+
bottomSheetBehavior.updateBackProgress(backEvent);
502+
}
503+
504+
@Override
505+
public void handleOnBackPressed() {
506+
bottomSheetBehavior.handleBackInvoked();
507+
}
508+
509+
@RequiresApi(VERSION_CODES.UPSIDE_DOWN_CAKE)
510+
@Override
511+
public void handleOnBackCancelled() {
512+
bottomSheetBehavior.cancelBackProgress();
513+
}
514+
};
515+
```
516+
517+
And then you can add and enable the back callback as follows:
518+
519+
```java
520+
getOnBackPressedDispatcher().addCallback(this, bottomSheetBackCallback);
521+
522+
bottomSheetBehavior.addBottomSheetCallback(new BottomSheetCallback() {
523+
@Override
524+
public void onStateChanged(@NonNull View bottomSheet, int newState) {
525+
switch (newState) {
526+
case BottomSheetBehavior.STATE_EXPANDED:
527+
case BottomSheetBehavior.STATE_HALF_EXPANDED:
528+
bottomSheetBackCallback.setEnabled(true);
529+
break;
530+
case BottomSheetBehavior.STATE_COLLAPSED:
531+
case BottomSheetBehavior.STATE_HIDDEN:
532+
bottomSheetBackCallback.setEnabled(false);
533+
break;
534+
case BottomSheetBehavior.STATE_DRAGGING:
535+
case BottomSheetBehavior.STATE_SETTLING:
536+
default:
537+
// Do nothing, only change callback enabled for "stable" states.
538+
break;
539+
}
540+
}
541+
542+
@Override
543+
public void onSlide(@NonNull View bottomSheet, float slideOffset) {}
544+
});
545+
```
546+
471547
## Theming bottom sheets
472548

473549
Bottom sheets support

docs/components/NavigationDrawer.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ access to destinations in your app.
2121
* [Standard navigation drawer](#standard-navigation-drawer)
2222
* [Modal navigation drawer](#modal-navigation-drawer)
2323
* [Bottom navigation drawer](#bottom-navigation-drawer)
24+
* [Predictive Back](#predictive-back)
2425
* [Theming](#theming)
2526

2627
## Using navigation drawers
@@ -597,6 +598,20 @@ bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSh
597598
For more information on bottom app bars see the
598599
[documentation](https://github.com/material-components/material-components-android/tree/master/docs/components/BottomAppBar.md).
599600

601+
## Predictive Back
602+
603+
The `NavigationView` component automatically supports
604+
[Predictive Back](../foundations/PredictiveBack.md) by default when it is set up
605+
within a `DrawerLayout`, as mentioned in the sections above.
606+
607+
No further integration is required on the app side other than the general
608+
Predictive Back prerequisites and migration steps mentioned
609+
[here](../foundations/PredictiveBack.md#usage).
610+
611+
Visit the
612+
[Predictive Back design guidelines](https://m3.material.io/components/side-sheets/guidelines#d77245e3-1013-48f8-a9d7-76f484e1be13)
613+
to see how the component will behave when a user swipes back.
614+
600615
## Theming
601616

602617
Navigation drawers support

docs/components/Search.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ surface that allows product-specific branding and additional navigation icons.
2020
* [Search Bar](#search-bar)
2121
* [Search View](#search-view)
2222
* [Putting it all together](#putting-it-all-together)
23+
* [Predictive Back](#predictive-back)
2324

2425
## Using search components
2526

@@ -350,6 +351,20 @@ as well as the expand and collapse animations. If you can't use a
350351
`CoordinatorLayout`, instead you can call the `SearchView#setUpWithSearchBar`
351352
method to achieve the same result.
352353

354+
## Predictive Back
355+
356+
The `SearchView` component automatically supports
357+
[Predictive Back](../foundations/PredictiveBack.md) by default when it is set up
358+
with and connected to a `SearchBar`, as mentioned in the sections above.
359+
360+
No further integration is required on the app side other than the general
361+
Predictive Back prerequisites and migration steps mentioned
362+
[here](../foundations/PredictiveBack.md#usage).
363+
364+
Visit the
365+
[Predictive Back design guidelines](https://m3.material.io/components/search/guidelines#3f2d4e47-2cf5-4c33-b6e1-5368ceaade55)
366+
to see how the component will behave when a user swipes back.
367+
353368
## API and source code
354369

355370
* [Class definition](https://developer.android.com/reference/com/google/android/material/search/SearchView)

docs/components/SideSheet.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ See [Bottom Sheet documentation](BottomSheet.md) for documentation about
2222
* [Modal side sheet](#modal-side-sheet)
2323
* [Coplanar side sheet](#coplanar-side-sheet)
2424
* [Anatomy and key properties](#anatomy-and-key-properties)
25+
* [Predictive Back](#predictive-back)
2526
* [Theming](#theming-side-sheets)
2627

2728
## Using side sheets
@@ -296,6 +297,77 @@ See the full list of
296297
and
297298
[themes and theme overlays](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/sidesheet/res/values/themes.xml).
298299

300+
## Predictive Back
301+
302+
The modal `SideSheetDialog` component automatically supports
303+
[Predictive Back](../foundations/PredictiveBack.md) by default.
304+
305+
No further integration is required on the app side other than the general
306+
Predictive Back prerequisites and migration steps mentioned
307+
[here](../foundations/PredictiveBack.md#usage).
308+
309+
Visit the
310+
[Predictive Back design guidelines](https://m3.material.io/components/side-sheets/guidelines#d77245e3-1013-48f8-a9d7-76f484e1be13)
311+
to see how the component will behave when a user swipes back.
312+
313+
To set up Predictive Back for standard or coplanar (non-modal) side sheets using
314+
`SideSheetBehavior`, you can create an AndroidX back callback that forwards
315+
the system `BackEvent` objects to your `SideSheetBehavior`:
316+
317+
```java
318+
OnBackPressedCallback sideSheetBackCallback = new OnBackPressedCallback(/* enabled= */ false) {
319+
@RequiresApi(VERSION_CODES.UPSIDE_DOWN_CAKE)
320+
@Override
321+
public void handleOnBackStarted(@NonNull BackEvent backEvent) {
322+
sideSheetBehavior.startBackProgress(backEvent);
323+
}
324+
325+
@RequiresApi(VERSION_CODES.UPSIDE_DOWN_CAKE)
326+
@Override
327+
public void handleOnBackProgressed(@NonNull BackEvent backEvent) {
328+
sideSheetBehavior.updateBackProgress(backEvent);
329+
}
330+
331+
@Override
332+
public void handleOnBackPressed() {
333+
sideSheetBehavior.handleBackInvoked();
334+
}
335+
336+
@RequiresApi(VERSION_CODES.UPSIDE_DOWN_CAKE)
337+
@Override
338+
public void handleOnBackCancelled() {
339+
sideSheetBehavior.cancelBackProgress();
340+
}
341+
};
342+
```
343+
344+
And then you can add and enable the back callback as follows:
345+
346+
```java
347+
getOnBackPressedDispatcher().addCallback(this, sideSheetBackCallback);
348+
349+
sideSheetBehavior.addCallback(new SideSheetCallback() {
350+
@Override
351+
public void onStateChanged(@NonNull View sideSheet, int newState) {
352+
switch (newState) {
353+
case SideSheetBehavior.STATE_EXPANDED:
354+
case SideSheetBehavior.STATE_SETTLING:
355+
sideSheetBackCallback.setEnabled(true);
356+
break;
357+
case SideSheetBehavior.STATE_HIDDEN:
358+
sideSheetBackCallback.setEnabled(false);
359+
break;
360+
case SideSheetBehavior.STATE_DRAGGING:
361+
default:
362+
break;
363+
}
364+
}
365+
366+
@Override
367+
public void onSlide(@NonNull View sideSheet, float slideOffset) {}
368+
});
369+
```
370+
299371
## Theming side sheets
300372

301373
Side sheets support

docs/foundations/PredictiveBack.md

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,21 @@ within the app itself.
2323

2424
## Design & API documentation
2525

26-
- Material Design guidelines: Predictive Back (coming soon)
26+
- [Material Design guidelines: Predictive Back](https://m3.material.io/foundations/interaction/gestures#22462fb2-fbe8-4e0c-b3e7-9278bd18ea0d)
27+
- [Android design guidelines](https://developer.android.com/design/ui/mobile/guides/patterns/predictive-back)
2728
- [Framework & AndroidX Predictive Back developer guide](https://developer.android.com/guide/navigation/predictive-back-gesture)
29+
- [Android 14 Predictive Back developer guide](https://developer.android.com/about/versions/14/features/predictive-back)
30+
31+
## Talks
32+
33+
- [What's New in Android (Google I/O 2023)](https://youtu.be/qXhjN66O7Bk?t=1193)
34+
- [What's New in Material Design (Google I/O 2023)](https://youtu.be/vnDhq8W98O4?t=156)
35+
- [Building for the Future of Android (Google I/O 2023)](https://www.youtube.com/watch?v=WMMPXayjP8g&t=333s)
36+
37+
## Blog Posts
38+
39+
- [Second Beta of Android 14](https://android-developers.googleblog.com/2023/05/android-14-beta-2.html)
40+
- [Google I/O 2023: What's new in Jetpack](https://android-developers.googleblog.com/2023/05/whats-new-in-jetpack-io-2023.html)
2841

2942
## Usage
3043

@@ -38,8 +51,7 @@ registering callbacks to handle back pressed on Android T and above. More
3851
details on this general back migration can be found at the
3952
[Framework & AndroidX Predictive Back developer guide](https://developer.android.com/guide/navigation/predictive-back-gesture).
4053

41-
2. Upgrade to MDC-Android library version **1.10.0-alpha01 (coming soon)** or
42-
above.
54+
2. Upgrade to MDC-Android library version **1.10.0-alpha03** or above.
4355

4456
Once completing these steps, you will get most of the predictive back animations
4557
within Material Components for free on Android U devices. See the section below
@@ -51,9 +63,9 @@ special considerations for each component.
5163
The following Material Components support predictive back behavior and
5264
animations:
5365

54-
- Search bar
55-
- Bottom sheet
56-
- Side sheet (support coming soon)
57-
- Navigation drawer
66+
- [Search bar](../components/Search.md#predictive-back) (automatically for `SearchView` set up with `SearchBar`)
67+
- [Bottom sheet](../components/BottomSheet.md#predictive-back) (automatically for modal, standard requires integration)
68+
- [Side sheet](../components/SideSheet.md#predictive-back) (automatically for modal, standard and coplanar require integration)
69+
- [Navigation drawer](../components/NavigationDrawer.md#predictive-back) (automatically for `NavigationView` within `DrawerLayout`)
5870
- Navigation bar / Bottom navigation view (support coming soon)
5971
- Navigation rail (support coming soon)

0 commit comments

Comments
 (0)