Sheets: bottom

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

Contents

• Using bottom sheets
• Standard bottom sheet
• Modal bottom sheet
• Expanding bottom sheet

Using bottom sheets

Bottom sheets are supplementary surfaces primarily used on mobile.

Installing

In order to install with Cocoapods, first add the component to your Podfile:

pod 'MaterialComponents/BottomSheet'

Then run the installer:

pod install

From there, import the relevant target or file.

Swift

import MaterialComponents.MaterialBottomSheet

Objective-C

#import "MaterialBottomSheet.h"

Making bottom sheets accessible

As a user of the bottom sheet component, it is up to you to determine that its contents are accessible. The bottom sheet ccomponent does not have any specific APIs for managing the accessibility of a bottom sheet's contents. MDCBottomSheetController does, however, have such APIs for the scrim:

• isScrimAccessibilityElement
• scrimAccessibilityLabel
• scrimAccessibilityHint
• scrimAccessibilityTraits

We recommend giving all of these properties appropriate values for your use case.

Types

There are three types suitable for different use cases:

1. Standard bottom sheets display content that complements the screen’s primary content and remain visible while users interact with the primary content
2. Modal bottom sheets are an alternative to inline menus or simple dialogs on mobile and provide room for additional items, longer descriptions, and iconography, and must be dismissed in order to interact with the underlying content
3. Expanding bottom sheets provide a small, collapsed surface that can be expanded by the user to access a key feature or task to offer the persistent access of a standard sheet with the space and focus of a modal sheet.

Note: Standard bottom sheets aren't supported on iOS. This is because the iOS bottom sheet implementation makes use of custom view controller transitions, which do not allow interaction with the presenting view controller, even when the presented view controller does not take up the whole screen.

Modal bottom sheet

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and simple dialogs on mobile, providing additional room for content, iconography, and actions.

Modal bottom sheets are used in mobile apps only.

Modal bottom sheet examples

Basic modal sheet example

Use MDCBottomSheetController and its accompanying presentation controller class, MDCBottomSheetPresentationController, to achieve a modal bottom sheet on iOS.

• MDCBottomSheetControllerGitHub source
• MDCBottomSheetPresentationController GitHub source

Something like the above example can be achieved using the code below.

Swift

// View controller the bottom sheet will hold
let viewController: ViewController = ViewController()
// Initialize the bottom sheet with the view controller just created
let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: viewController)
// At this point perform any customizations, like adding a slider, for example.
// Present the bottom sheet
present(bottomSheet, animated: true, completion: nil)

Objective-C

// View controller the bottom sheet will hold
ViewController *viewController = [[ViewController alloc] init];
// Initialize the bottom sheet with the view controller just created
MDCBottomSheetController *bottomSheet = [[MDCBottomSheetController alloc] initWithContentViewController:viewController];
// At this point perform any customizations, like adding a slider, for example.
// Present the bottom sheet
[self presentViewController:bottomSheet animated:true completion:nil];

Behavioral customizations

You can also choose to have your bottom sheet not be dismissable when dragged downwards by using the dismissOnDraggingDownSheet property on MDCBottomSheetController.

Swift

let viewController: ViewController = ViewController()
let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: viewController)

bottomSheet.dismissOnDraggingDownSheet = false

present(bottomSheet, animated: true, completion: nil)

Objective-C

ViewController *viewController = [[ViewController alloc] init];
MDCBottomSheetController *bottomSheet = [[MDCBottomSheetController alloc] initWithContentViewController:viewController];

bottomSheet.dismissOnDraggingDownSheet = NO;

[self presentViewController:bottomSheet animated:true completion:nil];

Anatomy and key properties

The following shows the anatomy of a modal bottom sheet:

1. Sheet
2. Contents
3. Scrim

Note: A bottom sheet similar to the one shown above is easily attainable with the ActionSheet component, which makes use of MDCBottomSheetPresentationController.

Sheet properties

Contents properties

Scrim properties

Expanding bottom sheet

An expanding bottom sheet is a surface anchored to the bottom of the screen that users can expand to access a feature or task. It can be used for:

• Persistently displaying a cross-app feature, such as a shopping cart
• Collecting and acting on user selections from a set of items, such as photos in a gallery
• Supporting tasks, such as chat and comments
• Indirect navigation between items, such as videos in a playlist

Expanding bottom sheets are recommended for use on mobile and tablet.

Expanding bottom sheet example

To generate an expanding bottom sheet on iOS, set the trackingScrollView property on your MDCBottomSheetController. If the contentSize of the scroll view has a large enough height the bottom sheet will expand to the top.

Swift

bottomSheet.trackingScrollView = scrollView

Objective-C

bottomSheet.trackingScrollView = self.scrollView;