Microsoft Surface Duo is released

Guy Merin

Guy

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.

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 Feature 007 Onedrive7

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.

A picture containing cellphone, phone, holding, person Description automatically generated

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

 

4 comments

Leave a comment

  • Avatar
    Robert Hellestrae

    Thanks Guy – fantastic post;

    Starting to prototype an Android app project to utilize dual-screen, and new form factor – C#, Xamarin samples are very useful;

    Are any Android applications available @ Google Play which specifically target dual-screen?

    • Guy Merin
      Guy MerinMicrosoft employee

      Hi Robert,
      The apps I mention in this post are all in Playstore with the enhancement code, this includes the Microsoft apps and the 3P apps mentioned here.

      We are also lining up a few more 1P and 3P apps.
      Follow our blogs, and will announce more.

      Are you looking to develop a Dual Screen app? do you need any help?

      • Avatar
        Robert Hellestrae

        Developing a dual screen, Surface Duo application for yacht brokers, management;

        Using Food Delivery sample application as a guide – app project is progressing well;

        I work with Visual Studio for Mac on a MacBook Pro laptop – C#, Xamarin as tools;

        As a developer of Windows Phone 7 apps in 2010, Windows 8 apps in 2012…
        building out Surface Duo apps in 2020 is a similar experience – new form factor, etc;

  • Avatar
    Suri Nagappa

    The one and only issue with Duo is rendering behind hinge GAP. By default it should skip the GAP. This will solve 99% of the use cases. If any app wants to render behind, that app can query the gap dimensions and do whatever they want with it. Instead you guys have chosen the opposite. This sucks and irritates. This could backfire and hinder the consumer adoption.