Fluent UI dual-screen controls

Fluent UI is a collection of UX frameworks for creating cross-platform applications that share design and interaction behavior. Read more on the Fluent UI developer site and get started with Fluent UI for Android. The complete list of Android controls has links to the visual representation of each control as well as a link to its source.

Enhanced controls

The following controls have been enhanced for dual-screens:

• App bar layout
• Bottom sheet
• Calendar view
• Drawer
• People picker view
• Date time picker
• Popup menu
• Snackbar
• Tooltip

Add the Fluent UI package to your app to use these controls.

Configure your project

The library is published through JCenter, so make sure the jcenter() repository has been added to your project level build.gradle file (which usually is automatic).

Inside the dependency block in your build.gradle, add this line for the FluentUI library:

dependencies {
    ...
    implementation 'com.microsoft.fluentui:FluentUIAndroid:$version'
    ...
}

Make sure you replace $version with the latest version of FluentUI. Also add the following lines to your repositories section in your gradle script:

maven {
    url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
}

Add the Surface Duo SDK dependency to the module-level build.gradle file (current version may be different from what's shown here):

implementation "com.microsoft.device:dualscreen-layout:1.0.0-alpha01"

Source and sample

Find the source code and sample demo app on the Fluent UI GitHub repo. The sample includes the complete set of Fluent UI controls, however when the app is spanned the menu filters itself to just show the dual-screen enhanced controls: