Bottom Sheet

Learn more about bottom sheet interactions

What is a bottom sheet?

A bottom sheet has nothing to do with bed linen, nor is it an obscure euphemism for toilet paper. Instead we’re talking about an expanding surface anchored at the bottom of a page that contains supplementary information which would otherwise not fit on the same screen.

These kinds of content sheets have enormous implications for the functionality of your app’s user interface, allowing your users to interact with -- and gain information from -- your app at a glance while also taking advantage of other functions at the same time. It’s a great way to add multitasking functionality to your app, and add significant value to your users.

Bottom sheet for Android and iOS devices

Bottom sheets are typically used only in mobile app design, where lack of screen space makes them a highly valuable asset. As a bottom sheet can be easily opened and closed using just a single thumb-swipe, they are a convenient and ergonomic method of displaying a wide variety of secondary content.

Bottom popup (or bottom sheet dialogs) for Android or iOS apps can crop up in all kinds of uses -- music, payment, file management applications and more make use of bottom sheets, provided there’s a significant use case for them.

• Music players use them for persistent tracking of your song’s progress;
• Payment apps use them to show you your payment info as you enter it;
• Shopping apps let you keep track of your cart as you continue to look around the store;
• And so on.

Whether you own an iOS or Android device, you will likely already be quite familiar with this interaction from using Google Maps. When you enter a destination, a bottom sheet will appear offering up loads of information, from its distance to address to the phone number, website, and hours (if they’re a business).

Types of expanding bottom sheets

There are several main types of bottom sheet; persistent and modal. Let’s take a look at each of these in turn.

Persistent

As the name suggests, a persistent, or standard bottom sheet is displayed permanently – at least in part – at the bottom of the screen, coexisting alongside the screen’s main UI region. Users can view the entire sheet by dragging it upwards to reveal extra content. Similarly, they can hide the additional options by dragging the sheet back down again. Although a portion of a persistent bottom sheet remains visible at all times, it does not interfere with the overall functionality of the page.

Modal bottom sheets

In contrast to persistent bottom sheets, mobile modal sheets are ordinarily hidden from view at the bottom of the page, but can be quickly expanded by swiping up. Activating a modal sheet will cause the rest of the app to be deactivated and shadowed-out (i.e. a semi-transparent scrim is applied), meaning that this kind of interaction is more invasive for the user than the persistent bottom sheet design.

As a result of this, a modal sheet should be used only to offer very important extra features that would in any case require the user to momentarily pause all other activity. However it is normally possible to dismiss a modal sheet if necessary; by tapping outside the modal, the menu contracts and the app resumes normal function.

Expanding bottom sheets

These types of bottom sheets offer a small, collapsible surface that the user can expand (similar to an accordion menu) in order to get to a vital task or element of your app. These are the best of both worlds between standard and modal bottom sheets -- they are still persistent on the app, but also collapse to save space for the user experience.

Design and usage

Bottom sheets can vary in height. Most will likely take up half of the screen size, while others may not need to be quite so tall – all depending on the content that must be shown at the bottom of the screen. Often when a bottom sheet initially appears, it will contain content that “bleeds” off the screen. This information can be revealed by dragging upwards.

There are several different use cases for bottom sheets. In their collapsed state, these uses may all look the same, but in practice they can all hold very different content. Some examples of common uses are as a menu; for displaying location information or other dialog; for revealing music player settings; or as a search bar.

Action views

Action views are actions that offer rich functionality in app bars, and can often be utilized within bottom sheets. For instance, a search bar with an action view lets a user type their search text in the app bar without having to change their activity.

How to create a bottom sheet interaction in Framer

It’s easy to make this interaction in Framer. You will need two frames, one for your main screen and one for your bottom sheet. The sheet should be shorter in height than your main screen. Once you have designed the content for your main screen and the sheet, link the main screen to the bottom sheet and set the transition type to overlay. Then, customize your overlay so that it comes up from the bottom on tap. And there you have your bottom sheet interaction!