Dual-screen layout libraries

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

These libraries contain a set of views, layouts, helper functions, and more to help Android developers create applications for dual-screen devices.

When you leave the responsibility of creating and handling all the screen modes to our components, your main focus will be creating your amazing app.

Modules

  • ScreenManager - Contains the core classes that are needed by our components to develop for dual-screen devices. You can also utilize these directly in your code.

    • Use ScreenManagerProvider to get the single instance of SurfaceDuoScreenManager.
    • Use SurfaceDuoScreenManagerto register listeners in order to be notified when the screen mode was changed.
    • Use ScreenInfoProvider to get an instance of ScreenInfo.
    • Use ScreenInfo to get different screen information depending on the screen mode.

  • Bottom navigation - Contains a custom BottomNavigationView with dual-screen behavior.

    • SurfaceDuoBottomNavigationView provides the ability to move the BottomNavigationView onto the left or right screen.

  • FragmentsHandler - Contains code to handle Fragments in different screen modes.

    • FragmentManagerStateHandler provides the ability to restore screen-mode-specific fragments when an activity is transitioning to a dual or single screen.

  • Layouts - Contains the layouts that help you create UI for dual-screen devices.

    • The SurfaceDuoLayout will create SingleScreen or DualScreen containers to hold your UI.
    • SurfaceDuoFrameLayout provides the ability to span child views or move them onto the left or right screen.

  • RecyclerView - Contains a custom RecyclerView.ItemDecoration and a LayoutManager class with dual-screen behavior.

    • DuoItemDecoration adds spacing for the cells to cover the device hinge when the application is in spanned mode.
    • DuoLayoutManager provides a LinearLayoutManager when the device is in single-screen mode and a GridLayoutManager when the device is in spanned mode

  • Tabs - Contains a custom TabLayout class with dual-screen behavior.

    • SurfaceDuoTabLayout provides the ability to move the tabs onto the left screen, the right screen, or to span both screens.

Declaring dependencies

Important

Our initial release of these layouts was packaged in a single library com.microsoft.device:dualscreen-layout.

This library will be deprecated. We recommend using the individual libraries for the controls you need.

  1. Make sure you have the jcenter() repository in your top-level build.gradle file:

    allprojects {
    repositories {
        google()
        jcenter()
     }
}

  2. Add the dependencies you need to the module-level build.gradle file (you should always include the screen manager library):

    ScreenManager

    If you want to choose the version that uses Display Mask API, then you should add the following lines to your gradle file.

    implementation "com.microsoft.device.dualscreen:screenmanager-displaymask:1.0.0-beta2"

    or if you want to choose the version that uses Window Manager API, then you should add the following lines.

    implementation "com.microsoft.device.dualscreen:screenmanager-windowmanager:1.0.0-beta2"

    Bottom navigation

    implementation "com.microsoft.device.dualscreen:bottomnavigation:1.0.0-beta1"
implementation "com.microsoft.device.dualscreen:screenmanager-windowmanager:1.0.0-beta2"
// Or, if you want to use the screen manager with display mask version
// implementation "com.microsoft.device.dualscreen:screenmanager-displaymask:1.0.0-beta2"

    Fragments handler

    implementation "com.microsoft.device.dualscreen:fragmentshandler:1.0.0-beta1"
implementation "com.microsoft.device.dualscreen:screenmanager-windowmanager:1.0.0-beta2"
// Or, if you want to use the screen manager with display mask version
// implementation "com.microsoft.device.dualscreen:screenmanager-displaymask:1.0.0-beta2"

    Layouts

    implementation "com.microsoft.device.dualscreen:layouts:1.0.0-beta2"
implementation "com.microsoft.device.dualscreen:screenmanager-windowmanager:1.0.0-beta2"
// Or, if you want to use the screen manager with display mask version
// implementation "com.microsoft.device.dualscreen:screenmanager-displaymask:1.0.0-beta2"

    Tabs

    implementation "com.microsoft.device.dualscreen:tabs:1.0.0-beta1"
implementation "com.microsoft.device.dualscreen:screenmanager-windowmanager:1.0.0-beta2"
// Or, if you want to use the screen manager with display mask version
// implementation "com.microsoft.device.dualscreen:screenmanager-displaymask:1.0.0-beta2"

    RecyclerView

    implementation "com.microsoft.device.dualscreen:recyclerview:1.0.0-beta2"
implementation "com.microsoft.device.dualscreen:screenmanager-windowmanager:1.0.0-beta2"
// Or, if you want to use the screen manager with display mask version
// implementation "com.microsoft.device.dualscreen:screenmanager-displaymask:1.0.0-beta2"