--- url: /foundations/layout/layout-overview/adaptive-design.md description: Layout is the visual and strategic arrangement of elements on a screen --- # Layout overview Layout is the visual and strategic arrangement of elements on a screen [Overview](overview.md) · [Parts of layout](parts-of-layout.md) · **Adaptive design** ## What’s adaptive design? Adaptive design is a set of techniques to change an interface to fit different contexts. While responsive design scales a single layout to fit any screen, adaptive design customizes a product to optimize the experience on each device. Designing adaptive experiences goes beyond customizable properties like color, typography, and shape. The structure, individual components, and entire layouts can adapt based on: * People: Individual preferences and settings * Devices: Watch, phone, foldable, tablet, desktop, or XR device * Usage: Screens dynamically change as a person resizes windows, changes orientation, or switches device ## Designing adaptive experiences Layouts must be versatile, designed to adapt fluidly across three primary experience types: **mobile**, **desktop**, and **spatial**. Start with mobile and make sure your product's layout and components can scale and adapt seamlessly all the way up to spatial environments. While each experience has different primary input methods, designs should be built with all inputs in mind—touch, pointer, and physical keyboard—since users may use your product in a desktop environment regardless of their device type. ### Mobile Mobile experiences include phones, foldables, and tablets. On mobile, an app can be shown in several window modes: * Full-screen: The app takes up the entire screen, the default for mobile * Split-screen: Two or more apps share the screen simultaneously, common on tablets and foldables * Bubbles: Floating windows that let people multitask without leaving their current context ![A mobile app in full screen mode.](/assets/f82d43b9-mp3w1k0w-01.DFti3AI7.webp) Mobile layouts default to a full-screen window ### Desktop Desktop experiences use free-form windows that adapt across [breakpoints](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes)."). People can use split screens, floating windows, and free-form windows for multi-tasking. A tablet can convert to a desktop experience when a physical keyboard and mouse are connected. Similarly, Android mobile devices can transition into a desktop-like environment when connected to an external monitor. ![2 desktop layouts adapted to large and medium breakpoints.](/assets/6ae9d8c6-mp3w5izv-02.DLUvkr3T.webp) A desktop layout can adjust from three to two columns to fit a medium breakpoint ### Spatial Extended reality (XR) experiences use multiple free-form windows within virtually limitless screens. Immersive modes, such as Android XR’s [full space](https://developer.android.com/design/ui/xr/guides/foundations), allow components to be positioned freely in 3D space. [More on XR design](../../xr/design/overview.md) ![An XR layout inimmersive full space mode.](/assets/6db977c0-mp3wl9n4-03.Cq76-tSR.webp) In an XR full space layout, a navigation rail can become an orbiter, and float to the side of the main pane ## Adaptive layouts The Material 3 adaptive system uses [panes](../scaffold/panes.md "Panes are layout containers that house other components and elements within a single app. A pane can be: fixed, flexible, floating, or semi permanent.") and [breakpoints](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") to organize content into adaptive layouts. Panes are the building blocks of layout; a pane is a single destination in the product. For example, in a messaging app, the list of messages is one pane, and and a specific conversation thread is another. ![Mobile and tablet in portrait layout with 1 pane. Tablet in landscape layout with 2 panes.](/assets/10146927-mp3wz2eh-04.CN7u-CJW.webp) Panes are the primary segments of a layout, and can change based on context As the pane or window resizes—or as someone navigates a product—panes may change size, enter and exit the screen, and reorganize themselves to make the experience more usable or easier to navigate. These patterns are called adaptive strategies. Material has three adaptive strategies that create a cohesive experience across breakpoints: [show and hide](../scaffold/panes.md#bbe68948-bc05-4f7c-b870-6254439e4fd8), [levitate](../scaffold/panes.md#96bf71b8-04b8-4fff-97c7-9bc782fbf401), and [reflow](../scaffold/panes.md#e0a573e9-8c62-4772-8d81-47955ff83196). ![A foldable open screen with 2 co-planar panes displayed side by side.](/assets/12c69fcf-mp3xrm51-placeholder.HMJtZe-3.webp) Co-planar: Panes are displayed side by side ![A foldable open screen with a floating pane displayed above other elements.](/assets/29bd8c64-mp3xtdfv-placeholder-1.DQ-r_oBn.webp) Floating: A pane is displayed above other panes or content, like a dialog ![A foldable open screen with a docked pane to the bottom of the screen displayed above other elements.](/assets/3b00205a-mp3xuwp5-placeholder-cmd-v-to-replace.DqCGVqQ1.webp) Docked: A pane is displayed above other panes and one of its edges extends beyond one side of the screen, like a bottom sheet In Compose, the [Navigation 3](https://developer.android.com/guide/navigation/navigation-3) library allows multiple destinations to be shown on screen at the same time, and enables layouts to adapt seamlessly across window sizes and screens. Navigation destinations remain consistent regardless of screen sizes with Navigation 3 ### Adapting components Components can adapt in appearance, placement, and behavior based on factors like: * Where components are placed in relation to their containers, content, and pane boundaries * How components use space * How components enable usage across different device and input types Most Material components respond using three main strategies: resizing, showing and hiding, and presentation changes. #### Resizing Components should resize in response to their content and their placement in a layout. For example, [buttons](../../../components/buttons/overview.md "Buttons let people take action and make choices with one tap.") may scale along with their parent container, or hug their contents and maintain a left or right alignment. ![A card with a button that spans the full width, and a card with a button that’s start-aligned and hugs its contents.](/assets/64ca857a-mp3xf0z5-05.DHjEj5dn.webp) Buttons can hug their contents or span their containers based on context #### Showing & hiding Components should show and hide information, or collapse and expand to selectively reveal content that best suits the space. For example, [list](../../../components/lists/overview.md "Lists are continuous, vertical indexes of text and images.") items may reveal descriptions or other additional information as their parent container scales. ![A list on mobile and on tablet. List items show additional text on tablet.](/assets/6e7d6d2c-mp3xgph2-06.DkNOj5oS.webp) List items can reveal more text on a tablet #### Presentation changes Presentation changes include the orientation of elements and changes to specific properties, like color, type, and shape. Components can also change configurations. For example, when a window size increases, a [FAB](../../../components/floating-action-button/overview.md "Floating action buttons (FABs) help people take primary actions.") can change to an extended FAB, and [navigation rails](../../../components/navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") can be automatically expanded. ![A large desktop window with an extended FAB. A smaller window shows a standard FAB.](/assets/b45d197d-mp3xiwiu-07.CX_-bD_Z.webp) The extended FAB can change to a standard FAB when the window is smaller