Designing Adaptive Apps for Foldable Devices: Beyond Simple Stretching
Key principles for creating seamless experiences across foldable form factors
1Foldables enter mainstream
While foldables have existed since Samsung Galaxy Fold in 2019, they remained niche until Apple's iPhone Duo announcement. Projected to capture 25% of foldable market by 2026, iPhone Duo changes the adoption calculus. Unlike Android foldables, Apple's entry creates urgency for all app developers to consider these form factors. The market shift means even US-focused apps (traditionally iOS-heavy) must now address foldable design. Early adopters like Airbnb and Spotify demonstrate adaptive approaches across different device types.
2Core design challenge
Foldables combine multiple screen sizes, aspect ratios, and orientations in one device. Unlike fixed screens, they require dynamic adaptation of hierarchy, layout, and controls based on available space and usage posture. The fundamental shift is designing for space availability rather than specific devices. This means asking how experiences should behave when windows become wider, narrower, taller, or split - not just how they appear on Galaxy Z Fold or iPhone Duo specifically.
3Hierarchy preservation rules
When space changes, certain elements must adapt while others remain constant. Navigation control placement, content density, column count, and supporting information size should adjust. However, primary task actions, content hierarchy, and navigation models must stay consistent. For example, iPhone Duo shows list→detail when closed but displays both simultaneously when opened. This maintains user context while utilizing available space effectively.
4Avoiding stretched UI pitfalls
Simply expanding UI elements to fill space creates poor experiences. Both platforms recommend against full-width stretching. Best practices include setting maximum content widths, using responsive grids, and implementing multiple columns with proper gutters. Specific no-nos include text lines exceeding 50 characters, oversized modals/cards, and full-width buttons on tablet-sized displays. These prevent readability and usability issues.
5Hinge-aware design principles
The physical hinge impacts touch targets, readability, and layout space. Critical UI elements like buttons, form fields, and important text should never span the hinge area. Both iOS and Android recommend treating the hinge as a natural divider. Some foldables have visible creases that reinforce this division. Effective designs account for hinge position early in layout planning, creating hinge-aware interfaces that adapt around this physical constraint.
6Pane-based mental model
Foldable design benefits from thinking in panes: traditional phones use one primary pane while opened devices use 2+ related panes. Common patterns include list-detail for messages/settings, navigation-content for persistent menus, and primary-supporting for media/maps. This approach maintains consistency while adapting to available space. It also prepares designs for future form factor evolution beyond current foldable implementations.
7Four key device states
Foldables operate in distinct states: Closed (phone-like), Open (book-style), and two Half-open postures (tabletop and book). Each requires different design considerations. Closed states prioritize one-handed use and compact navigation. Open states reveal supporting information and reduce navigation steps. Half-open modes enable unique interactions like video+controls separation. Not all apps need to support every state, but should evaluate which enhance their core functionality.
8Platform-specific guidelines
iOS introduces size classes (Compact/Regular) and reserved regions (hinge/camera areas) for iPhone Duo. Android uses window size classes (Compact/Medium/Expanded) and edge-to-edge layouts with window insets. Both systems emphasize designing for available space rather than physical screens. While implementation details differ, the core principle remains: create fluid layouts that respond dynamically to changing configurations while preserving user context.
9Navigation adaptation rules
Navigation must adapt intelligently across states. Compact views use mobile patterns like bottom nav, while expanded views employ persistent side navigation. Critical rules include preserving location/hierarchy during transitions and avoiding stretched mobile patterns. Sheets and dialogs should transition appropriately - bottom sheets on phones become partial-width panels on foldables. All transitions should feel continuous, avoiding full reloads or context loss when folding/unfolding.
10Future-proofing checklist
Effective foldable design requires testing across all configurations. Key questions include: Does content reflow properly? Are maximum widths defined? Do critical controls avoid hinge areas? Is navigation understandable when resized? Are text lines constrained? Unlike simple scaling, foldables demand thoughtful adaptation to multiple usage modes. The goal isn't filling space, but creating experiences that feel native to each configuration while maintaining continuity across them.