- \n
- \n ScreenHelper\n <\/li>\n
- \n SurfaceDuoScreenManager\n <\/li>\n
- \n SurfaceDuoLayout\n <\/li>\n<\/ul>\n
\n However, we have re-packaged the controls into separate libraries so they\u2019re easier to add only what you need:\n<\/p>\n
- \n
- Core<\/strong> \u2013 contains ScreenHelper and SurfaceDuoScreenManager. You can use these directly in your code and are also used by the other libraries.\n <\/li>\n
- Bottom navigation<\/strong> \u2013 extends the bottom navigation control to fit into one or two screens.\n <\/li>\n
- Fragment handler<\/strong> \u2013 contains a helper class to manage fragments on one or two screens.\n <\/li>\n
- Layouts <\/strong>\u2013 contains our original SurfaceDuoLayout control, as well as a simpler \u201chelper layout\u201d that will shift a view to the left or right.\n <\/li>\n
- Tabs <\/strong>\u2013 extends the tab layout so that the tabs can be positioned across one or two screens.\n <\/li>\n<\/ul>\n
\nEach of the new controls are described below and you can refer to the updated documentation<\/a> for more information. You can add them to your project by updating your gradle dependencies according to these instructions<\/a>. Samples for each are available alongside the open-source code<\/a>. Use our\u00a0feedback forum<\/a>\u00a0or the SDK issues list<\/a> to provide feedback on these controls and let us know what else you\u2019d like to see added.\n<\/p>\n
Screen helper<\/h2>\n
\nThis helper class<\/a> provides functions to query the state of the device, such as the hinge area, the screen rectangles when the app is spanned, and whether the app is spanned. Here\u2019s one example using the screen helper in the code snippet below that demonstrates how to show or hide a control depending on spanned state:\n<\/p>\n
val visibility = if (ScreenHelper.isDeviceSurfaceDuo(this) &&\r\n ScreenHelper.isDualMode(this)\r\n) { \/\/ isSpanned on a Surface Duo\r\n View.VISIBLE\r\n} else {\r\n View.GONE\r\n}\r\n<\/pre>\nSurface Duo screen manager<\/h2>\n
\nThe screen manager<\/a> can be wired up to listen for changes in the app\u2019s state so that your code can respond to events like spanning or unspanning and change the layout accordingly. This code shows a simple example of responding to an application changing from one screen to two (or vice versa):\n<\/p>\n
\/\/ Application subclass\r\nlateinit var surfaceDuoScreenManager: SurfaceDuoScreenManager\r\noverride fun onCreate() {\r\n super.onCreate()\r\n surfaceDuoScreenManager = SurfaceDuoScreenManager.getInstance(this)\r\n}\r\n\r\n\/\/ Activity\r\noverride fun onCreate(savedInstanceState: Bundle?) {\r\n super.onCreate(savedInstanceState)\r\n setContentView(R.layout.activity_main)\r\n (application as SampleApp).surfaceDuoScreenManager.addScreenModeListener(\r\n this,\r\n object : ScreenModeListener {\r\n override fun onSwitchToSingleScreen() {\r\n Toast.makeText(\r\n this@MainActivity,\r\n \"Single Screen Mode\",\r\n Toast.LENGTH_SHORT\r\n ).show()\r\n }\r\n override fun onSwitchToDualScreen() {\r\n Toast.makeText(\r\n this@MainActivity,\r\n \"Dual Screen Mode\",\r\n Toast.LENGTH_SHORT\r\n ).show()\r\n }\r\n }\r\n )\r\n}\r\n<\/pre>\nBottom navigation<\/h2>\n
\n The default behavior for bottom navigation in a dual-screen view could result in one of the options being obscured by the hinge. The Surface Duo bottom navigation<\/a> has configuration controls to choose which screen to group the navigation options:\n<\/p>\n
- \n
- \n
DisplayPosition.START<\/code>\u00a0– grouped on first screen.\n <\/li>\n- \n
DisplayPosition.END<\/code>\u00a0– grouped on second screen.\n <\/li>\n- \n
DisplayPosition.DUAL<\/code>\u00a0– spanned across both screens (might appear under hinge).\n <\/li>\n<\/ul>\n\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/07\/word-image-7.png\")
\n<\/p>\nFigure 1: bottom navigation shifts the options to one screen<\/em>\n<\/p>\n
Fragment handler<\/h2>\n
\n The fragment handler<\/a> is a helper class to restore fragments that are needed after a screen transition (such as from single-screen to dual-screen).\n<\/p>\n
Surface Duo layout<\/h2>\n
\nThe Surface Duo layout has been described in a previous blog post<\/a>, including its design-time support<\/a>. This is our most powerful layout control and lets you define layouts for single-screen and dual-screen and helps manage them as the app changes state. The screenshots below demonstrate some of the different layout\/orientation combinations that are possible, but you can also span a single layout over both screens:\n<\/p>\n
\n
![\"Four](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/07\/word-image-8.png\")
\n<\/p>\nFigure 2: single and dual-screen layouts<\/em>\n<\/p>\n
Frame layout<\/h2>\n
\nThe frame layout<\/a> will be helpful for existing apps migrating to dual-screen support asit will move a view to either screen (or allow it to span both). This can be an interim step as you enhance for dual-screen, or a design choice for some modal views in your app. Here\u2019s a screenshot of the frame layout sample where you can interactively shift a view between screens or across the spanned app window:\n<\/p>\n
\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/07\/word-image-9.png\")
\n<\/p>\nFigure 3: frame layout shifts a view to one side<\/em>\n<\/p>\n
Tabs<\/h2>\n
\n Similar to bottom navigation, tab usage on dual-screens might result in some options being hidden by the hinge. The dual-screen tab layout<\/a> lets you configure the tabs to group on either screen so that all options are visible:\n<\/p>\n
\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/07\/word-image-10.png\")
\n<\/p>\nFigure 4: tabs shifts the options to one screen<\/em>\n<\/p>\n
Resources and feedback\u00a0<\/h2>\n
\n Visit the docs<\/a> and sample code<\/a> to learn more and try these new controls in your apps. You will notice from the gradle configuration<\/a> that these controls are still in alpha\/preview. Please provide us with your feedback on the SDK GitHub repo<\/a>.\n<\/p>\n
\n We would also love to hear from you about your overall experience using the SDK, emulator, and what helpers or controls you\u2019d like us to work on next.\u00a0Please reach out using our\u00a0feedback forum<\/a>\u00a0or message me\u00a0GitHub<\/a>.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello Microsoft Surface Duo Android developers! This week we\u2019ve updated and refactored our controls to help you build dual-screen applications with less work and more functionality. The classes in the previous release of our library are still available: ScreenHelper SurfaceDuoScreenManager SurfaceDuoLayout However, we have re-packaged the controls into separate libraries so they\u2019re easier to add […]<\/p>\n","protected":false},"author":35845,"featured_media":555,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,46,45],"class_list":["post-552","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"],"acf":[],"blog_post_summary":"
Hello Microsoft Surface Duo Android developers! This week we\u2019ve updated and refactored our controls to help you build dual-screen applications with less work and more functionality. The classes in the previous release of our library are still available: ScreenHelper SurfaceDuoScreenManager SurfaceDuoLayout However, we have re-packaged the controls into separate libraries so they\u2019re easier to add […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/552","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\/35845"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/555"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- Bottom navigation<\/strong> \u2013 extends the bottom navigation control to fit into one or two screens.\n <\/li>\n
- Core<\/strong> \u2013 contains ScreenHelper and SurfaceDuoScreenManager. You can use these directly in your code and are also used by the other libraries.\n <\/li>\n