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.
Here are some scenarios that will help guide you when applying this design pattern:
|Use either the left or the right screen to display a dialog.||Don’t display the dialog passing through the hinge positioned centered.|
|Use either left or right screen to display bottom sheets.||Don’t display the bottom sheet passing through the hinge.|
|Display the bottom menu navigation on the left side of the screen.||Don’t split the bottom menu navigation across the two screens.|
|Display the toolbar menu on the left side for right-handed pen users.||Don’t allow the toolbar menu to pass through the hinge.|
|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
These projects show a simple implementation of extended canvas that you can use in your apps: