![\"Panel](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/05\/ask-the-experts-1200.png\")
<\/a><\/p>\n\n Until then, here\u2019s a summary of the top questions and answers from the session (which is also available to watch online<\/a>).\n<\/p>\n \n Early last year when we introduced the Surface Duo SDK, we released the DisplayMask package<\/a> which only works on Surface Duo. This library provided a stable platform upon which to build dual-screen applications for Surface Duo.\n<\/p>\n \n Around the same time, Google released the first alpha version of Jetpack Window Manager<\/a>, 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<\/a> so that developers can maximize the benefits of enhancing their apps once it\u2019s stable.\n<\/p>\n \n Surface Duo fully supports both APIs and we encourage adoption of Jetpack Window Manager once it’s stable.\n<\/p>\n \n 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.\n<\/p>\n \n 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.\n<\/p>\n \n 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<\/a>, BottomNavigation, etc. that will help you to create nice dual screen experiences.\n<\/p>\n \nGoogle has also embraced large screen, foldable, and dual-screen devices and created a bunch of new components such as SlidingPaneLayout<\/a> and updates in ConstraintLayout that will also help you support foldable and dual-screen devices.\n<\/p>\n \n Yes, you totally can use it. Surface Duo runs Android and you can use any programming language or framework used to create Android apps. \n<\/p>\n \n 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.\n<\/p>\n \n 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<\/a>. 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.\n<\/p>\n \n The Xamarin team announced Preview 4 at Build<\/a> (which you can download today). TwoPaneView is not currently in available the preview but keep an eye on this blog<\/a> for future updates.\n<\/p>\n \nAt a high level, all you need to do is add the dual-screen support NuGet and adapt your layouts using the DualScreenInfo<\/a> helper class, or use the TwoPaneView<\/a> layout control in your content pages. Craig\u2019s session Developing dual-screen apps with Xamarin and Xamarin.Forms<\/a> 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<\/a> which walks through the process using one of our sample apps.\n<\/p>\n \n You can also check out the Surface Duo documentation for Xamarin<\/a> for tips and links to samples.\n<\/p>\n \n Unfortunately the dual-screen web APIs<\/a> are not yet stable, and must be enabled via edge:\/\/flags<\/a> in Microsoft Edge on the Surface Duo. You can also test dual-screen web features in desktop Edge or Chrome.\n<\/p>\n \n The good news is that you can still release a dual-screen web app using an Origin Trial token<\/a>. Signing up for a token and placing it in your HTML or response headers will \u201cswitch on\u201d the dual-screen web APIs for your site. \n<\/p>\n \n Just remember the APIs are still considered under development, so if any tweaks are made to the standards, watch the Edge developer blog<\/a> (and the Surface Duo developer blog<\/a>) for information and keep your code updated!\n<\/p>\n \n There are two parts to the dual-screen web API: CSS and JavaScript. The CSS support<\/a> 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.\n<\/p>\n \n The JavaScript support<\/a> is via a method getWindowSegments<\/strong> 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.\n<\/p>\n \n Progressive Web Apps (PWAs) are also supported \u2013 there\u2019s a blog post Build and deploy dual-screen progressive web apps<\/a> that walks you through the details, including some sample dual-screen PWAs.\n<\/p>\n \n 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.\n<\/p>\n \n 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!).\n<\/p>\n \n We are really happy with the positive feedback we\u2019ve received on the foldable support that\u2019s been proposed for Flutter. Since Flutter is open-source, you can view our pull-requests directly (see the Flutter support for foldable devices<\/a> 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.\n<\/p>\n \n If you\u2019re a Flutter developer that\u2019s interested in building apps for foldable devices, we\u2019d love to hear from you (via feedback forum<\/a> or on Twitter<\/a>) about your requirements.\n<\/p>\n \n We have lots of resources for UX designers working on dual-screen apps, including documentation<\/a> that covers common app patterns and the Surface Duo Design Kit in Figma<\/a> which covers the patterns but also includes device frames, controls guidance, and more. There are also dual-screen enhanced Microsoft Fluent UI Android<\/a> controls that you can add to your app, and of course you can take full advantage of Material Design in your Android apps.\n<\/p>\n \n All the Surface Duo sessions at Microsoft Build 2021 were recorded and are available to view online:\n<\/p>\nAre the dual-screen APIs Surface Duo-specific or are becoming standardized across all foldables?<\/h2>\n
After adding multi-instance support, what would you recommend as the next easiest step to make existing apps better on the Surface Duo? <\/h2>\n
Can I use Kotlin Multiplatform Mobile (KMM) to build dual-screen apps?<\/h2>\n
Will .NET Multi-platform App UI (.NET MAUI) support dual-screen devices?<\/h2>\n
How difficult is it to take an existing Xamarin.Forms app and add dual-screen support?<\/h2>\n
Are the web APIs stable yet? I want to enhance my web app to support dual screen.<\/h2>\n
Are there SDKs for the web or is it a vanilla JavaScript API? Most importantly, does it support Progressive Web Apps?<\/h2>\n
For new Surface Duo apps, would you recommend going straight to Compose or use the \u201ctraditional\u201d way?<\/h2>\n
How are the dual-screen PRs for the Flutter framework going?<\/h2>\n
Any design tips for creating beautiful Surface Duo dual-screen apps?<\/h2>\n
Resources and feedback<\/h2>\n