Choosing Between ActionSheets, BottomSheets, and Popovers for Mobile UI

Less‑Common Overlay Patterns

The previous article covered dialogs and toast/snackbar overlays; this one focuses on two additional overlay styles: half‑screen pages and popovers.

Half‑screen pages

Popovers

1. Half‑Screen Pages

“Half‑screen pages” is not an official term but a collective name for similar iOS and Android interactions that slide up a semi‑transparent layer covering part of the screen. They can hold more content while preserving the surrounding context.

1.1 ActionSheets (iOS)

ActionSheets appear from the bottom and are suitable for secondary confirmations or presenting multiple related choices. Although tapping the blank area dismisses them, iOS guidelines recommend always providing a cancel button.

Advantages: Less intrusive than dialogs; users can cancel by tapping outside.

Use ActionSheets as a replacement for dialogs in confirmation or selection scenarios.

1.1.1 Secondary Confirmation

Use case: Prompt the user for a second confirmation before a destructive operation.

Content: Description of the result, a confirm button, and a cancel button; tapping blank area equals cancel.

Design tip: Highlight destructive actions with red or other warning colors; if the button label is clear, extra description may be omitted.

1.1.2 Option List

Use case: Show two or more context‑related options, each triggering a specific task.

Content: A button (or “more” button) launches an ActionSheet containing the option list plus a cancel button; tapping blank area cancels.

Limit the number of options; ActionSheets do not support scrolling.

iOS recommends centering menu items without icons.

1.1.3 Option Grid

Use case: When options are numerous, belong to different categories, or need icons (e.g., sharing platforms).

Content: Each option displays an icon and title; if many options exist, arrange them in up to two rows, each row scrollable horizontally.

Design tip: Keep titles concise; truncate if necessary.

1.1.4 Summary of ActionSheet Types

Three ActionSheet variants differ mainly in layout and visual emphasis:

Secondary confirmation: may include a title; destructive actions highlighted with warning colors.

Option list: plain list without icons, recommended to stay under five items.

Option grid: grid layout with icons, suitable for many or categorized options.

1.2 BottomSheets (Android)

BottomSheets are defined in the Android Material Design spec. They come in two forms: modal (slides over content) and embedded (pushes content upward). This article discusses only modal BottomSheets.

1.2.1 Regular BottomSheets

Use case: Same scenarios as iOS option lists and grids; can display either list or grid.

Design tips:

Android does not need an explicit “Cancel” button because the system back button serves that purpose.

BottomSheets may scroll, offering more flexibility than ActionSheets.

1.2.2 Custom BottomSheets

Use case: When a page needs to present more contextual information—e.g., filter panels or deeper hierarchical selections.

These custom styles retain context continuity while allowing a large amount of information.

Design tips:

Tap outside to dismiss, and ensure the menu collapses.

Limit height so the top does not exceed the title bar.

2. Popover (iOS)

In iOS terminology, a popover appears on top of the page hierarchy and dismisses when the user taps outside. It is not recommended for phones but works well on iPad or large‑screen devices, acting as a temporary task container.

Many Chinese apps have adopted popovers to show folded extra information or quick entry points on the home screen.

Design tips:

Make the popover modal; add a dimming layer to focus attention.

Keep content short and non‑scrollable; for extensive content, consider a BottomSheet or full‑screen overlay.

3. Context‑Menu Summary

This article covered half‑screen pages and popovers, whose main purpose is to display additional context‑related information.

Choosing the right pattern depends on platform conventions and design consistency:

ActionSheets – iOS, for whole‑page actions like share or delete.

BottomSheets – Android (or custom Android‑style on iOS) when many options or hierarchical selections are needed.

Popover – iOS local quick actions or small‑scale information on larger screens.

There is no absolute rule; prioritize uniformity and the app’s visual language.

References

iOS Human Interface Guidelines – https://developer.apple.com/ios/human-interface-guidelines

Google Material Design – https://material.google.com/