Microsoft Surface Duo is released
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
- Unity for game development
- 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
- 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
- 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:
- Test your existing app on the emulator or Surface Duo.
- Make incremental changes, like handling all orientations, multi-window support, drag and drop, and other Android functionality.
- Embrace new dual-screen features by creating layouts for when the app spans both screens.
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.
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.
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.
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
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?
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?
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;
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.