Bottom sheets vs fullscreen modals

Bottom sheets

For both iOS and Android we use the term bottom sheet for overlaying views appearing at the bottom of the screen, covering parts of the UI.

Even though only the broader term sheet is mentioned in Human Interface Guidelines, it makes sense to refer to them as bottom sheets in this context, as they are positioned at the bottom of the screen.

Modal vs nonmodal bottom sheets

Both platforms provide the option of modal and nonmodal bottom sheets. A modal bottom sheet means that the sheet is in focus, disabling and dimming the app UI behind. A nonmodal bottom sheet on the other hand allows for interaction with the UI outside the sheet.

Visual differences on iOS vs Android

While the design of the bottom sheet is similar on iOS and Android, the most obvious difference between the two is in the closing indicator.

On Android there is a handle that can be grabbed to drag down and dismiss the modal, while on iOS there is a closing “x”-icon that you tap to close.

In terms of closing mechanisms, modal bottom sheets on both platforms also allow you to tap outside of the modal to close it, and you can usually drag from the top of the sheet to close on iOS as well.

Dismissible vs collapsible bottom sheets

While regular bottom sheets are dismissible, some bottom sheets are sticky (stuck to the bottom of the screen) and can be resized or collapsed without being dismissed. I call these collapsible bottom sheets.

These are usually also nonmodal because the ability to collapse is helpful for interacting with the UI behind the sheet.

On iOS, the handle (called a grabber) indicates that the bottom sheet is collapsible. In some cases, a bottom sheet can be both collapsible and dismissible, such as in Maps when looking at search results.

On Android there is only the handle to indicate action with no visual indication as to whether a bottom sheet is collapsible or dismissible.

Collapsible bottom sheets can also fill the entire screen, which has become a convention in music apps such as Apple Music. In this case, the bottom sheet is indicated with a grabber on top and collapses into a persistent play bar at the bottom of the screen.

Fullscreen modal vs fullscreen activity

The fullscreen modal is a commonly used presentation style on iOS. As the name suggests, it covers the entire screen and is perfect for displaying larger amounts of content, and for when you want full focus on a specific task, such as filling out a form.

Just like a bottom sheet, the fullscreen modal appears from the bottom and can be swiped down to close. You can also choose to disable swipe-to-close for critical tasks that need saving before exiting.

On Android, we can use what’s called a fullscreen activity. This opens a new fullscreen view on top of the current UI.

Just like the fullscreen modal on iOS, a fullscreen activity is perfect when you need full focus on a task with multiple steps, or show information that doesn’t fit in a bottom sheet.

In terms of transitions, the fullscreen activity differs from iOS by animating in from right to left, rather than from bottom to top.

When to use bottom sheet vs fullscreen modal

To summarize, here’s when to use the different types of sheets.

Use bottom sheets for:

• Quick actions such as filtering, sharing or additional menu actions.
• Displaying simple content such as a success message after an action has been performed.

Use nonmodal bottom sheets for:

• When you want to be able to interact with the content above the sheet, such as in map based apps.

Use fullscreen modals (fullscreen activity on Android) for:

• Complex forms that require full focus.
• When the content is too large to fit in a regular bottom sheet.
• When you need to navigate between views within the sheet.