Adaptive Layout Design for Foldable Devices

We develop adaptive mobile app layouts for foldable devices. Picture this: a user unfolds a Samsung Galaxy Z Fold6. The app must instantly reconfigure from a compact vertical interface to a wide two-panel layout. Without adaptation, the app behaves like an "enlarged window"—a narrow strip of content centered on the screen. This not only frustrates users but also lowers app store ratings. With over 5 years of experience and 10+ successful projects for Samsung Z Fold, Z Flip, and Google Pixel Fold, we guarantee seamless UX in any form factor. The cost of adaptation starts from $1,500 for an app with a ready-made design, saving up to 50% compared to a full redesign.

Three Form Factors, Not One

Foldable devices are not a single scenario. There are at least 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. Very tall and narrow. Content that looks fine on 20:9 may be uncomfortable for one-handed navigation on 23:9.
• Unfolded mode — Large screen. Z Fold6: 2160×1856px when unfolded, aspect ratio ~7.6:8 — nearly square. This is a fundamentally different form factor: wide horizontal content works well, narrow vertical does not. Apps that simply stretch to fill the screen without layout adaptation look like tablet apps in letterbox mode.
• Flip mode (Table Top) — Characteristic of Z Flip. The device is folded horizontally; the top half is the screen, the bottom is the keyboard or closed. Media players, video calls, camera — in this mode the app must adapt the interface to "half screen." Google calls this Table Top mode.

Plus, devices with a Cover Screen (external screen). Z Fold6 has a 6.3" external screen. This requires a separate scenario: what to display when the device is folded and the cover screen is active. Our adaptive design for foldable devices leverages WindowSizeClass and FoldingFeature to ensure seamless UX across all modes.

Why Foldable Devices Require Distinct Design

Ignoring physical constraints leads to poor UX. Hinge and crease — in unfolded mode, there is a physical crease in the middle of the screen. Content should not be placed directly on it: important interactive zones, text, images should be offset from the center. Jetpack Compose provides WindowInfoTracker and FoldingFeature to determine the fold position and its state (FLAT / HALF_OPENED). Reference: Wikipedia: Foldable smartphone.

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 app should restructure its layout without reloading the screen (continuity).

How to Ensure Continuity When Folding/Unfolding

The user folds or unfolds the device while using the app. The state must not be lost: if they were reading an article, the scroll position is preserved; if filling a form, entered data is not reset. This is not only a development task—it is a design task: the designer must envision both states as one continuous experience.

Multi-window — Foldable devices are often used in multi-window mode: two apps side by side. This means the app must work correctly at arbitrary widths from 360dp to 900dp+. Fixed-width components are problematic.

Step-by-Step Adaptation Process

1. Analyze current design: determine which components need restructuring when WindowSizeClass changes.
2. Create frames for all modes: cover, folded, unfolded, table top.
3. Design layout rules: for each component, specify how it should behave in each class.
4. Document state preservation principles: what must remain when switching modes.
5. Review implementation: verify alignment with design.

How We Build the Design

In Figma, we create frames for all modes of specific devices:

For each mode, we do not do a full redesign but rather a layout adaptation on top of 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. Adaptive design based on existing components is 5 times faster than designing from scratch.

Special attention is given to transitional animations between modes. The unfolding animation should be natural: elements rearrange with motion, not flickering. In Figma, Smart Animate helps demonstrate the concept.

What Is Included in the Work

• Frames for 3+ modes in Figma (cover, folded, unfolded, table top);
• Documentation of layout rules specifying WindowSizeClass and FoldingFeature;
• Developer annotations (state preservation principles, motion animations);
• Training session (1 hour) for your development team;
• 1 week of post-launch support for any design-related questions;
• Review of implementation for design compliance (optional).

Ignoring the crease as a physical constraint. A floating action button placed exactly on the center axis becomes a button that is uncomfortable to press due to the physical relief. The hinge exclusion zone is a real limitation, not theoretical.

Timeframes and Cost

Developing adaptive layouts for foldable devices takes 2–3 business days for an app with an existing mobile design. Cost is determined individually after analysis, with a starting price of $1,500. Contact us to discuss your project and get a consultation from an engineer with years of experience in mobile development.

Comparison of Approaches