Surface Duo at Microsoft Build

Craig Dunn

Hello Microsoft Surface Duo developers!

Today at Microsoft Build we shared a session covering how to take advantage of the dual screen device, Surface Duo using Xamarin and C#. You can watch the recording below:

Video: Microsoft Build 2020 on YouTube

Existing Android™ apps run without modification on the Surface Duo, but there are additional capabilities that developers can choose to leverage in their apps. In this session I discuss how to enhance an existing app to take advantage of the Surface Duo’s unique features. Topics include:

  • Learning about the Surface Duo – Microsoft’s first Android device.
  • UX design patterns for dual-screen interactions.
  • Enhancing an existing Android app for Surface Duo.

The code examples in the session were using C# and Xamarin, but the process can be applied equally well to any Android or cross-platform development tool.

Use your favorite tools to develop for Surface Duo

Because there are so many different programming options, any developer can build dual-screen apps. We have blogs, documentation, and samples for all these platforms and languages:

  • Kotlin and Java
  • Unity for games
  • React Native, using TypeScript or JavaScript
  • Flutter
  • Web developers
  • Xamarin.Forms or Xamarin.Android using C#

You can download the Surface Duo emulator preview and get started today.

Dual-screen design patterns

Dual-screen user-experience patterns

Figure 1: Dual-screen app patterns

In the session I discussed these patterns:

  • Extended canvas – app fills both screens.
  • Master-detail – familiar UX consisting of a list or collection, with an individual item selected & displayed.
  • Two page – book-like navigation/reading experience.
  • Dual-view – show related information on each screen, and synchronize the views as the user interacts with them.
  • Companion pane – place settings, palette, or controls on the second screen.

The dual-screen documentation covers the app patterns in in more detail, and we have samples for each.

Enhance your app

We’ve covered this in the blog before – once you’ve downloaded the emulator we recommend these steps to test and update your apps:

3 steps to enhance an app for dual-screen

Figure 2: steps to get your apps ready for dual-screen devices

In the Build session I walked through converting a Xamarin.Forms app, which required some app architecture changes to split out full-screen views so they can be used on dual-screens. Android developers using other tools might be able to follow similar advice, depending on their current app design. Android apps frequently consist of self-contained activities, and splitting the UI out into re-usable fragments makes it easier to present on two screens:

Migrating to dual-screen app architecture

Figure 3: preparing your Android app architecture for dual-screen

We have a SurfaceDuoLayout control for Kotlin and Java projects, and the TwoPaneView for React Native, to help lay out your views for two screens. An added benefit of refactoring views in this way is a path towards supporting tablets and other devices.

Session resources

The Xamarin sample code used in the session is available on GitHub, as are these samples that were mentioned: Xamarin SDK samples, XamarinTV, and Food Delivery.

Developers using other tools can visit the docs for Kotlin & Java, Unity, React Native, and we also have get started instructions for Flutter on our blog.

There are also samples for Kotlin & Java, Unity, React Native, and Flutter on GitHub.

Feedback

We hope you’re enjoying Microsoft Build 2020. Review other sessions online and follow @msdev and @Microsoft365 on Twitter.

If you have any questions, ask using our feedback forum, or message me on Twitter or GitHub.

Android is a trademark of Google LLC.

0 comments

Discussion is closed.

Feedback usabilla icon