Supporting Pane Overview

Material Design 3 Standard Component
Refer to the Material 3 Supporting Paneguideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics. Technical reference:

[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Tonal Horizon theme to craft your own designs. [/internal_only]

Intro

The supporting pane layout is a canonical layout type used to display a secondary pane that supports the main/focus pane on the screen. The supporting pane is typically positioned adjacent to the main pane, offering a seamless and accessible way for users to access additional information or functionality.

Supporting pane layout side by side in expanded window size (left) and supporting pane displayed as bottom sheet in compact and medium window sizes

Usage

Do

Use the supporting pane to:

  • Display additional information, options, or actions related to the main content, for example, sort and filter settings.
  • Allow users to access supplemental details or perform related tasks without leaving the current context, for example, for inventory management, where items are added, updated, or removed in the main pane, while the supporting pane offers a real-time summary of stock levels.

Don't

Don’t use a supporting pane layout for parent-child information architecture.

Each pane in a supporting pane layout should include a top app bar to ensure actions are linked directly to specific areas, enhancing user understanding and maintaining a smooth experience.

Supporting pane layout: supporting pane with comments (image 1), supporting pane with photo gallery (image 2)

Anatomy

In Android, navigation components, which are part of the navigation suite scaffold, are not classified as panes. Instead, areas are content-related and the navigation is considered separately.

A. Main Pane

The main pane displays the primary content and takes up two thirds of the screen.

B. Detail Pane

The supporting pane is the secondary pane displaying content that supports the primary content. The pane takes up the remaining space on the right or left side of the screen.

Schematics of a supporting pane layout in expanded window size

Behavior and Interaction

In the initial state, only the main pane is visible.

Tapping an item in the main pane or an icon button in the top app bar of the main pane opens the supporting pane. The icon button in the top app bar should show a selected/pressed state to indicate that the supporting pane is open. Users can dismiss a supporting pane by either using the “Close” icon in the top app bar of the supporting pane or by tapping on the icon that opens the pane. In compact window sizes showing a stacked navigation, users can use the “Back” icon button to navigate.

Supporting pane with secondary information of a card including further navigation within the pane

Sort and Filter

Taking advantage of canonical layouts, sort & filter settings can open in a supporting pane. Depending on the sort and filter components a push navigation within the pane is possible. On expanded window size make sure that the supporting pane is displayed close to the pane that you would like to sort and/or filter. For compact window sizes, it is advisable to display the sorting and filtering options in a full-screen modal or a bottom sheet, depending on the number of available options.

Sort and filter settings in the supporting pane

Adaptive Design

The layout can be reset for each view. You can start with a supporting pane layout, and, depending on the use case, the next navigation target might display a list-detail layout.

To automatically adapt the layout to different window size classes, Android provides a supporting pane scaffold that manages the positioning of panes.

In expanded and large window sizes, the supporting pane opens on either the left or right side of the main pane.

Schematics highlighting supporting pane in expanded window size

In medium and compact window sizes, the default behavior of the supporting pane is a push navigation.

Schematics highlighting different layouts of a supporting pane in compact window size

Schematics highlighting different layouts of a supporting pane in medium window size

Custom Implementation

For medium and compact window sizes, you can implement a custom logic by using a bottom sheet or placing the supporting pane below the main pane, for example, if you want to display information in a compact way, such as cards or comments in a scrollable, horizontal pane.

Resources

Related Components/Patterns: Canonical Layouts, Create, Search, Sort & Filter