![\"ZipperLayout](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/11\/blog-singles.png\")
<\/a>\n However, when the app is spanned, the elements of the layout are rendered on either side of the hinge without appearing underneath. The developer chooses which elements appear on the left and right screens:\n<\/p>\n
\n \n Here is an example of the layout XML (with some items removed for clarity) \u2013 notice the \n The custom control is implemented in the ZipperLayout.java<\/strong> file and extends the built-in \n To facilitate the custom child attribute \n Within the ZipperLayout class declaration, extend \n This custom attribute is used later when laying out the child controls.\n<\/p>\n \n Dual-screen awareness for this example is provided by the \n To use the window manager, it is instantiated in \n The window manager is then available during the layout process to determine if the app is spanned and the dimensions of the control to distribute the layout elements. Window manager is used in two important overrides: \n This will affect the width of the child controls when they are ready to be positioned on the screen.\n<\/p>\n \n When \n The loop keeps track of the height of each element as it stacks them down each screen until all the controls are positioned. In double-landscape mode, the hinge is ignored and the control behaves like a regular \n You can download the complete sample from GitHub<\/a>.\n<\/p>\n \n A new version of the Surface Duo emulator image was released last week. Follow the instructions to download and install the new version<\/a>, and check the release notes<\/a> for the version history.\n<\/p>\n \n The Surface Duo Developer Experience team was a presenter at droidcon EMEA and droidcon AMERICAS (see this recap<\/a>). We\u2019ll also be presenting at droidcon APAC 2020<\/a> on December 14th-15th, 2020. Register now and join us for 90+ tech talks, hackathons, roundtables, 1:1 meetings, and more.\n<\/p>\n \n \n I hope this has been a good introduction to building custom controls for dual-screen devices. There are many additional features that could be added to this control and the possibilities for other custom layouts is only limited by your imagination.\n<\/p>\n \n We would love to hear from you about your experiences using the controls in our dual-screen library, as well as any custom controls you build.\n<\/p>\n \n Please reach out using the\u00a0feedback forum<\/a>\u00a0or find me on\u00a0Twitter<\/a> or the team @surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello Android developers, The Microsoft Surface Duo SDK offers a variety of custom controls to help enhance your dual-screen apps, from layouts, tabs, and navigation controls for Kotlin and Java developers to the TwoPaneView for Xamarin, React Native, and Uno Platform developers. However, you might have an application-specific requirement that is not offered in our […]<\/p>\n","protected":false},"author":570,"featured_media":1095,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[706,473,46],"class_list":["post-1080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-jetpack-window-manager","tag-kotlin","tag-surface-duo"],"acf":[],"blog_post_summary":" Hello Android developers, The Microsoft Surface Duo SDK offers a variety of custom controls to help enhance your dual-screen apps, from layouts, tabs, and navigation controls for Kotlin and Java developers to the TwoPaneView for Xamarin, React Native, and Uno Platform developers. However, you might have an application-specific requirement that is not offered in our […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1080","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=1080"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1080\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1095"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a>app:layout_rightSpanned<\/code> attributes which control which screen the element is rendered on:\n<\/p>\n<com.example.myapplication.ZipperLayout...\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:orientation=\"vertical\">\r\n\r\n <TextView\r\n app:layout_rightSpanned=\"true\"\r\n android:id=\"@+id\/txtMain\" ... \/>\r\n\r\n <Button\r\n android:id=\"@+id\/button\" ...\r\n android:text=\"Button1\" \/>\r\n\r\n <Button\r\n app:layout_rightSpanned=\"true\"\r\n android:id=\"@+id\/button2\" ...\r\n android:text=\"Button2\" \/>\r\n\r\n <Button\r\n android:id=\"@+id\/button3\" ...\r\n android:text=\"Button3\" \/>\r\n\r\n <CheckBox\r\n app:layout_rightSpanned=\"true\"\r\n android:id=\"@+id\/checkBox\" ...\r\n android:text=\"CheckBox\" \/><\/pre>\n
Implementing a dual-screen layout<\/h2>\n
LinearLayout<\/code> control:\n<\/p>\npublic class ZipperLayout \r\nextends LinearLayout {<\/pre>\nlayout_rightSpanned<\/code>, add this XML to the values\/attrs.xml<\/strong> file:\n<\/p>\n<declare-styleable name=\"ZippperLayout_LayoutParams\">\r\n <attr name=\"layout_rightSpanned\" format=\"boolean\"\/>\r\n <attr name=\"layout_weight\" format=\"float\"\/>\r\n <attr name=\"android:layout_gravity\"\/>\r\n<\/declare-styleable><\/pre>\n
LayoutParams<\/code> and override the methods required to use the subclass (such as generateLayoutParams<\/code>). In the subclass, create a local variable rightSpanned<\/code> for the value and parse it via the LayoutParams<\/code> constructor using:\n<\/p>\nTypedArray a = context.obtainStyledAttributes(attributeSet, R.styleable.ZipperLayout_LayoutParams);\r\nrightSpanned = a.getBoolean(R.styleable.ZipperLayout_LayoutParams_layout_rightSpanned, false);\r\n...<\/pre>\n
Jetpack Window Manager<\/h2>\n
WindowBackend<\/code> interface described in the AndroidX API documentation<\/a>, which is added to the project by including a dependency in the build.gradle<\/strong> file\n<\/p>\nimplementation \"androidx.window:window:1.0.0-alpha01\"\r\n<\/pre>\n
onAttachedToWindow<\/code> (and set to null in onDetachedFromWindow<\/code>). \n<\/p>\nprotected void onAttachedToWindow() {\r\n super.onAttachedToWindow();\r\n wm = new WindowManager(getContext(),null);\r\n}<\/pre>\nonMeasure<\/code> and onLayout<\/code>.\n<\/p>\nonMeasure<\/code> is called first, and the window manager is used to determine if there is a display feature (which is the API terminology for the hinge). If the hinge is detected, and it is detected to be vertical in the middle of the screen, the layout\u2019s widthMeasureSpec<\/code> is modified to use only the width of one screen, rather than the entire spanned screen width.\n<\/p>\nwindowLayoutInfo = wm.getWindowLayoutInfo();\r\nList
onLayout<\/code> is called, it also checks for the presence of the hinge via getDisplayFeatures<\/code> and determines the x coordinate for the child elements to be displayed on the right screen. The method then lays out the child controls in a loop, checking if the app is split across two screens, and whether the child element should be placed on the right screen:\n<\/p>\nfor(int i=0;i<getChildCount();i++)\r\n{\r\n final View childAt = this.getChildAt(i);\r\n final LayoutParams lp = (LayoutParams) childAt.getLayoutParams();\r\n if (lp.isRightSpanned() && split) { \r\n...<\/pre>\nLinearLayout<\/code>.\n<\/p>\nNovember Surface Duo emulator update<\/h2>\n
Coming soon \u2013 droidcon APAC 2020<\/h2>\n
<\/a>\n<\/p>\nFeedback<\/h2>\n