AppBarLayout<\/a><\/strong>\n<\/p>\n<\/td>\n \n Search input box does not extend under the hinge\n<\/p>\n<\/td>\n<\/tr>\n BottomSheet<\/a><\/strong>\n<\/p>\n<\/td>\n \n Always appears on the right screen, and never under the hinge\n<\/p>\n<\/td>\n<\/tr>\n CalendarView<\/a><\/strong>\n<\/p>\n<\/td>\n \n Can be spanned under hinge and day columns adjust\n<\/p>\n<\/td>\n<\/tr>\n Drawer<\/a><\/strong>\n<\/p>\n<\/td>\n \n Drawer appears on a single screen\n<\/p>\n<\/td>\n<\/tr>\n PeoplePickerView<\/a><\/strong>\n<\/p>\n<\/td>\n \n Persona chips will avoid being placed under the hinge\n<\/p>\n<\/td>\n<\/tr>\n DateTimePicker<\/a><\/strong>\n<\/p>\n<\/td>\n \n Popups will not appear under the hinge\n<\/p>\n<\/td>\n<\/tr>\n PopupMenu<\/a><\/strong>\n<\/p>\n<\/td>\n \n Menus will avoid appearing under the hinge\n<\/p>\n<\/td>\n<\/tr>\n Snackbar<\/a><\/strong>\n<\/p>\n<\/td>\n \n The snackbar will only show on a single screen, and not appear spanned under the hinge\n<\/p>\n<\/td>\n<\/tr>\n Tooltip<\/a><\/strong>\n<\/p>\n<\/td>\n \n Tooltips avoid appearing under the hinge\n<\/p>\n<\/td>\n<\/tr>\n<\/table>\n \n You can add the controls to your app by updating your build.gradle<\/strong> file<\/a>, and read more details in the dual-screen documentation<\/a>.\n<\/p>\n \n The Fluent UI sample app<\/a> available on GitHub is also dual-screen enhanced: when you span the app across both screens the control list is filtered to show only enhanced controls:\n<\/p>\n \n \n This makes it easy to explore the different dual-screen options available in Fluent UI, including the controls shown below.\n<\/p>\n \n The sample itself is contained in a dual-screen enhanced \n The key enhancement of the AppBarLayout is that the search input box does not display under the hinge:\n<\/p>\n \n \n There are a number of additional display options (such as the scrolling behavior, back button visibility, and theme). See the AppBarLayoutActivity.kt<\/strong> file for example implementation details.\n<\/p>\n \n Snackbars are a convenient way for the app to inform the user or get their (optional) input. The Fluent UI \n \n Various other options are demonstrated in the SnackbarActivity.kt<\/strong> file included in the sample.<\/strong>\n<\/p>\n \n This control shows a popup date and time picker, which is centered on a single screen, but shifts to the right when the application is spanned. Here\u2019s a code snippet from the sample app that will show the picker:\n<\/p>\n \n \n The actual popup is configurable for dates, times, or a date\/time range.\n<\/p>\n \n There are six other enhanced controls included in the Fluent UI Android package. View the dual-screen Fluent UI documentation<\/a> for more examples and code-snippets to learn more.\n<\/p>\n It was exciting to see Time magazine included the Surface Duo in their Best Inventions of 2020<\/a> list. They recognized the dual-screen form factor was \u201ca glimpse into the future of mobile computing\u201d.\n<\/p>\n \n We\u2019d love to hear how about the apps you\u2019re building for dual-screen devices and how Fluent UI can help. Download the demo or review the source code on the FluentUI-Android GitHub repo<\/a>, and raise an issue<\/a> if you have a question. \n<\/p>\n \n Please reach out to the Surface Duo Developer Experience team using the feedback forum<\/a> or Twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello Kotlin and Java developers, I\u2019m pleased to present our first release of Fluent UI Android controls for Surface Duo. Fluent UI is a user experience framework to help you build attractive apps that are consistent across Android and other platforms. Read more about Fluent UI. To help developers build dual-screen apps we have enhanced […]<\/p>\n","protected":false},"author":45842,"featured_media":1063,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[365,704,705,473,45],"class_list":["post-1059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-android-developer","tag-fluent-ui","tag-java","tag-kotlin","tag-surface-duo-sdk"],"acf":[],"blog_post_summary":" Hello Kotlin and Java developers, I\u2019m pleased to present our first release of Fluent UI Android controls for Surface Duo. Fluent UI is a user experience framework to help you build attractive apps that are consistent across Android and other platforms. Read more about Fluent UI. To help developers build dual-screen apps we have enhanced […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1059","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\/45842"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1059\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1063"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Enhanced control examples<\/h2>\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/11\/menu-framed-400.png\")
AppBarLayout<\/h3>\n
AppBarLayout<\/code> control, which is declared in the activity_demo_list.xml<\/strong> layout, like this:\n<\/p>\n<com.microsoft.fluentui.appbarlayout.AppBarLayout\r\n android:id=\"@+id\/app_bar\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\" \/><\/pre>\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/11\/word-image-9.png\")
Figure 2: AppBarLayout spanned across two screens<\/em>\n<\/p>\nSnackbar<\/h3>\n
Snackbar<\/code> does this while avoiding being drawn under the hinge. A simple snackbar with an action button can be shown with this code:\n<\/p>\nval snackbar = Snackbar.make(root_view, \"This is a multiline snackbar. Max lines are set to two\", Snackbar.LENGTH_INDEFINITE)\r\n .setAction(\"Action\", View.OnClickListener {\r\n \/\/ handle click here\r\n })\r\nsnackbar.show()<\/pre>\n![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/11\/word-image-10.png\")
\n
Figure 3: Snackbar only appears on a single screen<\/em>\n<\/p>\nDateTimePicker<\/h3>\n
val dateTimePicker = DateTimePicker.newInstance(\r\n this,\r\n picker.mode,\r\n picker.dateRangeMode,\r\n getFragmentDateTime(),\r\n getFragmentDuration()\r\n)\r\ndateTimePicker.show(supportFragmentManager, picker.tag)<\/pre>\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/11\/word-image-11.png\")
\n
Figure 4: DateTimePicker does not appear under the hinge<\/em>\n<\/p>\nOther enhanced controls<\/h3>\n
Best Inventions of 2020<\/h2>\n
Feedback<\/h2>\n