Position dialog boxes and pop-up menus so they don't overlay the fold. For example, UI controls near the fold can be difficult for users to access, and text overlaying the fold can be hard to read (or unreadable if occlusionType is FULL).ĭesign your layouts so that UI elements are accessible in all device states. Tabletop and book postures offer new layout possibilities, but the HALF_OPENED device state also imposes some limitations.

When a device is in the HALF_OPENED state, two postures are possible, depending on the orientation of the fold: tabletop posture (horizontal fold) and book posture (vertical fold). Foldable device in flat and half-opened states. On dual-screen devices, the occlusionType is FULL, no content is viewable in the fold (hinge) area even though an app might span both screens.įoldable devices can be in various folded states, such as FLAT (fully open) or HALF_OPENED (somewhere between fully open and completely closed). The fold has dimension and an occlusionType property, which defines whether the fold obscures part of the display. The fold can be a flexible area of the screen or, on dual-screen devices, a hinge that separates the two displays. The fold of a foldable device divides the screen into two portions. To learn more about responsive/adaptive design for foldables, see the following: Responsive/adaptive design prepares your app to support all kinds of foldable form factors. Adaptive layouts optimized for both folded and unfolded screens.įoldable devices fold in a variety of ways, such as inward, with the display folding into the interior of the device, or outward, with the display wrapping around the device. Because the layouts are separate, you can optimize each for its specific use case. Folded, the device is similar to a standard phone a single column layout with a bottom navigation bar is simple but effective. Adaptive layouts provide an optimized user experience when a foldable device is folded or unfolded, in portrait or landscape orientation, or in tabletop or book posture.įor example, a large-screen foldable device unfolded in landscape orientation is like a tablet a two-pane layout with a navigation rail makes excellent use of the wide screen. Adaptive design creates alternative layouts optimized for different screen sizes and configurations. The differences in screen size and aspect ratio of folded and unfolded screens can be quite large, such that even a responsive layout can't optimally accommodate both displays. For view-based layouts, implement responsive design with ConstraintLayout for Compose, BoxWithConstraints.īut sometimes, the layout needs to adapt. Responsive layouts enable an app to look and work great on a variety of display sizes, including the folded and unfolded screens of a foldable device. Support for foldable devices begins with responsive design. Foldable device in multiple postures: folded, open flat, open flat rotated to landscape, and half opened (tabletop). Folding features such as tabletop posture and book posture enable imaginative layouts and unconventional user interfaces. Large and small screens on the same device offer complementary but distinct interactive experiences. Foldable devices provide an opportunity for innovative app development.

Dual screen wrap background