{"id":601,"date":"2020-08-12T06:24:47","date_gmt":"2020-08-12T13:24:47","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=601"},"modified":"2020-09-24T10:47:05","modified_gmt":"2020-09-24T17:47:05","slug":"microsoft-surface-duo-is-here","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/microsoft-surface-duo-is-here\/","title":{"rendered":"Microsoft Surface Duo is here"},"content":{"rendered":"<pre class=\"prettyprint\"><\/pre>\n<p>Hello Android developers,<\/p>\n<p>It\u2019s here \u2013 the <a href=\"https:\/\/blogs.windows.com\/devices\/2020\/08\/12\/available-for-preorder-today-surface-duo-is-purpose-built-for-mobile-productivity\/\">official product launch announcement<\/a><\/p>\n<p>If you\u2019ve been waiting to get started with dual-screen app development, now is the time! <a href=\"https:\/\/www.microsoft.com\/en-us\/surface\/devices\/surface-duo\">Pre-order your Surface Duo today,<\/a> <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/get-duo-sdk?WT.mc_id=docs-surfaceduoblog-gmerin\">download the emulator<\/a>, and start developing with your favorite Android developer tools.<\/p>\n<p><figure id=\"attachment_623\" aria-labelledby=\"figcaption_attachment_623\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-623\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/08\/Attract_Hero_01-2.jpg\" alt=\"The Surface Duo\" width=\"2048\" height=\"1536\" \/><figcaption id=\"figcaption_attachment_623\" class=\"wp-caption-text\">The Surface Duo<\/figcaption><\/figure><\/p>\n<h2>All developers welcome!<\/h2>\n<p>Your existing Android apps will work just as expected and out of the box, however, you can now utilize this new form factor to enhance your app.<\/p>\n<p>Surface Duo-enhanced apps can be built with any tools that target Android development. If you\u2019re familiar with any of the following languages and IDEs, you can update your existing apps or build new dual-screen experiences:<\/p>\n<ul>\n<li>Kotlin &amp; Java using Android Studio on Windows, macOS, or Linux<\/li>\n<li>Xamarin using C# with Visual Studio on Windows or macOS<\/li>\n<li>React Native using JavaScript or TypeScript<\/li>\n<li>Unity for game development<\/li>\n<li>Flutter<\/li>\n<li>Web sites and PWAs<\/li>\n<\/ul>\n<p>If your favorite tool isn\u2019t listed here, but supports deployment to Android and allows for native library interop, chances are you can still build experiences for Surface Duo. The helpers, controls, layouts, and samples we\u2019ve built for each platform are open source, and we welcome your feedback and contributions. Surface Duo supports the <a href=\"https:\/\/developer.android.com\/jetpack\/androidx\/releases\/window\">Jetpack Window Manager<\/a>\u2019s dual-screen functionality, so you can confidently build apps that will work across the Android device ecosystem.<\/p>\n<h2>Surface Duo SDK<\/h2>\n<p>To help developers build great dual-screen experiences, we\u2019ve provided an SDK consisting of helper functions and layout controls for multiple developer ecosystems, and includes documentation and training materials.<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/api-reference\/dualscreen-library\/?WT.mc_id=docs-surfaceduoblog-gmerin\">Dual-screen libraries<\/a> for Kotlin &amp; Java, including SurfaceDuoLayout<\/li>\n<li>Cross-platform <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/?WT.mc_id=docs-surfaceduoblog-gmerin\">TwoPaneView and DualScreenInfo for Xamarin.Forms<\/a><\/li>\n<li>Cross-platform <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/react-native\/?WT.mc_id=docs-surfaceduoblog-gmerin\">TwoPaneView and DualScreenInfo for React Native<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dual-screen\/unity\/?WT.mc_id=docs-surfaceduoblog-gmerin\">Helper functions<\/a> for Unity<\/li>\n<li><a href=\"https:\/\/github.com\/microsoft\/surface-duo-sdk-samples-flutter\">Flutter samples<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dual-screen\/web\/?WT.mc_id=docs-surfaceduoblog-gmerin\">Dual-screen CSS and JavaScript standards<\/a><\/li>\n<\/ul>\n<p>Get started with any of these at <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/?WT.mc_id=docs-surfaceduoblog-gmerin\">docs.microsoft.com\/dual-screen<\/a>. There\u2019s also a variety of samples available, starting with <a href=\"https:\/\/github.com\/microsoft\/surface-duo-app-samples\">our app samples repo<\/a>, which provides examples of the different UI patterns that are common for <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/introduction?WT.mc_id=docs-surfaceduoblog-gmerin#dual-screen-app-patterns\">dual-screen interactions<\/a>:<\/p>\n<ul>\n<li>Extended canvas<\/li>\n<li>List-detail<\/li>\n<li>Two page view<\/li>\n<li>Dual view<\/li>\n<li>Companion pane<\/li>\n<\/ul>\n<p>The <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/bring-your-app-to-surface-duo\/?WT.mc_id=blog-surfaceduoblog-gmerin\">developer blog<\/a> also covers the three steps we recommend to bring your apps to the Surface Duo:<\/p>\n<ol>\n<li>Test your existing app on the emulator or Surface Duo.<\/li>\n<li>Make incremental changes, like handling all orientations, multi-window support, drag and drop, and other Android functionality.<\/li>\n<li>Embrace new dual-screen features by creating layouts for when the app spans both screens.<\/li>\n<\/ol>\n<h2>App inspiration<\/h2>\n<p>If you\u2019re new to dual-screen development, start with our <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/introduction\/?WT.mc_id=docs-surfaceduoblog-gmerin\">introduction to dual-screen devices<\/a>, which outlines new user interface patterns and experience considerations. Then visit the <a href=\"https:\/\/www.microsoft.com\/en-us\/surface\/devices\/surface-duo\/\">enhanced app showcase<\/a> to see some of the amazing applications that will be available for the Surface Duo at launch.<\/p>\n<p>One enhanced app I\u2019m really excited by is Atlassian Jira \u2013 an app built by passionate developers <em>for<\/em> developers. Here\u2019s what they had to say about adapting their app for Surface Duo:<\/p>\n<p>&nbsp;<\/p>\n<h2>Developing Jira for Surface Duo<\/h2>\n<p><figure id=\"attachment_613\" aria-labelledby=\"figcaption_attachment_613\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-613\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/08\/JIRA-dual-screen-UX-corrected-for-release.gif\" alt=\"Animated GIF of the Jira Dual-Screen experiences\" width=\"800\" height=\"522\" \/><figcaption id=\"figcaption_attachment_613\" class=\"wp-caption-text\">Animated GIF of the Jira Dual-Screen experiences<\/figcaption><\/figure><\/p>\n<p>Four years ago, we set out to build <a href=\"https:\/\/www.atlassian.com\/software\/jira\/mobile-app\">the best Jira experience on the go with our mobile app<\/a>. It\u2019s been a huge success, with many customers sharing how much they like its speed and ease of use. When Microsoft announced Surface Duo, we saw the opportunity to give customers more power and productivity options with better modularity and multitasking capabilities.<\/p>\n<p>Our designers and engineers started looking at the wealth of information Microsoft had released around best practice for dual-screen devices as a foundation. With that, we worked out how the user experience and interactions work in different devices and postures \u2013 including Surface Duo. We wanted a coherent UI that felt similar, even if the user used Jira across multiple native platforms. We then classified and defined how navigation, generic screen types, and the elements inside the generic screen types should act.<\/p>\n<p>Luckily, Surface Duo is like any other Android device, so we can use the same tools, libraries, programming language and paradigms, so adapting our app looked quite simple. We\u2019ve taken our existing architecture and all we did was break apart each part of the app into generic Fragments, made sure every part can \u201ctalk to each other\u201d and finally, composed those parts in various layouts depending on the device characteristics or device disruptions.<\/p>\n<p>We\u2026<\/p>\n<ul>\n<li>Used the Surface Duo SDK DisplayMask API for hinge detection. Within certain screens, we needed to modify the UI to account for the hinge on Surface Duo, so we used this API to build a single container implementation to support all dual screen use cases. AndroidX WindowManager already provides a generic way to detect the hinge, and Microsoft has a similar layout in their Surface Duo SDKs, which we are planning to adopt once they graduate from alpha version<\/li>\n<li>Updated our bottom navigation view to be able to align it in a way that the hinge does not obstruct it. Microsoft has since covered this use cause in their Surface Duo SDK which we are planning to adopt it, once it graduates from alpha version.<\/li>\n<li>Moved from Activities to Fragments for our main screens and sub screens. We also used FragmentResultOwner and FragmentResultListener in Android Jetpack for delivery of results between Fragments. Again, this was so we can scale our layouts more robustly across a variety of \u201clarge screen\u201d devices including the Surface Duo.<\/li>\n<li>Built a custom screen composer combined with Window Insets that puts together the navigation, main screens, sub screens, hinge data and device disruptions. This allows us to have <em>slightly<\/em> different UI systems per form factor. For example \u2013 one-screen navigation for dual screens and full-screen navigation for single screen tablets.<\/li>\n<\/ul>\n<p><figure id=\"attachment_612\" aria-labelledby=\"figcaption_attachment_612\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"size-full wp-image-612\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/08\/JIRA-dual-screen-roadmap-timeline-view-corrected-for-release.gif\" alt=\"Animated GIF of the Jira Dual-Screen experiences\" width=\"800\" height=\"523\" \/><figcaption id=\"figcaption_attachment_612\" class=\"wp-caption-text\">Animated GIF of the Jira Dual-Screen experiences<\/figcaption><\/figure><\/p>\n<p><span style=\"font-size: 10.5pt; font-family: 'Segoe UI',sans-serif; color: #172b4d; letter-spacing: -.05pt;\">Thanks to AndroidX and Surface Duo SDKs, we didn\u2019t have to focus on the low-level detection of device data and manually control the presentation logic. We can use our existing app and just implement custom code that handles rendering and composing various UI elements into pre-set layouts based on device and posture combinations. You can try out Dual Screen enhanced Jira here: <\/span><a href=\"https:\/\/www.atlassian.com\/software\/jira\/mobile-app\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-size: 10.5pt; font-family: 'Segoe UI',sans-serif; letter-spacing: -.05pt;\">https:\/\/atlassian.app.link\/getjiramobile<\/span><\/a><span style=\"font-size: 10.5pt; font-family: 'Segoe UI',sans-serif; color: #172b4d; letter-spacing: -.05pt;\">.<\/span><\/p>\n<p><span style=\"font-size: 10.5pt; font-family: 'Segoe UI',sans-serif; color: #172b4d; letter-spacing: -.05pt;\">Note: As of build, some APIs were in alpha and so implementation may change later as they progress into their release candidates \u2013 consider that when starting development on dual screens.<\/span><\/p>\n<h2>Feedback<\/h2>\n<p>We can\u2019t wait for the Surface Duo to reach you, and to see the new and unique apps that you create.<\/p>\n<p>The Surface Duo Developer Experience Team would also love to hear your thoughts on the SDK, which tools are your favorite, and what helpers or controls you\u2019d like us to work on next. Please reach out using our <a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\">feedback forum<\/a>\u00a0or message me\u00a0on\u00a0<a href=\"https:\/\/twitter.com\/gmerin\">Twitter\u00a0<\/a>or\u00a0<a href=\"https:\/\/github.com\/guymerin\">GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Android developers, It\u2019s here \u2013 the official product launch announcement If you\u2019ve been waiting to get started with dual-screen app development, now is the time! Pre-order your Surface Duo today, download the emulator, and start developing with your favorite Android developer tools. All developers welcome! Your existing Android apps will work just as expected [&hellip;]<\/p>\n","protected":false},"author":17398,"featured_media":610,"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-601","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 Android developers, It\u2019s here \u2013 the official product launch announcement If you\u2019ve been waiting to get started with dual-screen app development, now is the time! Pre-order your Surface Duo today, download the emulator, and start developing with your favorite Android developer tools. All developers welcome! Your existing Android apps will work just as expected [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/601","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=601"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/610"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}