Hello developers!

Thank you to everyone who joined us at Microsoft Build this week. There was a lot of amazing announcements across the company, but for the Surface Duo Developer Experience team the highlight was sharing the latest info on building and enhancing your apps for dual-screens, and “meeting” everyone who attended the live Ask The Experts session. We really appreciate the passion of the developer community and look forward to talking with you more at future events.

Until then, here’s a summary of the top questions and answers from the session (which is also available to watch online).

Are the dual-screen APIs Surface Duo-specific or are becoming standardized across all foldables?

Early last year when we introduced the Surface Duo SDK, we released the DisplayMask package which only works on Surface Duo. This library provided a stable platform upon which to build dual-screen applications for Surface Duo.

Around the same time, Google released the first alpha version of Jetpack Window Manager, which is a standardized API for all types of dual-screen and foldable devices, including the Surface Duo and foldables from other manufacturers. Window Manager is currently at version alpha06 and we are incorporating it into our dual-screen SDK so that developers can maximize the benefits of enhancing their apps once it’s stable.

Surface Duo fully supports both APIs and we encourage adoption of Jetpack Window Manager once it’s stable.

After adding multi-instance support, what would you recommend as the next easiest step to make existing apps better on the Surface Duo?

A couple of minor changes that you could add and that will make your app shine on dual-screen and foldable form factors are drag and drop, which will allow you get rich data coming from other apps that have implemented that functionality or to provide data to others.

Launching a new Activity to the adjacent screen is also a really powerful option for dual-screen devices. Your app will be able to launch new Activities to the adjacent screen when this is empty, so your users are not taken out of the flow (e.g. reading an article and taping on a link it would be launched to the adjacent screen while your users still have the focus on the article they were reading.

Having said that, if you want to take advantage of having your app spanned across displays you can show an adapted UI for that mode. We provide a series of different components such as SurfaceDuoLayout, BottomNavigation, etc. that will help you to create nice dual screen experiences.

Google has also embraced large screen, foldable, and dual-screen devices and created a bunch of new components such as SlidingPaneLayout and updates in ConstraintLayout that will also help you support foldable and dual-screen devices.

Can I use Kotlin Multiplatform Mobile (KMM) to build dual-screen apps?

Yes, you totally can use it. Surface Duo runs Android and you can use any programming language or framework used to create Android apps.

We would like to highlight that Surface Duo supports Jetpack Window Manager in order to work with the specific capabilities of the device, such as the physical hinge or the different postures. Since Jetpack Window Manager is used as well on other foldable devices, you can create your new experiences that work well across these new form factor devices so you can take even more advantage of your single Kotlin Multiplatform codebase.

Will .NET Multi-platform App UI (.NET MAUI) support dual-screen devices?

When the .NET Multi-platform App UI (.NET MAUI) ships later this year, it will have the same dual-screen support currently available in Xamarin.Forms. The goal, as with the entire .NET MAUI platform, is to make updating from Xamarin.Forms as seamless as possible, so it should just be a matter of changing namespaces.

The Xamarin team announced Preview 4 at Build (which you can download today). TwoPaneView is not currently in available the preview but keep an eye on this blog for future updates.

How difficult is it to take an existing Xamarin.Forms app and add dual-screen support?

At a high level, all you need to do is add the dual-screen support NuGet and adapt your layouts using the DualScreenInfo helper class, or use the TwoPaneView layout control in your content pages. Craig’s session Developing dual-screen apps with Xamarin and Xamarin.Forms walks through the processing of updating an existing Xamarin.Forms app for Surface Duo. There is also a free Microsoft Learn module Build dual-screen Xamarin.Forms apps by using TwoPaneView which walks through the process using one of our sample apps.

You can also check out the Surface Duo documentation for Xamarin for tips and links to samples.

Are the web APIs stable yet? I want to enhance my web app to support dual screen.

Unfortunately the dual-screen web APIs are not yet stable, and must be enabled via edge://flags in Microsoft Edge on the Surface Duo. You can also test dual-screen web features in desktop Edge or Chrome.

The good news is that you can still release a dual-screen web app using an Origin Trial token. Signing up for a token and placing it in your HTML or response headers will “switch on” the dual-screen web APIs for your site.

Just remember the APIs are still considered under development, so if any tweaks are made to the standards, watch the Edge developer blog (and the Surface Duo developer blog) for information and keep your code updated!

Are there SDKs for the web or is it a vanilla JavaScript API? Most importantly, does it support Progressive Web Apps?

There are two parts to the dual-screen web API: CSS and JavaScript. The CSS support is in the form of media queries for when the browser is spanned across the entire screen of a dual-screen device. There are also environment variables you can use in your styles to arrange elements around the hinge.

The JavaScript support is via a method getWindowSegments which returns an array of rectangle coordinates for each screen that the page is rendering on. You can check this method on events like resize and use the screen dimensions to adjust your layout for dual-screen devices.

Progressive Web Apps (PWAs) are also supported – there’s a blog post Build and deploy dual-screen progressive web apps that walks you through the details, including some sample dual-screen PWAs.

For new Surface Duo apps, would you recommend going straight to Compose or use the “traditional” way?

It depends on where your experience lies. If you are coming from React, Flutter or iOS SwiftUI, Compose will be a very good option for you due to the nature of the declarative UI and similar syntax. But if the timeline is tight, it will be more pragmatic to stick with the “tranditional” way if you’ve been doing it for a while.

Many developers enjoy its conciseness and flexibility for dual-screen development. Compose is in beta now and will become stable this July. It is a great time to have a try it out, even not using it for production apps (yet!).

How are the dual-screen PRs for the Flutter framework going?

We are really happy with the positive feedback we’ve received on the foldable support that’s been proposed for Flutter. Since Flutter is open-source, you can view our pull-requests directly (see the Flutter support for foldable devices announcement for details). The new APIs are based on Jetpack Window Manager which is currently at version alpha06. As it moves to beta and stable, the Flutter team will be in a position to move the foldable support forward into the core.

If you’re a Flutter developer that’s interested in building apps for foldable devices, we’d love to hear from you (via feedback forum or on Twitter) about your requirements.

Any design tips for creating beautiful Surface Duo dual-screen apps?

We have lots of resources for UX designers working on dual-screen apps, including documentation that covers common app patterns and the Surface Duo Design Kit in Figma which covers the patterns but also includes device frames, controls guidance, and more. There are also dual-screen enhanced Microsoft Fluent UI Android controls that you can add to your app, and of course you can take full advantage of Material Design in your Android apps.

Resources and feedback

All the Surface Duo sessions at Microsoft Build 2021 were recorded and are available to view online:

If you have any questions, or would like to tell us about your apps, use the feedback forum or message us on Twitter @surfaceduodev.

Finally, please join us for our dual-screen developer livestream at 11am PST each Friday at twitch.tv/surfaceduodev and check out the archives on YouTube. This week we’ll review all the latest news from Build.