Extended canvas design pattern

The extended canvas pattern is the simplest dual-screen pattern, but it's powerful. You may consider this pattern if you need a bigger canvas for a task such as drawing, or if your app has a free-flowing canvas that the user can freely scroll to avoid the seam if some important content is obscured. This provides the benefit of giving your app more screen real-estate, rather than constricting it to one screen or another.

Extending the canvas allows users to take advantage of the larger screen real-estate provided by dual-screen devices.

Two examples of extended canvas: a map and a drawing app

Best practices

Here are some scenarios that will help guide you when applying this design pattern:

place alerts and dialogs in the center of a screen, and avoid the hinge

Do Don't
Use either the left or the right screen to display a dialog. Don’t display the dialog passing through the hinge positioned centered.

avoid spanning sheets under the hinge

Do Don't
Use either left or right screen to display bottom sheets. Don’t display the bottom sheet passing through the hinge.

avoid palettes under the hinge, and try to place in the most natural position for the user

Do Don't
Display the bottom menu navigation on the left side of the screen. Don’t split the bottom menu navigation across the two screens.

avoid toolbars under the hinge

Do Don't
Display the toolbar menu on the left side for right-handed pen users. Don’t allow the toolbar menu to pass through the hinge.

try to place toolbars appropriately for the user's preferences

Do Don't
Display the toolbar menu on the right side for left-handed pen users. Don’t allow the toolbar menu to pass through the hinge.

Types of apps that may benefit from this pattern

  • Map apps
  • Drawing canvas apps

Code examples

These projects show a simple implementation of extended canvas that you can use in your apps: