Skip to content

Commit

Permalink
[BottomSheet][Docs] Update bottom sheet documentation
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 532478454
  • Loading branch information
imhappi committed May 16, 2023
1 parent d7f9a06 commit af1fa70
Show file tree
Hide file tree
Showing 9 changed files with 22 additions and 5 deletions.
27 changes: 22 additions & 5 deletions docs/components/BottomSheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -262,8 +262,9 @@ API and source code:
The following example shows a standard bottom sheet in its collapsed and
expanded states:

![Standard bottom sheet example. Collapsed on the left and expanded on the
right.](assets/bottomsheet/bottomsheet_standard.png)
Collapsed | Expanded
----------------------------------------------------------------------------------------- | --------
![Standard collapsed bottom sheet example.](assets/bottomsheet/bottomsheet_standard1.png) | ![Standard expanded bottom sheet example.](assets/bottomsheet/bottomsheet_standard2.png)

`BottomSheetBehavior` works in tandem with `CoordinatorLayout` to let you
display content on a bottom sheet, perform enter/exit animations, respond to
Expand Down Expand Up @@ -320,6 +321,18 @@ Apply the `BottomSheetBehavior` to a direct child `View` of `CoordinatorLayout`:

In this example, the bottom sheet is the `FrameLayout`.

You can use the `BottomSheetBehavior` to set attributes like so:

```kt
val standardBottomSheet = findViewById<FrameLayout>(R.id.standard_bottom_sheet)
val standardBottomSheetBehavior = BottomSheetBehavior.from(standardBottomSheet)
// Use this to programmatically apply behavior attributes; eg.
// standardBottomSheetBehavior.setState(STATE_EXPANDED);
```

More information about using the behavior to set attributes is in the
[setting behavior](#setting-behavior) section.

## Modal bottom sheet

Modal bottom sheets present a set of choices while blocking interaction with the
Expand Down Expand Up @@ -347,7 +360,9 @@ API and source code:
The following example shows a modal bottom sheet in its collapsed and expanded
states:

![Modal bottom sheet example. Collapsed on the left and expanded on the right.](assets/bottomsheet/bottomsheet_modal.png)
Collapsed | Expanded
----------------------------------------------------------------------------------- | --------
![Modal collapsed bottom sheet example.](assets/bottomsheet/bottomsheet_modal1.png) | ![Modal expanded bottom sheet example.](assets/bottomsheet/bottomsheet_modal2.png)

First, subclass `BottomSheetDialogFragment` and overwrite `onCreateView` to
provide a layout for the contents of the sheet (in this example, it's
Expand Down Expand Up @@ -384,14 +399,16 @@ you need to use `Activity.getSupportFragmentManager()`.

## Anatomy and key properties

Bottom sheets have a sheet, content, and, if modal, a scrim.
Bottom sheets have a sheet, a drag handle, and, if modal, a scrim.

![Bottom sheet anatomy](assets/bottomsheet/bottomsheet_anatomy.png)

1. Sheet
2. Content
2. Drag Handle
3. Scrim (in modal bottom sheets)

Content can also be added below the drag handle. (see [Using bottom sheets](#using-bottom-sheets))

### Sheet attributes

Element | Attribute | Related method(s) | Default value
Expand Down
Binary file modified docs/components/assets/bottomsheet/bottomsheet_anatomy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/components/assets/bottomsheet/bottomsheet_hero.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit af1fa70

Please sign in to comment.