{"id":1557,"date":"2021-05-20T13:09:40","date_gmt":"2021-05-20T20:09:40","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1557"},"modified":"2021-05-20T13:09:40","modified_gmt":"2021-05-20T20:09:40","slug":"google-io-2021-foldables","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/google-io-2021-foldables\/","title":{"rendered":"Foldables at Google I\/O"},"content":{"rendered":"<p>\n  Hello Android developers!\n<\/p>\n<p>\n  You&#8217;ve probably seen some of the awesome announcements made this week at Google I\/O, a virtual event that brought the Google developer community together. This post covers some of our favorites, from sessions like <a href=\"https:\/\/www.youtube.com\/watch?v=Qkiz3QIPJzk\">What\u2019s new in foldables, tablets, and large screens<\/a>, and <a href=\"https:\/\/events.google.com\/io\/session\/b2f0dee6-b649-4e20-8ad6-69266e353f05?lng=en\">Prepare your app for large screens<\/a>. Enhancing apps for dual-screens and Microsoft Surface Duo falls naturally into a broader strategy to support larger screens, and we\u2019re excited to see foldable device enhancements going mainstream.\n<\/p>\n<h2>Window Manager <\/h2>\n<p>\n  Jetpack Window Manager is a common API for all foldables that provides easy access to information about the location and state of hinges or folds on a variety of devices, including Surface Duo.  \n<\/p>\n<p>\n  We have provided instructions to <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/platform\/jetpack-window-manager\/?WT.mc_id=docs-surfaceduoblog-CesarValiente\">get started<\/a> with Window Manager; you can also check out the <a href=\"https:\/\/developer.android.com\/reference\/androidx\/window\/package-summary\">Android Reference<\/a> for more details, <a href=\"http:\/\/goo.gle\/jetpack-window\">release information<\/a> for API version history, and Codelabs for a <a href=\"https:\/\/developer.android.com\/codelabs\/android-window-manager-dual-screen-foldables#0\">step-by-step walkthrough using Window Manager<\/a>.\n<\/p>\n<h2>Enhanced controls<\/h2>\n<p>\n  Google announced these widgets can now be fold-aware:\n<\/p>\n<ul>\n<li><a href=\"https:\/\/goo.gle\/two-pane\">SlidingPaneLayout<\/a> \u2013 covered in <a href=\"#post-1557-tk\">last week\u2019s blog<\/a>, the SlidingPaneLayout has been updated to adapt for fold state and dual-screen devices.\n  <\/li>\n<li>\n    <a href=\"https:\/\/material.io\/components\/navigation-rail\/android#using-navigation-rail\">NavigationRail<\/a> \u2013 a new widget similar to BottomNavigation for positioning on the side of the screen to work better on foldable and larger screens.\n  <\/li>\n<li><a href=\"http:\/\/goo.gle\/constraint-layout-foldable\">ConstraintLayout<\/a> \u2013 now includes the ability to use a fold by setting a ReactiveGuide to the fold position (in code) to build adaptive layouts for dual-screen devices.\n  <\/li>\n<\/ul>\n<p>\n  Microsoft also has a set of controls available that adapt to dual-screen and foldable devices, including layouts, a recyclerview helper, tabs, and navigation. Microsoft\u2019s controls are also based on Window Manager and can be used to enhance apps for other foldable devices beyond the Surface Duo. \n<\/p>\n<h2>Design responsively<\/h2>\n<p>\n  Google\u2019s UI guidance for large screens has been <a href=\"http:\/\/goo.gle\/android-large-screens\">updated to cover foldables<\/a>, as well as <a href=\"https:\/\/material.io\/blog\/material-design-for-large-screens\">Material Design<\/a>, and both can be read in conjunction with the <a href=\"https:\/\/aka.ms\/SurfaceDuoDesign\">Surface Duo Design Kit<\/a>. Following the design guidance and responsive grids from Google will work equally well for your dual-screen user experiences. \n<\/p>\n<p>\n  There\u2019s more information on the latest updates to <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/design-kit-docs\/?WT.mc_id=blog-surfaceduoblog-CesarValiente\">the Surface Duo design kit and docs coverage<\/a> on our blog.\n<\/p>\n<h2>Flutter <\/h2>\n<p>\n  Flutter 2.2 was announced with many new features and updates.\n<\/p>\n<p>\n  The Material Design team has also made the <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/NavigationRail-class.html\">NavigationRail widget<\/a> available for Flutter, which can be added to apps for Surface Duo.\n<\/p>\n<p>\n  The Surface Duo Developer Experience team continues to work on our <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/flutter\/?WT.mc_id=docs-surfaceduoblog-CesarValiente\">dual-screen Flutter<\/a> contributions, and welcomes your feedback.\n<\/p>\n<h2>Resources and feedback<\/h2>\n<p>\n  Join us at 11am PST tomorrow (Friday, May 21<sup>st<\/sup>) on <a href=\"https:\/\/www.twitch.tv\/surfaceduodev\">twitch.tv\/surfaceduodev<\/a> to discuss all these announcements from Google I\/O. You can also check out past streams on <a href=\"https:\/\/www.youtube.com\/channel\/UClGu9QLtPNz8OdddBfhZXPA\">YouTube<\/a>.\n<\/p>\n<p>\n  Visit the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/?WT.mc_id=docs-surfaceduoblog-CesarValiente\">Surface Duo developer documentation<\/a> and <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/?WT.mc_id=blog-surfaceduoblog-CesarValiente\">past blog posts<\/a> for other ideas on enhancing your apps for dual-screen devices.\n<\/p>\n<p>\n  If you have any questions, or would like to tell us about your apps, use the <a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\">feedback forum<\/a>, message us on Twitter <a href=\"https:\/\/twitter.com\/surfaceduodev\">@surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Android developers! You&#8217;ve probably seen some of the awesome announcements made this week at Google I\/O, a virtual event that brought the Google developer community together. This post covers some of our favorites, from sessions like What\u2019s new in foldables, tablets, and large screens, and Prepare your app for large screens. Enhancing apps for [&hellip;]<\/p>\n","protected":false},"author":30297,"featured_media":1558,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[365,31,473],"class_list":["post-1557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-android-developer","tag-dual-screen-development","tag-kotlin"],"acf":[],"blog_post_summary":"<p>Hello Android developers! You&#8217;ve probably seen some of the awesome announcements made this week at Google I\/O, a virtual event that brought the Google developer community together. This post covers some of our favorites, from sessions like What\u2019s new in foldables, tablets, and large screens, and Prepare your app for large screens. Enhancing apps for [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1557","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\/30297"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1557"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1557\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1558"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}