\n This post helps designers and developers looking to build for both foldable and large-screen devices to combine both sources of guidance to create adaptive user experiences. For developers working with cross-platform tools like Flutter, Xamarin, .NET MAUI, or React Native, implementation examples are available on the Surface Duo developer site<\/a>.\n<\/p>\n \n Presenting a list of items \u2013 and showing more details for a single, selected item \u2013 is extremely common across many types of application including social media, productivity, messaging, reading, media browsing, and more. Here are two different examples of how list-detail might be implemented on a foldable device:\n<\/p>\n \n \n This layout can adapt to smaller and larger screens in easily recognizable ways:\n<\/p>\n \n The Android list-detail canonical guidance<\/a> includes tips for building with different tools:\n<\/p>\n Best practices<\/a> for this pattern are included in the Surface Duo Design Kit<\/a>, and samples are available for Views and Compose<\/a> and other platforms<\/a>.\n<\/p>\n \n The Supporting panel<\/a> canonical layout maps to the dual-screen Companion pane<\/a> pattern \u2013 there is a primary view that has is the focus of the task, and a secondary view that contains a tool palette, secondary information, or some other UI elements that are dependent on the primary view.\n<\/p>\n \n \n To adapt to other screen sizes:\n<\/p>\n \n The dual-screen gaming controller is a \u2018special case\u2019 of the companion pane\/supporting panel \u2013 on smaller and larger screens the controls are typically overlaid<\/em> on the gaming portal rather than kept as a distinct view.\n<\/p>\n \n \n The Android supporting panel guidance<\/a> includes tips for building with view or Compose.\n<\/p>\n \n The Feed<\/a> canonical layout is well suited to tablets and desktop devices. Feed layouts consist of a grid of content items that can be laid out a variety of ways depending on content type and screen size, from a single column to a multi-column scrolling collection. \n<\/p>\n \n A feed could adapt to a foldable device in different ways:\n<\/p>\n \n Extended canvas, dual-view, and two page design patterns are featured in the Surface Duo Design Kit. \n<\/p>\n \n The extended canvas<\/a> design pattern works great for use cases like maps, spreadsheets, or drawing surfaces. The key adaptation is to ensure any focus elements on the canvas (like the \u2018current location\u2019 on a map), or any palette or interactive elements, are not hidden by the hinge.\n<\/p>\n \n \n Scaling extended canvas up and down (to phones or tablets and desktops) typically involves just adjusting the size of the viewport, and positioning any markers and palettes within the screen bounds.\n<\/p>\n Dual view<\/a> is defined as \u201cshowing two views of the same data\u201d, and is commonly used in one of two ways:\n<\/p>\n \n \n On smaller screens this pattern is typically collapsed so that only one of the views is visible, and the other is toggled on or off with a button or tabbed view.\n<\/p>\n \n On larger screens, both views are typically shown although the split may be adjustable and not fixed at half the screen.\n<\/p>\n \n Long-form reading is a great application for dual-screen devices, so it makes sense to consider the unique requirements of a two page<\/a> design pattern.\n<\/p>\n \n \n This pattern is also easy to adapt for other screen sizes \u2013 on smaller devices just show one page, and on larger devices allow the content to reflow to fill the screen. Some content might make sense to flow even to landscape tablet size, or alternatively the screen could be split to present the same two page layout that is presented on foldables.\n<\/p>\n \n The Android GitHub org has a collection of samples for their canonical layouts<\/a>. The Surface Duo team has documentation and samples for all these user experiences<\/a>, written with View and Jetpack Compose, and also with a variety of cross-platform tools including Flutter, React Native, Xamarin and .NET MAUI.\n<\/p>\n Finally, please join us for our dual screen developer livestream<\/a> at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the archives on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello app designers, At the first Android Dev Summit of 2022 Google announced updated large screen design guidance, gallery, and tips for foldables. These updates included a list of canonical layouts which are complementary to the dual-screen design patterns featured in the Surface Duo developer documentation. Material Design has also been updated, so there is […]<\/p>\n","protected":false},"author":570,"featured_media":2915,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[710],"tags":[709,717,46],"class_list":["post-2902","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-design","tag-design","tag-foldable","tag-surface-duo"],"acf":[],"blog_post_summary":" Hello app designers, At the first Android Dev Summit of 2022 Google announced updated large screen design guidance, gallery, and tips for foldables. These updates included a list of canonical layouts which are complementary to the dual-screen design patterns featured in the Surface Duo developer documentation. Material Design has also been updated, so there is […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2902","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=2902"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2902\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2915"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Phone,](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/all-framed.png\")
<\/a><\/p>\nList-detail<\/h2>\n
![\"Two](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/graphical-user-interface-description-automaticall.png\")
\n<\/p>\n\n
\n
Supporting panel<\/h2>\n
![\"Stylized](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/graphical-user-interface-description-automaticall-1.png\")
\n<\/p>\n\n
![\"Stylized](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/graphical-user-interface-application-description-1.png\")
\n<\/p>\nFeed<\/h2>\n
\n
Other dual-screen patterns<\/h2>\n
Extended canvas<\/h3>\n
![\"Stylized](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/a-picture-containing-text-window-display-descri.png\")
\n<\/p>\nDual view<\/h3>\n
\n
![\"Stylized](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/graphical-user-interface-application-website-de.png\")
\n<\/p>\nTwo page<\/h3>\n
![\"Stylized](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/11\/graphical-user-interface-application-description-2.png\")
\n<\/p>\nFeedback and resources<\/h2>\n