Companion pane sample

The companion pane pattern is a great opportunity to take advantage of added screen real-estate by exposing otherwise hidden level 2 surfaces when the app is spanned. You can also take advantage of two screens by placing the app canvas on one screen and using the other to hold tools that manipulate the content of the canvas.

sample app UI using companion pane pattern

Key value

Show complementary context to augment users' tasks, usually with a primary/secondary relationship, by elevating to the surface previously buried level 2 functionalities for quicker access.

Types of apps that may benefit from this pattern

  • Productivity apps that may want supplemental information appearing next to the main content.
  • Creative tools like image drawing app.
  • Music or video editor apps.
  • Gaming apps.

For more info see the companion pane section of Introduction to dual-screen devices.

Sample projects

Get the companion pane sample on GitHub:

Kotlin Companion Pane Sample
Java Companion Pane Sample
C# (Xamarin) Companion Pane Sample