Working with Microsoft’s Surface Duo developer tools

Microsoft’s announcement of the Android-based Surface Duo folding phone last year came as a surprise; we expected only a Windows Core-powered dual-screen laptop. After the death of Windows 10 Mobile and the Windows Phone platform, the odds of Microsoft ever shipping another mobile device that wasn’t a tablet with LTE were scant. Especially a device running an operating system developed by another company.

But here we are, a few months on from the launch and still some time from the device sitting in anyone’s hands, with the first release of a set of developer tools that go into some detail how Microsoft intends to support folding screens with Android.

Bootstrapping a new ecosystem

There’s a lot to think about when writing code for dual-screen devices such as the Duo and the larger Windows-based Surface Neo. They’re not like the folding single screens used by Samsung and the like, using proven LCD screen technologies rather than newer, flexible OLED (organic light-emitting diode) films. It might not be as revolutionary an approach, but then Microsoft has always been a more pragmatic organization, and the design risks associated with having a visible hinge are relatively easy to overcome.

What really matters is getting applications onto the new devices, and Microsoft recently announced developer toolkits and emulators for both the Neo and Duo. Surface Neo’s tools will arrive soon, but the Duo’s are here already, with tools for Android’s own development platform and for Microsoft’s cross-platform Xamarin. It’s important to note that the Surface Duo is an Android device through and through, so existing and new Android applications will run on it, with support for Google’s Play services and the Play Store.

Using an existing platform such as Android for the Surface Duo reduces the risks associated with developing for a new device. Instead of learning something completely new, you bring existing skills to the platform, only needing to learn new user interface design patterns. Microsoft suggests that these are variants of the current default and full-screen Android views, adding span options for dual-screen operations.

Working with dual screens

The default application view offers two options, first letting you put two different applications side by side. This lets you do things like have a calendar and a map open, so you can plan routes for a day’s activities. If an application is designed to work at different screen resolutions it can take advantage of the full width of the twin screens, scaling as if it were running on a tablet. It’s not an automatic option; a user needs to switch to spanning view with a simple gesture. If an app is designed to run at full screen it can use either a single screen or, if designed to scale, both. Here spanning can be automatic or manual.

One big issue remains: the seam between the two screens. From videos of the Duo it’s clear that there is a seam between the displays, though nowhere near as big as a typical phone bezel. The same videos show the seam to be relatively smooth, with users able to swipe across the hinge in a single action. Both should make it easy for users to “tune out” the seam. That should allow you to use apps such as maps in what Microsoft calls “an extended canvas.” There are some tricks needed for working with these, such as moving menus to a single screen rather than drawing them across the seam.

Of course, you can take advantage of the seam as a natural junction between two parts of a user interface, where two linked views meet. Here it can be the boundary between a list with an associated detail page, or a two-page view into an ebook, or a set of controls for an editor. It’s important to get the sizing right here, so your users don’t find user interface elements leaking from one logical pane to another.

To help you get started Microsoft has a set of GitHub repositories of SDK samples for both native Android and for Xamarin Forms. These provide samples for the key design patterns that Microsoft has identified, showing how to implement them in your applications. You can use these as a framework for your own code. Since they’re open source, there’s always the option of providing a pull request and updating any of the samples as well as adding your own.

Testing apps in the Surface Duo emulator

Part of the SDK is a Surface Duo emulator, designed to work with both Google’s Android Studio and for Xamarin code being developed in Visual Studio. It’s a useful tool, preloaded with a preview version of the dual-screen Microsoft Launcher as well as the Android version of Edge. It’s enough to help you test both desktop and Web applications with what’s likely to be the default launcher and browser for the Duo.

Although the Duo is a dual-screen device, apps initially launch on a single screen. If you want to test an application on dual screens, grab the white bar at the bottom of the screen and drag it to the middle of the emulator to open the app across both screens. Using this technique can help you work around the gap in the middle of the display where the two screens fold, as well as plan for how you might work with the Duo’s planned on-screen keyboard.

The emulator is fast enough for most purposes, with close to native speed on my main development laptop. You can set it as a target for development code, allowing you test single and dual-screen operations, along with new Xamarin features. Once code is deployed it can be debugged from both Android Studio and Xamarin. There’s even the option of using Android Debug Bridge directly on code that’s been deployed to the simulated device.

If you want to use the emulator from Visual Studio you will need to make some changes to your setup. Microsoft provides a script to add it your development environment, setting the location of the Android SDK and the emulator. Xamarin code for the emulator needs to be built to run on Android 10.0 API 29, as the emulator name isn’t correctly set in the first release. The SDK samples are a good test of both development tooling and the emulator. I was able to get them running with very little intervention using the gradle build scripts from the GitHub sample repository in Android Studio.

Microsoft is clearly putting a lot of effort into getting a new form factor off the ground. Getting tools into the hands of developers early is a big part of this, giving you the opportunity to add affordances for new form factors to existing applications without making significant changes to your code. That’s all while helping you experiment with new applications designed to work with the opportunities that come with a dual-screen device. It’ll be interesting to see what gets built using this new SDK.