[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Learn about foldables\n\nFoldable devices provide an opportunity for innovative app development. Large\nand small screens on the same device offer complementary but distinct\ninteractive experiences. Folding features such as tabletop posture and book\nposture enable imaginative layouts and unconventional user interfaces.\n**Figure 1.** Foldable device in multiple postures: folded, open flat, open flat rotated to landscape, and half opened (tabletop).\n\nResponsive/adaptive design\n--------------------------\n\nSupport for foldable devices begins with responsive design. Responsive layouts\nenable an app to look and work great on a range of display sizes. Implement\nresponsive design with the [`BoxWithConstraints`](/reference/kotlin/androidx/compose/foundation/layout/package-summary#BoxWithConstraints(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)) composable.\n\nBut to optimally support the folded and unfolded screens of a foldable device,\nthe layout needs to adapt. The differences in screen size and aspect ratio of\nfolded and unfolded screens can be quite large, such that even a responsive\nlayout can't adequately accommodate both displays. Adaptive design creates\nalternative layouts optimized for different screen sizes and configurations.\nAdaptive layouts provide an optimized user experience when a foldable device is\nfolded or unfolded, in portrait or landscape orientation, or in tabletop or book\nposture.\n\nFor example, a large screen foldable device unfolded in landscape orientation is\nlike a tablet; a two‑pane layout with a navigation rail makes excellent\nuse of the wide screen. Folded, the device is similar to a standard phone; a\nsingle column layout with a bottom navigation bar is straightforward but\neffective. Because the layouts are separate, you can optimize each for its\nspecific use case.\nYour browser doesn't support the video tag. **Figure 2.** Adaptive layouts optimized for both folded and unfolded screens.\n\nFoldable devices fold in a variety of ways, such as inward, with the display\nfolding into the interior of the device, or outward, with the display wrapping\naround the device. Responsive/adaptive design prepares your app to support all\nkinds of foldable form factors.\n\nTo learn more about responsive/adaptive design for foldables, see the following:\n\n- [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes)\n- Material Design --- [Applying layout](https://m3.material.io/foundations/layout/applying-layout/window-size-classes)\n\nFoldable states and postures\n----------------------------\n\nThe fold of a foldable device divides the screen into two portions. The fold can\nbe a flexible area of the screen or, on dual‑screen devices, a hinge that\nseparates the two displays.\n\nThe fold has dimension and an [`occlusionType`](/reference/kotlin/androidx/window/layout/FoldingFeature.OcclusionType) property, which defines\nwhether the fold obscures part of the display. On dual‑screen devices, the\n`occlusionType` is `FULL`, no content is viewable in the fold (hinge) area even\nthough an app might span both screens.\n\nFoldable devices can be in various folded states, such as [`FLAT`](/reference/kotlin/androidx/window/layout/FoldingFeature.State#FLAT()) (fully\nopen) or [`HALF_OPENED`](/reference/kotlin/androidx/window/layout/FoldingFeature.State#HALF_OPENED()) (somewhere between fully open and completely closed).\n**Figure 3.** Foldable device in flat and half-opened states.\n\nWhen a device is in the `HALF_OPENED` state, two postures are possible,\ndepending on the orientation of the fold: tabletop posture (horizontal fold) and\nbook posture (vertical fold).\n\nTabletop and book postures offer new layout possibilities, but the `HALF_OPENED`\ndevice state also imposes some limitations. For example, UI controls near the\nfold can be difficult for users to access, and text overlaying the fold can be\nhard to read (or unreadable if `occlusionType` is `FULL`).\n\nDesign your layouts so that UI elements are accessible in all device states.\nPosition dialog boxes and pop‑up menus so they don't overlay the fold.\nMake sure important content is viewable when the device is partially folded.\nSplit content into two areas when the device is half opened---top and bottom\nin tabletop posture, left and right in book posture.\n\nFor more information about folds and foldable postures, see [Make your app fold\naware](/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware).\n\nApp continuity\n--------------\n\nAn app stops and restarts as it transitions from one screen to another when a\ndevice folds or unfolds. To maintain continuity for the user, the app should\nrestore its state when recreating the app layout on a folded or unfolded screen.\nFor example, apps should do the following:\n\n- Retain text typed into input fields\n- Restore the keyboard state\n- Restore the scroll position of scrollable fields\n- Resume media playback where it left off when the app was stopped\n\nThe different screen layouts of a foldable device should also complement one\nanother. For example, if the folded screen shows an image and description for a\nproduct from an online store, the unfolded screen should maintain continuity by\nshowing the same image and description, but also include complementary content,\nsuch as product specifications or reviews.\n\nTo learn more about managing app state and continuity, see [Save UI states](/topic/libraries/architecture/saving-states)\nand [Handle configuration changes](/guide/topics/resources/runtime-changes).\n\nMultitasking\n------------\n\nLarge screen foldables have a tablet‑sized screen that's ideal for\nmultitasking in multi‑window mode. Foldables support split‑screen\nmode; some even support desktop windowing mode, where apps are contained in\nmovable, resizable windows, similar to a desktop windowing system.\n\n|---|---|\n| | |\n| **Figure 4.** Foldable device in landscape orientation running three apps in split-screen mode (left) and desktop windowing mode (right). ||\n\nAndroid 12 (API level 31) and later versions default to multi‑window mode---on large screens, all apps run in multi‑window mode regardless of app configuration. On previous versions down to Android 7.0 (API level 24), you must configure your app to be resizable to support multi‑window mode.\n\nFor information about multitasking in multi‑window mode, see [Support\nmulti-window mode](/guide/topics/ui/multi-window).\n\nDrag and drop\n-------------\n\nLarge screen foldable devices provide ample screen space for drag and drop\ninteractions. Multi‑window mode on foldables enables drag and drop between\napps.\n\nDrag and drop interactions create a productive and engaging user experience. Add\ndrag and drop capabilities to your app using the Android drag and drop\nframework. For more information, see [Enable drag and drop](/guide/topics/ui/drag-drop).\n\nAdditional resources\n--------------------\n\n- [Test different screen and window sizes](/training/testing/different-screens)"]]
