---
url: /foundations/layout/scaffold/panes.md
description: >-
A fundamental UI design structure that provides a standard platform for
assembling key components
---
# Scaffold
A fundamental UI design structure that provides a standard platform for assembling key components
[Overview](overview.md) · [Bars](bars.md) · [Rails](rails.md) · **Panes**
## Panes
All layouts are made up of 1–3 panes. The type of layout and amount of panes you choose should depend on the [breakpoint](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") (previously window size classes) and the type of product being built.
Layouts often include multiple panes that work together
All layouts are made up of 1–3 visible panes. The type of layout and amount of panes you choose should depend on the [breakpoint](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") and the type of product you're building.
| Breakpoint | Recommended pane total | Other pane totals |
| ----------- | ---------------------- | ----------------- |
| Compact | 1 | -- |
| Medium | 1 | 2 |
| Expanded | 2 | 1 |
| Large | 2 | 1 |
| Extra-large | 2 | 1, 3 |
Panes can be:
* Fixed: Width doesn’t change based on available space
* Flexible: Width changes based on available space, and can grow and shrink
All layouts need at least one flexible pane.
1. Fixed pane
2. Flexible pane
Panes can be permanent or temporary. Temporary panes can appear and be dismissed when necessary, affecting the layout and size of other panes.
Panes can be displayed permanently side by side
Temporary panes can be dismissed
### Single-pane layouts
Single-pane layouts use one flexible pane that extends to fit the available space in a layout’s width. They can be used at any [breakpoint](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes)."), but are recommended for [compact](../breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation.") and [medium](../breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.").
A single flexible pane adapts to fit any breakpoint
### Two-pane layouts
**Split-pane layout**
A split-pane layout keeps the spacer visually centered. It’s best for foldable devices and dynamic layouts.
When a [navigation rail](../../../components/navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") or [drawer](../../../components/navigation-drawer/overview.md "Navigation drawers let people switch between UI views on larger devices. In the expressive update, use an expanded navigation rail.") is present, it only reduces the size of one pane. The other pane remains at 50% of the window width.
The navigation and first pane should be 50% of the window width to keep the spacer centered
With a [navigation bar](../../../components/navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices."), or no navigation, both panes span 50% of the window width by default.
With no navigation rail visible, split-pane layouts set each pane to 50% width by default
**Fixed-and-flexible layout**
This layout is common for [expanded](../breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop."), [large](../breakpoints/large-extra-large.md "Window widths 1200dp to 1599dp, such as desktop."), and [extra-large](../breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.") breakpoints. The fixed-and-flexible panes can appear in whichever order is best for the content.
The fixed pane is often temporary, and used for side sheets or lists with light information density.
1. Fixed pane
2. Flexible pane
### Three-pane layouts
While less common, the extra-large breakpoint supports using a standard [side sheet](../../../components/side-sheets/overview.md "Side sheets show secondary content anchored to the side of the screen.") as a third pane. When the side sheet is present, the expanded navigation rail can remain visible, change into a collapsed navigation rail, or hide completely. Don't use more than three panes.
Note: Fixed panes at this breakpoint are recommended to be 412dp, but side sheets have a default maximum width of 400dp.
1. A standard side sheet can be used as a third pane
## Pane expansion & resizing
Panes can be resized, expanded, and collapsed using [drag handles](../layout-overview/parts-of-layout.md#314a4c32-be52-414c-8da7-31f059f1776d "A drag handle adjusts the layout when there are 2 or more panes.").
* In a split-pane layout, both flexible panes can be freely adjusted, or can snap to certain widths.
* In a fixed-and-flexible layout, the drag handle can fully collapse and expand the fixed pane. This makes it easy to switch between a single-pane and two-pane layout.
The drag handle should also toggle between layout sizes when selected. This can be a tap, double tap, or long press.
Drag handles can adjust pane size in a list-detail layout
At expanded, large, and extra-large breakpoints, two-pane layouts can be customized to snap to set widths when resized.
The recommended custom widths are:
* 360dp
* 412dp
* Split-pane with spacer centered visually
Panes can snap to custom widths when releasing the drag handle
### Persistent pane resizing
The persistent resizing behavior remembers a person's pane width preference. Use this for most resizable layouts.
Pane widths persist even after a person closes the app
The width persists even after a [breakpoint](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") change. This means that if a two-pane layout is collapsed to one pane at any size, it’ll remain collapsed even when changing breakpoints.
When a two-pane layout is resized to a single full-width pane, that pane should remain at full-width after switching breakpoints
### Temporary pane resizing
The temporary resizing behavior doesn't remember a person’s preferences for pane width. This is primarily used in supporting pane layouts where resizing is uncommon.
Supporting pane layouts can have a pane drag handle to temporarily resize the secondary content
With temporary resizing, panes should always return to the default layout after the pane or product is closed and reopened. This ensures content is a suitable size for most interactions.
The pane width can be temporarily adjusted using the drag handle, but will return to the default layout
## Displaying multiple panes
Multiple panes can be displayed in three ways: co-planar, floating, or docked. The layout depends on breakpoint, what the pane does, and how people interact with it:
* Co-planar: Two side-by-side panes. To stay accessible, persistent utilities like tool panels should be co-planar with primary content.
* Floating: A small pane displays above larger panes. Temporary tasks should remain floating regardless of breakpoint, such as a dialog.
* Docked: A small pane pinned to the edge of a window. For example, a [bottom sheet](../../../components/bottom-sheets/overview.md "Bottom sheets show secondary content anchored to the bottom of the screen.") can be docked to show additional actions.
Co-planar: Panes are displayed side by side
Floating: A pane is displayed above other panes or content, like a dialog
Docked: A pane is displayed above other panes and one of its edges extends beyond one side of the screen, like a bottom sheet
## How panes adapt
Pane layouts can adapt using three strategies: **show and hide, levitate,** or **reflow**. When a window is resized or changes orientation, these strategies allow panes to reorganize themselves to preserve context and meaning.
### Show and hide
As the [breakpoint](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") size or orientation changes, panes can enter and exit the screen or appear next to one another.
A pane can be shown or hidden depending on the available space and orientation
### Levitate
Panes can be elevated above other content as **floating** or **docked** panes. This strategy helps panes appear relative to their triggers.
Floating panes:
* Appear in front of the body content
* Can be customized to be dragged or resized
When adding controls that resize or move a floating pane, provide accessible controls.
A co-planar pane can float when switching breakpoint or orientation
On large screens:
* Floating panes are the default
* The scrim behind a floating pane is optional
1. Floating pane with a scrim
2. Floating pane without a scrim
Docked panes are usually at the bottom of the window, like a [bottom sheet](../../../components/bottom-sheets/overview.md "Bottom sheets show secondary content anchored to the bottom of the screen.").
At [medium](../breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") and [expanded breakpoints](../breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop."), docked panes can adapt into floating panes.
A docked pane can adapt into a floating pane at medium and expanded breakpoints
Alternatively, at medium and expanded breakpoints, a docked pane can adapt into a co-planar pane.
A docked pane can also adapt into a co-planar pane at medium and expanded breakpoints
On large screens, consider changing docked panes into co-planar panes.
1. A compact screen can have a docked pane
2. On a large screen, it should change to a co-planar pane
### Reflow
Panes can be reorganized on screen as the breakpoint or orientation changes, also known as reflow.
For example, in a vertical orientation, the supporting pane can move underneath the primary pane.
In a vertical orientation, the supporting pane can move below the primary pane
Reflow also applies to breakpoints. When there’s not enough horizontal space for panes, they can stack vertically instead.
Panes can change size, location, and orientation when switching screen sizes
## Spatial panels
On XR devices, pane layouts can be presented in disconnected [spatial panels](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-panels "In Android XR, a spatial panel is a container for UI elements, interactive components, and immersive content."). These panels must have clear containment to make them easy to see on any background.
The content in a spatial panel can use [implicit grouping](../grids-spacing/spacing.md#f3b19166-fead-462f-8adb-7153cd72af6b "Implicit grouping uses close proximity and open space to group related items.") when the pane has an explicit container to distinguish it from the environment.
When a pane uses explicit containment, content can use implicit grouping
## Accessibility considerations
**Coplanar panes**
* The focus order should match the visual arrangement of the panes on screen
**Floating panes**
Modal floating pane:
* When active, the elements behind it can’t be interacted with
* Focus moves automatically to the first element in the pane, and when the pane is closed, focus moves back to the element that triggered it, like a dialog
* If triggered automatically, focus should still move to it, but when it’s closed, focus should go to the next most logical element on screen
* It disappears when a person interacts with something behind it.
Non-modal floating pane:
* When open, other parts of a product can be interacted with
* Focus should be able to move to and from the pane
* The pane should be available in a logical reading order of the screen
**Docked panes**
* Have the same focus requirements as modal and non-modal panes
* The focus order should match the visual arrangement of the panes on screen