Folding screens

Viewport

What Apple and Google each say about designing for a device with two displays.

Show system

Material

Alternative layouts for folded and unfolded

Differences in size and aspect ratio between folded and unfolded can be substantial, requiring alternative layouts.
Unfolded in landscape is like a tablet: a two-pane layout with a navigation rail. Folded is like a phone: a single column with a bottom navigation bar.
Keep dialogs and menus off the fold, and split content into two areas when half opened.
The app must preserve and restore its state as the device folds and unfolds.

Android Developers, Learn about foldables

Design-system conventionVerified 9 Oct 2026

Apple

Compact outside, regular inside

A compact width layout for the outer display and a regular width layout for the inner display cover every pose.
Do not reinvent the app when it resizes; let the existing layout expand.
Keep functionality and state the same between displays, with an additional level of hierarchy on the inner display if it suits.
The system moves toolbars and tab bars to the side. In general, do not override this.
Avoid extreme layout changes as people fold the device.

Apple HIG, Designing for iPhone Duo

Design-system conventionVerified 9 Oct 2026

Not yet read on this topic: SGDS, GOV.UK, Atlassian, Carbon, Primer, USWDS, Fluent. Nothing is shown for a system until its own page has been read.

Shortcut takeaway

Both treat a folding device as two layouts of one app, joined by kept state. Both keep content off the fold. Navigation differs: Apple puts bars at the side even when closed; Google describes a bottom bar folded and a rail unfolded. Follow the platform you are designing for.

Across the systems

Craft guidance

Shortcut’s reading of the columns above. It covers every system read on this topic, not only the ones showing, and is not a rule from any of them.

Common themes

Two layouts, one app: a narrow one closed and a wider one open.
State survives the fold.
Nothing important sits on the fold line.

Differences

Navigation placement: at the side on iPhone Duo; bottom bar when folded on Android.
Apple stresses expanding the existing layout. Google speaks of alternative layouts optimised for each.
Not read on this topic: SGDS, GOV.UK, Atlassian, Carbon, Primer, USWDS and Fluent.

These sources do not carry equal weight

Standard requirement.: A testable criterion in a published standard. Whether it is legally required depends on your jurisdiction and contract.
Government control.: A control the issuing government expects its agencies and their partners to apply. It does not bind other organisations.
Design-system convention.: How one design system does it. Binding only on teams that have adopted that system.
Research-based best practice.: Advice drawn from usability research. Persuasive, not mandatory.
Industry convention.: A range many shipping products use. Written by Shortcut; no standard or organisation requires it.
Craft guidance.: Judgement of the kind given in design review. Written by Shortcut; reasonable designers may disagree.