Adaptive Layout Design for Foldable Devices
Foldable devices are not a niche segment to be ignored. Samsung Galaxy Z Fold and Z Flip series sell in the millions, and in 2025, foldable support is explicitly mentioned in Google Play quality guidelines as a target criterion for Play Store ratings. An application that is not adapted runs in compatibility mode—a reduced window in the center of the screen. This is noticeable and frustrating.
Three Form Factors, Not One
Foldable devices present not just one scenario, but at minimum three, each requiring a separate layout solution:
Folded mode—the device looks and works like a regular smartphone. Samsung Z Fold6 in folded mode: 968×2424px, ~23:9 ratio. Extremely tall and narrow screen. Content that looks normal on 20:9 can be uncomfortable for one-handed navigation on 23:9.
Unfolded mode—the large screen. Z Fold6: 2160×1856px when unfolded, approximately 7.6:8 ratio—nearly square. This is fundamentally a different form factor: wide horizontal content works well, narrow vertical content does not. Applications that simply stretch to full screen without layout adaptation look like tablet applications in letterbox mode.
Flip mode (half of outer screen)—characteristic of Z Flip. The device is folded horizontally in half; the top half is the screen, the bottom is the keyboard or closed. Media player, video calls, camera—in this mode, the application must adapt its interface for a "half-screen." Google calls this Table Top mode.
Plus, devices with an outer screen (Cover Screen). Z Fold6 has a 6.3" outer screen. This requires a separate scenario: what is displayed when the device is folded and the cover screen is active.
Key Technical Aspects for Design
Hinge and fold line. In unfolded mode, there is a physical fold in the middle of the screen. Content should not be placed directly on it: important interactive zones, text, images—offset from the central axis. Jetpack Compose provides WindowInfoTracker and FoldingFeature to determine fold position and status (FLAT / HALF_OPENED).
Window Size Classes. Material Design 3 introduces three classes: Compact (< 600dp), Medium (600–839dp), Expanded (≥ 840dp). Foldable in unfolded mode is Expanded. Design must explicitly account for transitions between classes: when unfolding, the application should rebuild layout without screen reload (continuity).
Continuity during transition. The user folds or unfolds the device while using the application. State should not be lost: if they were reading an article—scroll position is preserved; if filling out a form—entered data is not reset. This is not just a development task—it is a design task: the designer must project both states as one continuous experience.
Multi-window mode. Foldable devices are actively used in multi-window mode: two applications side by side. This means the application must work correctly at arbitrary widths from 360dp to 900dp+. Fixed component widths are a problem.
How We Build the Design
In Figma, we create frames for all modes of specific devices:
| Mode | Device | Size (dp) |
|---|---|---|
| Cover Screen | Z Fold6 | 968×748 (portrait) |
| Folded | Z Fold6 | 968×2424 (portrait) |
| Unfolded | Z Fold6 | 2160×1856 (landscape ~) |
| Table Top | Z Flip6 | 2636×1080 half |
| Unfolded | Z Flip6 | 2636×1080 full |
For each mode—not a complete redesign, but layout adaptation over existing components. Navigation: in compact/folded—Bottom Navigation; in expanded/unfolded—NavigationRail or two-panel layout. Lists: one column in compact, two in expanded. Detail view: modal in compact, side panel in expanded.
Special attention to transition animations between modes. The unfold animation must be natural: elements rebuild with motion, not flicker. In Figma, Smart Animate helps demonstrate the concept.
Typical Design Mistakes
Designing for only one mode and assuming the second will "figure itself out." Stretching a mobile layout to Expanded is not adaptation, it is scaling with empty space. And the reverse: designing the unfolded mode so the application barely functions when folded.
Ignoring the fold as a physical constraint. A "Add" button placed directly on the central axis is a button that is uncomfortable to press due to physical relief. Hinge exclusion zone is a real limitation, not theoretical.
Timeline
Developing adaptive layouts for foldable devices takes 2–3 business days for an application with an existing mobile design. Includes: frames for 3+ modes, layout rules documentation, developer annotations on using WindowSizeClass and FoldingFeature.
Cost is calculated individually.