Microsoft Surface Duo is released

Guy Merin

Android Developers, it’s Microsoft Surface Duo release day!

Today marks a very special day for us, it’s Surface Duo release day, and the device will be in customers hands starting today.

We’re very excited to see all the apps you will build that utilize dual-screens and this new form factor, and our Surface Duo Developer Experience team (DevX team) is here to help you, so please reach out!

Image 1: The Microsoft Surface Duo

All developers welcome!

Reminder: Your existing Android apps will work just as you would expect when running on Surface Duo and on a single screen (left or right), but, with some minimal effort, you can utilize both screens to enhance your app and do much more!

Surface Duo-enhanced apps can be built with any of the tools that target Android development. If you’re familiar with any of the following languages and IDEs, you can update your existing apps or build new dual-screen experiences:

• Kotlin & Java using Android Studio on Windows, macOS, or Linux
• Xamarin using C# with Visual Studio on Windows or macOS
• React Native using JavaScript or TypeScript with Visual Studio Code
• Unity for game development
• Flutter
• Web sites and PWAs

If your favorite tool isn’t listed here, but supports deployment to Android and allows for native library interop, chances are you can still build experiences for Surface Duo. The helpers, controls, layouts, and samples we’ve built for each platform are open source, and we welcome your feedback and contributions. Surface Duo supports the Jetpack Window Manager’s dual-screen functionality, so you can confidently build apps that will work across the Android device ecosystem and will target other dual-screen devices or foldables.

Surface Duo SDK

To help developers build great dual-screen experiences, we’ve provided an SDK consisting of helper functions and layout controls for multiple developer ecosystems, and also includes documentation and training materials.

• Dual-screen libraries for Kotlin & Java, including SurfaceDuoLayout
• Cross-platform TwoPaneView and DualScreenInfo for Xamarin.Forms
• Cross-platform TwoPaneView and DualScreenInfo for React Native
• Helper functions for Unity
• Flutter samples
• Dual-screen CSS and JavaScript standards
• In alignment with the recent Jetpack Compose Alpha release, we’ve added a Jetpack Compose Surface Duo Sample

Get started with any of these at docs.microsoft.com/dual-screen. There’s also a variety of samples available, starting with our app samples repo, which provides examples of the different UI patterns that are common for dual-screen interactions:

• Extended canvas
• List-detail
• Two page view
• Dual view
• Companion pane

The developer blog also covers the three steps we recommend to bring your apps to the Surface Duo:

1. Test your existing app on the emulator or Surface Duo.
2. Make incremental changes, like handling all orientations, multi-window support, drag and drop, and other Android functionality.
3. Embrace new dual-screen features by creating layouts for when the app spans both screens.

App inspiration

If you’re new to dual-screen development, start with our introduction to dual-screen devices, which outlines new user interface patterns and experience considerations. Then visit the enhanced app showcase to see some of the amazing applications that will be available for the Surface Duo at launch.

Check out the Surface Duo included built in apps

Surface Duo comes pre-installed with built in Microsoft enhanced apps.

Checkout these apps and see for yourself how they utilize dual-screens.

In the coming weeks we’ll also include a blog post from key development teams including Microsoft Outlook, Microsoft News, Microsoft To Do, Microsoft Office, Microsoft Edge, Microsoft OneNote and other close development partners such as Spotify, Amazon Kindle, Adobe Acrobat Reader, and Jira

Let’s highlight a few examples that are included by Microsoft in Surface Duo and which design pattern they use:

Drag and Drop

Surface Duo can keep you productive while running two apps side by side.

Drag and Drop between the two screens and between apps is a seamless experience with a swipe of a finger or using a Pen. Image 2: Drag and Drop from Microsoft Outlook email into a Microsoft To Do list

Microsoft Outlook, Microsoft To Do, Microsoft Edge, Microsoft OneNote and Microsoft Office all support a drag source or a drop target.

Follow our Drag and Drop sample and add it to your app.

Extended Canvas pattern

Image 3: Microsoft Office spreadsheet spanned across both screens

An Excel spreadsheet is a great case for an extended canvas where users can see much more data on two screens. Two screens in double landscape or double portrait are also great for fast scrolling on large amounts of data.

List/Details pattern

Image 4: Microsoft Outlook List/Detail view

Microsoft Outlook and Microsoft OneNote adapts when spanned on two screens and shows a List/Detailed view making it easy to read through many emails or notes quickly.

Another cool example for a List/Detailed pattern is Microsoft OneDrive Gallery viewer. You can scroll through images on one screen, and see a preview and edit the photo on the other screen. Image 5: Microsoft OneDrive Photo Gallery allows users to scroll to find more images and preview images on the other screen

Image 5: Microsoft OneDrive Photo Gallery allows users to scroll to find more images and preview images on the other screen

Follow our List/Detail sample to get you started.

Launching an activity in the other pane

Android apps often use activities to launch new user tasks.

Image 6: Microsoft Office app launching an Excel spreadsheet on the other screen

For example, in Microsoft Office, when you launch the app on a single screen, it will list out the recent documents you worked on or viewed.

When clicking one of the documents, Surface Duo will launch it on the other pane (only if the other screen is free), and will keep the user in their flow browsing through their recent documents list.

This pattern is very easy to follow with just a few lines of code (in fact, only three lines of code!). See our Intent To Second Screen sample to add this to your app.

Using Pen

Surface Duo is a productivity device and using a pen feels natural.

Image 7: Taking notes in Microsoft OneNote using a Surface Pen

Microsoft OneNote is a great example of such usage, you can take notes using inking, or sketch your thoughts using a pen.

Follow our Pen Hero App sample and how to register for Pen events sample and add Pen support to your app.

Feedback

We can’t wait for you to get your hands on a Surface Duo and to see the new and unique apps that you create. This is so exciting!

You can get a device in one of our launch markets, or download the full featured Surface Duo emulator that will get you started on the emulator to mimic the same functionality of a Surface Duo device.

We would also love to hear your thoughts on the SDK, which tools are your favorite, and what helpers or controls you’d like us to work on next.

Please reach to out to our team using our feedback forum or message me on Twitter or GitHub.

You can register to our Dev Blog RSS Feed and see all our Surface Duo DevX team Tweets

Guy Merin Senior Director of Engineering, Surface Duo Developer Experience Team (DevX)

Follow