{"id":2465,"date":"2022-05-13T09:59:48","date_gmt":"2022-05-13T16:59:48","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2465"},"modified":"2022-05-13T09:59:48","modified_gmt":"2022-05-13T16:59:48","slug":"google-io-2022-foldable-recap","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/google-io-2022-foldable-recap\/","title":{"rendered":"Google I\/O 2022 recap"},"content":{"rendered":"<p>\n  Hello Android developers,\n<\/p>\n<p>\n  Another <a href=\"https:\/\/io.google\/2022\/\">Google I\/O<\/a> has flown by, and we were excited to see sessions on foldable user experience design as well as developer-focused talks for updating existing apps to be more responsive and using Jetpack Compose. Here are our favorite sessions and announcements from the past few days:\n<\/p>\n<h2>Flutter 3 announced<\/h2>\n<p>\n  Flutter 3 was released during Google I\/O 2022, and the final piece of foldable support is now added to the framework: dialogs that can avoid the hinge or fold. Flutter now has extensive foldable support, and the <a href=\"https:\/\/pub.dev\/packages\/dual_screen\">TwoPane widget from pub.dev<\/a> provides a layout option that adapts to dual-screen devices and provides a responsive proportional layout on large and small screens.\n<\/p>\n<p>\n  Read more about the release (including the foldable capabilities) on the <a href=\"https:\/\/medium.com\/flutter\/whats-new-in-flutter-3-8c74a5bc32d0\">Flutter blog<\/a>, and also check out this session:\n<\/p>\n<p>\n<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/w_ezWG1yKQQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/p>\n<p>\n  The <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/foldable-flutter-update\/\">Surface Duo blog<\/a> recently covered Flutter\u2019s foldable capabilities, and there\u2019s more content and samples yet to come!\n<\/p>\n<h2>Designing apps for large screens and foldables<\/h2>\n<p>\n  This talk focused on the design aspects of <a href=\"https:\/\/io.google\/2022\/program\/222bf914-24e3-4478-be37-9d8162d6460e\/\">building foldable and large screen apps<\/a>, including how to create layouts that dynamically adapt to various screen sizes.\n<\/p>\n<p>\n  <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/pvdqeIM6mh0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/p>\n<p>\n  The design principles in this talk are also embodied by the five user experience patterns in the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/design\/kit\">Surface Duo Design Kit<\/a>: expand canvas, dual view, two page, list-detail, and companion pane.  \n<\/p>\n<h2>Update your app for the larger screen<\/h2>\n<p>\n  This session discussed how to <a href=\"https:\/\/io.google\/2022\/program\/eb6e6fb3-b24d-4baf-a1d9-f176198fc595\/\">enhance existing apps for large screens<\/a>, using the same principles that can take an app from single screen to dual-screen functionality.\n<\/p>\n<p>\n  <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/1ZOQ_-XPSv8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/p>\n<p>\n  To help developers update their apps the Surface Duo team also has a <a href=\"https:\/\/docs.microsoft.com\/en-us\/dual-screen\/android\/api-reference\/dualscreen-library\/\">library of dual-screen controls<\/a> that can take the work out of manually coding responsive controls and layouts \u2013 read about the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/snackbar-dual-screen\/\">Snackbar<\/a>, <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/foldable-navigation-component-update\/\">Navigation Component<\/a>, and more.\n<\/p>\n<p>\n  You can also incorporate Jetpack Window Manager directly into your layouts \u2013 we recommend using the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/isseparating-foldable-jetpack-window-manager\/\">isSeparating<\/a> API to create hinge-aware layouts that work across all types of foldable devices.\n<\/p>\n<h2>Implementing Android apps for all screen sizes <\/h2>\n<p><a href=\"https:\/\/io.google\/2022\/program\/1351e983-465f-4b32-99e0-de0647240352\/\">This talk<\/a> covers foldables, Jetpack Compose, and the new WindowSize classes library.\n<\/p>\n<p>\n  <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/MPwf5DklKp0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/p>\n<p>\n  To explore Jetpack Compose for foldable devices you can also review the Surface Duo team\u2019s take on <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-windowstate-preview\/\">WindowState<\/a>, <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/foldable-ui-test-kit\/\">UITest<\/a>, <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-navigation-rail\/\">NavigationRail<\/a>, and <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-twopanelayout-preview\/\">TwoPaneLayout<\/a>. There\u2019s more information in our <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/jetpack\/compose\/\">dual-screen Jetpack Compose documentation<\/a>.\n<\/p>\n<h2>Resources and feedback<\/h2>\n<p>\n  There were many more great sessions at Google I\/O 2022 which you can watch online at <a href=\"https:\/\/io.google.com\">https:\/\/io.google.com<\/a>. \n<\/p>\n<p>\n  If you have any questions about foldable app design and development, or would like to tell us about your apps, use the <a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\">feedback forum<\/a> or message us on <a href=\"https:\/\/twitter.com\/surfaceduodev\">Twitter @surfaceduodev<\/a>.\n<\/p>\n<p>\n  Finally, please join us for our <a href=\"https:\/\/www.twitch.tv\/surfaceduodev\">dual-screen developer livestream<\/a> at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the <a href=\"https:\/\/www.youtube.com\/channel\/UClGu9QLtPNz8OdddBfhZXPA\">archives on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Android developers, Another Google I\/O has flown by, and we were excited to see sessions on foldable user experience design as well as developer-focused talks for updating existing apps to be more responsive and using Jetpack Compose. Here are our favorite sessions and announcements from the past few days: Flutter 3 announced Flutter 3 [&hellip;]<\/p>\n","protected":false},"author":17398,"featured_media":2472,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,693,717,706,473],"class_list":["post-2465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-flutter","tag-foldable","tag-jetpack-window-manager","tag-kotlin"],"acf":[],"blog_post_summary":"<p>Hello Android developers, Another Google I\/O has flown by, and we were excited to see sessions on foldable user experience design as well as developer-focused talks for updating existing apps to be more responsive and using Jetpack Compose. Here are our favorite sessions and announcements from the past few days: Flutter 3 announced Flutter 3 [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2465","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=2465"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2465\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2472"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}