- \n
- SurfaceDuoLayout<\/strong> \u2013 a control that helps manage single-screen and dual-screen layouts in a flexible way.<\/li>\n
- SurfaceDuoScreenManager <\/strong>\u2013 used to subscribe to screen mode changes and have your app respond accordingly.<\/li>\n
- ScreenHelper <\/strong>\u2013 provides information about the screen and hinge to help you position elements in your UI.<\/li>\n<\/ul>\n
This post explains one of many ways to take advantage of these new features, you can learn more in the SurfaceDuoLayout documentation<\/a>.<\/p>\n
Add to your project<\/h2>\n
To try out these features, first update your Android Studio project:<\/p>\n
- \n
- In the top-level build.gradle<\/b> file, add these lines inside the
allprojects { repositories {<\/code> section:\nmaven {\r\n url 'https:\/\/pkgs.dev.azure.com\/MicrosoftDeviceSDK\/DuoSDK-Public\/_packaging\/Duo-SDK-Feed\/maven\/v1'\r\n}\r\n<\/pre>\n<\/li>\n- In your module-level build.gradle<\/b> file, add this line in the
dependencies {<\/code> section:\nimplementation 'com.microsoft.device:dualscreen-layout:0.9.0'<\/pre>\n<\/li>\n
- Java projects should also add this line to their build.gradle<\/b> dependencies, because the library is built with Kotlin:\n
implementation \"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version\"<\/pre>\n<\/li>\n
- Initialize a
SurfaceDuoScreenManager<\/code> instance in yourApplication<\/code> class so you can react to access device statues in your code:\nSurfaceDuoScreenManager surfaceDuoScreenManager;\r\n\r\n@Override\r\npublic void onCreate() {\r\n super.onCreate();\r\n surfaceDuoScreenManager = SurfaceDuoScreenManager.init(this);\r\n}\r\n\r\npublic SurfaceDuoScreenManager getSurfaceDuoScreenManager() {\r\n return surfaceDuoScreenManager;\r\n}<\/pre>\ngetSurfaceDuroScreenManager<\/code> will be used in your activities to configure listeners for device mode changes.\n<\/li>\n<\/ol>\nUsing SurfaceDuoLayout<\/h2>\n
You can implement dual-screen behavior both using layouts or by listening for screen change events and manipulating fragments, or a combination of the two approaches.<\/p>\n
It’s possible to create a sophisticated, responsive UI declaratively, as shown in the CompanionPaneLevel2 sample (Java<\/a>, Kotlin<\/a>). In the sample, the main activity contains the following XML layout:<\/p>\n
It uses the SurfaceDuoLayout and sets three attributes to define the single- and dual-screen behavior:<\/p>\n
- \n
single_screen_layout_id<\/code> \u2013 layout to load in single screen mode, or on other devices.<\/li>\ndual_screen_start_layout_id<\/code> \u2013 layout for the left-side screen.<\/li>\ndual_screen_end_layout_id<\/code> \u2013 layout for the right-side screen.<\/li>\n<\/ul>\nEach of those layouts can be further specialized (if required) with landscape and portrait versions, as shown in this screenshot:<\/p>\n
![\"Layout](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/companion-layout-tree.png\")
<\/p>\nFigure 1: Layout resource definitions<\/p>\n
You create\/edit these layouts as you normally would in Android Studio:<\/p>\n
![\"Android](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/companion-android-studio.png\")
<\/p>\nFigure 2: Android Studio layout editor<\/p>\n
Here are some screenshots of the CompanionPaneLevel2 sample app in different modes:<\/p>\n
![\"Portrait](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/emulator-4x4-800.png\")
<\/p>\nFigure 3: Single-screen and dual-screen layouts using SurfaceDuoLayout<\/p>\n
SurfaceDuoScreenManager<\/h3>\n
To use the
SurfaceDuoScreenManager<\/code><\/a>, add a listener in your application or activity where you can react to screen state changes, as shown in this code snippet:<\/p>\n\r\n@Override\r\nprotected void onCreate(@Nullable Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n\r\n ((CompanionPaneApp) getApplication()).getSurfaceDuoScreenManager()\r\n .addScreenModeListener(new ScreenModeListener() {\r\n\r\n @Override\r\n public void onSwitchToSingleScreenMode() {\r\n \/\/ TODO: Add single-screen behavior\r\n }\r\n\r\n @Override\r\n public void onSwitchToDualScreenMode() {\r\n \/\/ TODO: Add dual-screen behavior\r\n }\r\n\r\n });\r\n}<\/pre>\nYou might add code to update views in the activity (like the CompanionPane sample for Java<\/a> & Kotlin<\/a>), or use fragment manager to adjust the UI (like the MasterDetail sample for Java<\/a> & Kotlin<\/a>).<\/p>\n
ScreenHelper<\/h3>\n
The
ScreenHelper<\/code><\/a> provides information about the device, to help your code understand the device state. There are four static functions:<\/p>\n- \n
- getHinge<\/strong> \u2013 returns the co-ordinates of the seam where the device’s hinge fits between the two displays.<\/li>\n
- getScreenRectangles<\/strong> \u2013 when the device is spanned, returns two rectangles representing the dimensions of the screens.<\/li>\n
- isDualMode<\/strong> \u2013 whether the application is spanned or not.<\/li>\n
- getCurrentRotation<\/strong> \u2013 returns the device rotation (0, 90, 180, or 270 degrees).<\/li>\n<\/ul>\n
These functions can be used in conjunction with the
ScreenManager<\/code> to reason about the device state and render the appropriate UI.<\/p>\nResources and feedback<\/h2>\n
Refer to the SurfaceDuoLayout documentation<\/a> for more detailed explanations of the alternative approaches for using the SurfaceDuoLayout control. Cross-platform developers using Xamarin should refer to the previous post on bringing Xamarin apps to Surface Duo<\/a>.<\/p>\n
We would love to hear from you about your experiences using the SDK, emulator, and your thoughts on how you can utilize these in your apps.<\/p>\n
Please reach out using our feedback forum<\/a> or message me on Twitter<\/a> or GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today we are releasing a preview of our first Android dual-screen layout control for Java and Kotlin developers. The new control and associated helpers will enable you to build dynamic and responsive apps that take advantage of the Microsoft Surface Duo and its two screens. We look forward to see what you create with it!<\/p>\n","protected":false},"author":570,"featured_media":253,"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-183","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":"
Today we are releasing a preview of our first Android dual-screen layout control for Java and Kotlin developers. The new control and associated helpers will enable you to build dynamic and responsive apps that take advantage of the Microsoft Surface Duo and its two screens. We look forward to see what you create with it!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/183","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=183"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/253"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- getScreenRectangles<\/strong> \u2013 when the device is spanned, returns two rectangles representing the dimensions of the screens.<\/li>\n
- In your module-level build.gradle<\/b> file, add this line in the
- SurfaceDuoScreenManager <\/strong>\u2013 used to subscribe to screen mode changes and have your app respond accordingly.<\/li>\n