{"id":80,"date":"2020-02-06T22:56:26","date_gmt":"2020-02-07T06:56:26","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=80"},"modified":"2020-03-05T14:29:05","modified_gmt":"2020-03-05T22:29:05","slug":"bring-your-app-to-surface-duo","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/bring-your-app-to-surface-duo\/","title":{"rendered":"Bring your app to Surface Duo"},"content":{"rendered":"<p>Hello Surface Duo developers!<\/p>\n<p>This is our second post as part of a series focused on how to bring your app to Surface Duo using the Surface Duo Preview SDK for developers.<\/p>\n<p><img decoding=\"async\" width=\"1432\" height=\"805\" class=\"wp-image-81\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/microsoft-surface-duo.png\" alt=\"Microsoft Surface Duo \" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/microsoft-surface-duo.png 1432w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/microsoft-surface-duo-300x169.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/microsoft-surface-duo-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/microsoft-surface-duo-768x432.png 768w\" sizes=\"(max-width: 1432px) 100vw, 1432px\" \/><\/p>\n<p>Figure 1: Microsoft Surface Duo<\/p>\n<p><strong>Dual-screen preview SDKs <\/strong><\/p>\n<p>On January 22<sup>nd<\/sup> we <a href=\"https:\/\/blogs.windows.com\/windowsdeveloper\/2020\/01\/22\/announcing-dual-screen-preview-sdks-and-microsoft-365-developer-day\/\">announced<\/a> the availability of Surface Duo Preview SDK for developers. Our goal is to support your development efforts on any platform you choose\u2014Mac, Linux, or Windows, using your favorite IDE. We\u2019ve been using Android Studio, Visual Studio, and Visual Studio Code to develop apps.<\/p>\n<p>To get started, follow the instructions below on how to get the package; you can also review documentation, installation requirements, and download the SDK from <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/get-duo-sdk?tabs=java\">Microsoft docs<\/a>.<\/p>\n<p><strong>Steps to bring your app to Surface Duo<\/strong><\/p>\n<p>There are three main steps in order to bring your app to Surface Duo:<\/p>\n<p>Step 1: <strong>Test your app using Duo Emulator<\/strong> to ensure it works.<\/p>\n<p>Step 2: Make incremental changes using Android Native APIs and Libraries so your <strong>app works better on dual-screen devices<\/strong> even when running side-by-side in single-screen mode.<\/p>\n<p>Step 3: Use our Dual-Screen Preview SDK and <strong>embrace new features<\/strong> such as postures and app patterns.<\/p>\n<p><strong>Step 1: Test your app <\/strong><\/p>\n<p>Test your app using our Surface Duo image in an emulator. By default, it will run as a single-screen experience.<\/p>\n<p>Enable auto-rotate in Settings and continue testing your app by moving it from the left screen to the right screen while rotating the device in the emulator.<\/p>\n<p>If you experience any issues, make sure you follow the Android <a href=\"https:\/\/developer.android.com\/guide\/topics\/ui\/foldables\">guidance <\/a>on resizable screens and make sure you\u2019ve set android:resizeableActivity=\u201ctrue\u201d.<\/p>\n<p><img decoding=\"async\" width=\"777\" height=\"502\" class=\"wp-image-82\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/the-android-emulator-with-a-preview-surface-duo-im.png\" alt=\"The Android Emulator with a preview Surface Duo image \" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/the-android-emulator-with-a-preview-surface-duo-im.png 777w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/the-android-emulator-with-a-preview-surface-duo-im-300x194.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/the-android-emulator-with-a-preview-surface-duo-im-768x496.png 768w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/p>\n<p>Figure 2: The Android Emulator with a preview Surface Duo image<\/p>\n<p><img decoding=\"async\" width=\"1452\" height=\"334\" class=\"wp-image-83\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/span-your-app-to-both-screens.png\" alt=\"Span your app to both screens\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/span-your-app-to-both-screens.png 1452w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/span-your-app-to-both-screens-300x69.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/span-your-app-to-both-screens-1024x236.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/span-your-app-to-both-screens-768x177.png 768w\" sizes=\"(max-width: 1452px) 100vw, 1452px\" \/><\/p>\n<p>Figure 3: Span your app to both screens<\/p>\n<p><strong>Step 2: Make incremental changes<\/strong><\/p>\n<p>You can add value to your app when it\u2019s running on a dual-screen device using Android Native APIs and Libraries. Here are a few quick tips and changes that can benefit you on other device form factors.<\/p>\n<p>Consider these changes:<\/p>\n<ul>\n<li>Handling all orientations<\/li>\n<li>Removing a specific UX orientation \u201clock\u201d and support all device postures<\/li>\n<li>Adding <a href=\"https:\/\/developer.android.com\/guide\/topics\/ui\/drag-drop\">drag and drop<\/a> support<\/li>\n<li>Adding multi-instance support so a user can run your app with two instances, one on each side<\/li>\n<li>Adding <a href=\"https:\/\/developer.android.com\/guide\/topics\/ui\/picture-in-picture.html\">picture-in-picture<\/a> support<\/li>\n<li>Launching new activities in the other window (hint the system by using <a href=\"https:\/\/developer.android.com\/guide\/topics\/ui\/multi-window\">intent flag<\/a> FLAG_ACTIVITY_LAUNCH_ADJACENT)<\/li>\n<\/ul>\n<p><strong>Step 3: Embrace new features<\/strong><\/p>\n<p>This is where the magic happens; you now have more real estate to showcase your app. The dual-screen APIs are built into the Surface Duo image in the emulator so you can try them out with your own app or with one of our <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-samples\">samples<\/a>.<\/p>\n<p>Follow these quick steps to see it in action:<\/p>\n<ul>\n<li>Span your app to both screens to check the end-to-end user experience<\/li>\n<li>Is the seam covering critical app content?<\/li>\n<li>Do you have buttons in the middle?<\/li>\n<li>Do you need to reposition content in your layout?<\/li>\n<li>Think about which app pattern fits your app and users<\/li>\n<\/ul>\n<p><img decoding=\"async\" width=\"972\" height=\"168\" class=\"wp-image-84\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/figure-3-dual-screen-app-patterns-.png\" alt=\"Figure 3: Dual-screen app patterns.\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/figure-3-dual-screen-app-patterns-.png 972w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/figure-3-dual-screen-app-patterns--300x52.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/02\/figure-3-dual-screen-app-patterns--768x133.png 768w\" sizes=\"(max-width: 972px) 100vw, 972px\" \/><\/p>\n<p>Figure4: dual-screen app patterns<\/p>\n<ul>\n<li>Consider the \u201cHinge Angle\u201d. A few ideas we thought of are games or utility\/power apps<\/li>\n<li>Provide a First Run Experience in your app and discovery UX for dual-screen features<\/li>\n<li>Update your website or online store page to reflect the\u00a0dual-screen experience<\/li>\n<li>Consider connecting to Microsoft services such as <a href=\"https:\/\/developer.microsoft.com\/en-us\/graph\">Microsoft Graph<\/a> for user insights<\/li>\n<\/ul>\n<p>I\u2019d also like to highlight a few design considerations and tips for the app patterns we\u2019ve just discussed.<\/p>\n<p>Consider these:<\/p>\n<ul>\n<li>In <strong>Extended Canvas<\/strong> \u2013 be sure the app toolbar is mask aware.<\/li>\n<li>In <strong>Master-Detail<\/strong> \u2013 Provide a default selected item, otherwise the right screen will appear empty. Also consider what happens when you rotate the device to double landscape. Does it keep the master-details flow in the top-bottom screen? We suggest both screens are used for the details view due to more real-estate to read content.<\/li>\n<li>For <strong>Two page <\/strong>\u2013 Consider how the pagination swipes are configured to either move from page 1-to-2 and page 2-to-3 like slide cards or from page 1-to-2 to 3-to-4 like reading a book.<\/li>\n<li><strong>Dual View<\/strong> shows the same data with two different views, so make sure that when you change items on one screen, the other screen reflects that change and keeps the content in sync.<\/li>\n<li><strong>In Companion Pane <\/strong>\u2013 You can change the controls layout depending on the device orientation and have a different view when the controls are on the right screen in dual portrait posture vs on the bottom screen in dual landscape mode.<\/li>\n<\/ul>\n<p>For additional details on how to test your app, read our full <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/android\/use-emulator?tabs=windows\">documentation<\/a> and be sure to check out <a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-samples\">our samples<\/a> for dual-screen patterns that can be added to your app.<\/p>\n<p><strong>We\u2019d love your feedback<\/strong><\/p>\n<p>We would love to hear from you about your experiences using the SDK and emulator. Please reach out using our <a href=\"https:\/\/aka.ms\/SurfaceDuoDevelopers\">feedback form<\/a>. Let us know how we can help you be more productive, ask questions, make suggestions, or upvote other suggestions.<\/p>\n<p>Don\u2019t forget to check us out Tuesday, February 11th at 8:30 AM PDT at the <a href=\"https:\/\/aka.ms\/m365devday\">Microsoft 365 Developer Day for Dual-Screen Experiences<\/a>.<\/p>\n<p>And as always, you can message me on <a href=\"https:\/\/twitter.com\/gmerin\">Twitter<\/a> or <a href=\"https:\/\/github.com\/guymerin\">GitHub<\/a>.<\/p>\n<p>Thank you,<\/p>\n<p>Guy Merin, Development Manager, Surface Duo Developer Experience Team<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Surface Duo developers! This is our second post as part of a series focused on how to bring your app to Surface Duo using the Surface Duo Preview SDK for developers. Figure 1: Microsoft Surface Duo Dual-screen preview SDKs On January 22nd we announced the availability of Surface Duo Preview SDK for developers. Our [&hellip;]<\/p>\n","protected":false},"author":17398,"featured_media":129,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,46,45],"class_list":["post-80","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-surface-duo","tag-surface-duo-sdk"],"acf":[],"blog_post_summary":"<p>Hello Surface Duo developers! This is our second post as part of a series focused on how to bring your app to Surface Duo using the Surface Duo Preview SDK for developers. Figure 1: Microsoft Surface Duo Dual-screen preview SDKs On January 22nd we announced the availability of Surface Duo Preview SDK for developers. Our [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/80","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\/17398"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/129"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}