![\"Wide](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/emulator-2x2-800.png\")
<\/p>\n
Figure 1: Single-screen and dual-screen layouts using SurfaceDuoLayout<\/p>\n
When using the SurfaceDuoLayout, you can implement dual-screen behavior by either using layouts or by listening for screen change events and manipulating fragments, or with a combination of the two approaches.<\/p>\n
Our CompanionPaneLevel2 sample helps create a sophisticated, responsive UI declaratively. You can view this behavior in these samples (Java<\/a>,\u00a0Kotlin<\/a>).<\/p>\n Today we are releasing an update to this layout control and adding Designer Layout Preview support for developers using Android Studio.<\/strong><\/span><\/p>\n As part of the Android Studio Design editor, you can now preview your layout in different modes and postures. For DuoKLayout, it enables both a single screen layout preview and a dual screen layout preview.<\/p>\n You can also modify the layout and add buttons or other common controls.<\/p>\n To start utilizing the Designer Preview, you will need to add these two new attributes to the layout XML:<\/p>\n These attributes are in addition to existing ones below which define the single and dual-screen behaviors:<\/p>\n By default, the designer layout preview will show the single-screen mode as a preview, but you can change the designer preview mode to support a dual-screen designer preview.<\/p>\n To enable the designer preview mode for a specific screen mode, you will need to set the attribute \u201capp:tools_screen_mode\u201d to either \u201cdual_screen\u201d or \u201csingle_screen\u201d.<\/p>\n Both options are shown below:<\/p>\n Figure 2: Designer Preview for a single-screen<\/strong> layout using SurfaceDuoLayout<\/p>\n Figure 3: Designer Preview for a dual-screen<\/strong> layout using SurfaceDuoLayout<\/p>\n Notice that when dual-screen is selected, we reduce the gap between the two screens to simulate how this will look on the real devices, or on the emulator. The size of the gap emulates the real ratio of 84 pixels that would be seen on a real device.<\/p>\n Another design element we thought through was the Dark Theme mode for the layout. We decided to add an option to change the color of the hinge from black to white so it would be in contrast to the left and right screen themes.<\/p>\n To make this design change, use the attribute \u201ctools_hinge_color\u201d and set it to \u201cwhite\u201d or \u201cblack\u201d.<\/p>\n Figure 4: Changing the hinge color to white to support a Dark Theme<\/p>\n Figure 5: Dual-screen Designer Preview in double landscape mode<\/p>\n Stitching it all together, your layout XML should look similar to this:<\/p>\n Our samples have been updated, and can be viewed in GitHub for Java<\/a> and \u00a0Kotlin<\/a><\/p>\n Next, we will talk about how to preview the SurfaceDuoLayout when we add fragments that are declared in layout files.<\/p>\n To add fragments to the layout file, you can use these attributes:<\/p>\n These attributes work as tools:layout attribute<\/a>s for fragments.<\/p>\n These attributes will help you transition from this preview:<\/p>\n To this preview:<\/p>\n To get this feature update, follow our public Maven repo steps below and update the dualscreen-layout lib to version 0.9.2.<\/p>\n Follow these steps in your Android Studio project:<\/p>\n I updated the library, but I get this error in layout preview<\/strong>:<\/p>\n Solution: <\/strong>Try to clean and rebuild your project.<\/p>\n I made some layout modification, but they don\u2019t show up in the layout preview<\/strong>.<\/p>\n Solution:<\/strong> Rebuild your project so that the layout preview is aware of your modifications.<\/p>\n Refer to the SurfaceDuoLayout documentation<\/a> for more detailed explanations of the alternative approaches for using the SurfaceDuoLayout control.<\/p>\n We are building our roadmap for additional controls and would love to get your feedback on what else we can provide as well as hear about your experiences using the SDK, the Emulator, or any other thoughts you may have.<\/p>\n Please reach out using our feedback forum<\/a> or message me on Twitter<\/a> or GitHub<\/a>.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Hello Android dual-screen developers! In the March 26th blog post, we introduced the Dual Screen Layout. Figure 1: Single-screen and dual-screen layouts using SurfaceDuoLayout When using the SurfaceDuoLayout, you can implement dual-screen behavior by either using layouts or by listening for screen change events and manipulating fragments, or with a combination of the two approaches. […]<\/p>\n","protected":false},"author":17398,"featured_media":245,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,46,45,29,30],"class_list":["post-241","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","tag-surfaceduo","tag-surfaceduo-sdk"],"acf":[],"blog_post_summary":" Hello Android dual-screen developers! In the March 26th blog post, we introduced the Dual Screen Layout. Figure 1: Single-screen and dual-screen layouts using SurfaceDuoLayout When using the SurfaceDuoLayout, you can implement dual-screen behavior by either using layouts or by listening for screen change events and manipulating fragments, or with a combination of the two approaches. […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/241","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=241"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/241\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Designer Preview<\/h2>\n
\n
\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-1.png\")
<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-2.png\")
<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-3.png\")
<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-4.png\")
<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-5.png\")
<\/p>\nUsing Fragments<\/h2>\n
\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-6.png\")
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-7.png\")
<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-8.png\")
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-9.png\")
<\/h2>\n<\/h2>\n
How to get this update<\/h2>\n
\n
maven {\r\n\u00a0\u00a0\u00a0\u00a0url 'https:\/\/pkgs.dev.azure.com\/MicrosoftDeviceSDK\/DuoSDK-Public\/_packaging\/Duo-SDK-Feed\/maven\/v1'\r\n}<\/code><\/pre>\n\n
implementation 'com.microsoft.device:dualscreen-layout:0.9.2'<\/code><\/p>\n\n
implementation \"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version\"<\/code><\/p>\nFAQ:<\/h2>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/word-image-10.png\")
<\/p>\nResources and feedback<\/h2>\n