Foldable devices can have different displays—or even a combination of displays—active for different folding states.
Unfolding a device to provide a larger screen can have a positive impact on usability:
- A larger screen usually means a more immersive user experience
- With multi-window mode, users can multitask easier
Folding and unfolding a device can move your application to a display with a different size, density, or aspect ratio. A responsive UI is essential. If your app already implements a responsive UI, then many of the same considerations apply to foldables as well (see Migrate your UI to responsive layouts).
When running on a foldable device, apps can transition from one screen to another when the user folds or unfolds the device. After the transition, the app should resume in the same state and maintain continuity for the user.
Make your app resizable
When users work with a large screen device, they often multitask. As a result, multi-window support and responsive app design are important for creating the optimum user experience. For example, multi-window mode enables users to create their own app arrangements, such as using an app in one window to browse content and an app in another window to play a video or send a message. Apps that have responsive layouts adjust automatically as users resize app windows.
Foldable devices have a fold in the display that separates two portions (typically halves) of the display. The fold has dimension and can separate the two portions with an occlusionType, which defines whether the fold occludes part of the display (a full occlusion is reported for dual screen devices).
Two of the possible foldable postures are
FLAT, you can consider the surface to be opened entirely flat, though in
some cases it may be separated by a hinge. For
HALF_OPENED, the window has
at least two logical areas.
When the device is in
HALF_OPENEDstate, the device can be in two
postures, depending on the orientation of the fold: one is tabletop mode
(horizontal fold), the other is book mode (vertical fold). Ensure that your
user experience fits these postures.