{"id":380,"date":"2020-05-20T11:20:57","date_gmt":"2020-05-20T18:20:57","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=380"},"modified":"2020-05-20T11:20:57","modified_gmt":"2020-05-20T18:20:57","slug":"surface-duo-at-microsoft-build","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/surface-duo-at-microsoft-build\/","title":{"rendered":"Surface Duo at Microsoft Build"},"content":{"rendered":"<p>Hello Microsoft Surface Duo developers!<\/p>\n<p>Today at Microsoft Build we shared a session covering how to take advantage of the dual screen device, Surface Duo using Xamarin and C#. You can watch the recording below:<\/p>\n<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/dgGfxRtWrig\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\nVideo: Microsoft Build 2020 on YouTube<\/p>\n<p>Existing Android&trade; apps run without modification on the Surface Duo, but there are additional capabilities that developers can choose to leverage in their apps.  In this session I discuss how to enhance an existing app to take advantage of the Surface Duo\u2019s unique features. Topics include:<\/p>\n<ul>\n<li>Learning about the Surface Duo \u2013 Microsoft\u2019s first Android device.<\/li>\n<li>UX design patterns for dual-screen interactions.<\/li>\n<li>Enhancing an existing Android app for Surface Duo.<\/li>\n<\/ul>\n<p>The code examples in the session were using C# and Xamarin, but the process can be applied equally well to any Android or cross-platform development tool.<\/p>\n<h2>Use your favorite tools to develop for Surface Duo<\/h2>\n<p>Because there are so many different programming options, any developer can build dual-screen apps. We have blogs, documentation, and samples for all these platforms and languages:<\/p>\n<ul>\n<li>Kotlin and Java<\/li>\n<li>Unity for games<\/li>\n<li>React Native, using TypeScript or JavaScript<\/li>\n<li>Flutter<\/li>\n<li>Web developers<\/li>\n<li>Xamarin.Forms or Xamarin.Android using C#<\/li>\n<\/ul>\n<p>You can <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/get-duo-sdk\">download the Surface Duo emulator preview<\/a> and get started today.<\/p>\n<h2>Dual-screen design patterns<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-patterns-800.png\" alt=\"Dual-screen user-experience patterns\" width=\"800\" height=\"180\" class=\"alignnone size-full wp-image-383\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-patterns-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-patterns-800-300x68.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-patterns-800-768x173.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 1: Dual-screen app patterns<\/p>\n<p>In the session I discussed these patterns:<\/p>\n<ul>\n<li>Extended canvas \u2013 app fills both screens.<\/li>\n<li>Master-detail \u2013 familiar UX consisting of a list or collection, with an individual item selected &#038; displayed.<\/li>\n<li>Two page \u2013 book-like navigation\/reading experience.<\/li>\n<li>Dual-view \u2013 show related information on each screen, and synchronize the views as the user interacts with them.<\/li>\n<li>Companion pane \u2013 place settings, palette, or controls on the second screen.<\/li>\n<\/ul>\n<p>The <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/introduction\">dual-screen documentation<\/a> covers the app patterns in in more detail, and we have <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-samples\">samples<\/a> for each.<\/p>\n<h2>Enhance your app<\/h2>\n<p>We\u2019ve <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/bring-your-app-to-surface-duo\/\">covered this in the blog before<\/a> \u2013 once you\u2019ve downloaded the emulator we recommend these steps to test and update your apps:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-steps-800.png\" alt=\"3 steps to enhance an app for dual-screen\" width=\"800\" height=\"355\" class=\"alignnone size-full wp-image-382\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-steps-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-steps-800-300x133.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-steps-800-768x341.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 2: steps to get your apps ready for dual-screen devices<\/p>\n<p>In the Build session I walked through converting a Xamarin.Forms app, which required some app architecture changes to split out full-screen views so they can be used on <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/twopaneview\">dual-screens<\/a>. Android developers using other tools might be able to follow similar advice, depending on their current app design. Android apps frequently consist of self-contained activities, and splitting the UI out into re-usable fragments makes it easier to present on two screens:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-activities-fragments-800.png\" alt=\"Migrating to dual-screen app architecture\" width=\"800\" height=\"330\" class=\"alignnone size-full wp-image-394\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-activities-fragments-800.png 800w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-activities-fragments-800-300x124.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/05\/build2020-activities-fragments-800-768x317.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Figure 3: preparing your Android app architecture for dual-screen<\/p>\n<p>We have a <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/api-reference\/dualscreen-layout\">SurfaceDuoLayout<\/a> control for Kotlin and Java projects, and the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/react-native\/twopaneview\">TwoPaneView<\/a> for React Native, to help lay out your views for two screens. An added benefit of refactoring views in this way is a path towards supporting tablets and other devices.<\/p>\n<h2>Session resources<\/h2>\n<p>The Xamarin sample code used in the session is <a href=\"https:\/\/github.com\/conceptdev\/xamarin-forms-samples\/tree\/master\/build-2020\">available on GitHub<\/a>, as are these samples that were mentioned: <a href=\"https:\/\/github.com\/Microsoft\/surface-duo-sdk-xamarin-samples\">Xamarin SDK samples<\/a>, <a href=\"https:\/\/github.com\/xamarin\/app-xamarintv\">XamarinTV<\/a>, and <a href=\"https:\/\/github.com\/jsuarezruiz\/FoodDeliveryAppDuo\">Food Delivery<\/a>.<\/p>\n<p>Developers using other tools can visit the docs for <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/\">Kotlin &#038; Java<\/a>, <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/unity\/\">Unity<\/a>, <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/react-native\/\">React Native<\/a>, and we also have get started instructions for <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/get-started-with-flutter-on-surface-duo\/\">Flutter on our blog<\/a>.<\/p>\n<p>There are also samples for <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/android\/\">Kotlin &#038; Java<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/surface-duo-sdk-unity-samples\">Unity<\/a>, <a href=\"https:\/\/github.com\/microsoft\/react-native-dualscreen\/\">React Native<\/a>, and <a href=\"https:\/\/github.com\/Microsoft\/surface-duo-sdk-samples-flutter\">Flutter<\/a> on GitHub.<\/p>\n<h2>Feedback<\/h2>\n<p>We hope you\u2019re enjoying Microsoft Build 2020. Review other <a href=\"https:\/\/mybuild.microsoft.com\/\">sessions online<\/a> and follow <a href=\"https:\/\/twitter.com\/msdev\">@msdev<\/a> and <a href=\"https:\/\/twitter.com\/microsoft365\">@Microsoft365<\/a> on Twitter.<\/p>\n<p>If you have any questions, ask using our <a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\">feedback forum<\/a>, or message me on <a href=\"https:\/\/twitter.com\/conceptdev\">Twitter<\/a> or <a href=\"https:\/\/github.com\/conceptdev\">GitHub<\/a>.<\/p>\n<p><i>Android is a trademark of Google LLC.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Microsoft Surface Duo developers! Today at Microsoft Build we shared a session covering how to take advantage of the dual screen device, Surface Duo using Xamarin and C#. You can watch the recording below: Video: Microsoft Build 2020 on YouTube Existing Android&trade; apps run without modification on the Surface Duo, but there are additional [&hellip;]<\/p>\n","protected":false},"author":570,"featured_media":387,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,46,181,182],"class_list":["post-380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-surface-duo","tag-xamarin","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Hello Microsoft Surface Duo developers! Today at Microsoft Build we shared a session covering how to take advantage of the dual screen device, Surface Duo using Xamarin and C#. You can watch the recording below: Video: Microsoft Build 2020 on YouTube Existing Android&trade; apps run without modification on the Surface Duo, but there are additional [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/570"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/387"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}