Dual-screen layout libraries

  • Article

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 foldable 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

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

    • BottomNavigationView 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 FoldableLayout will create SingleScreen or DualScreen containers to hold your UI.
    • FoldableFrameLayout 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.

    • FoldableItemDecoration adds spacing for the cells to cover the device hinge when the application is in spanned mode. This should be used together with FoldableLayoutManager.
    • FoldableLayoutManager provides a LinearLayoutManager when the device is in single-screen mode and a GridLayoutManager when the device is in spanned mode.
    • FoldableStaggeredItemDecoration adds spacing for the cells to cover the device hinge when the application is in spanned mode. This should be used together with FoldableStaggeredLayoutManager.
    • FoldableStaggeredLayoutManager provides a LinearLayoutManager when the device is in single-screen mode and a StaggeredGridLayoutManager when the device is in spanned mode.

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

    • TabLayout can detect a foldable feature and provides the option to arrange its tabs on the left or on the right of it.

  • Foldable Navigation Component - Based on Google Navigation Component, this component contains a set of libraries that implements the dual screen navigation pattern.

  • Snackbar - A custom FrameLayout that can be used as a container for the Snackbar in order to position it on foldable devices.

Declaring dependencies

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

    allprojects {
    repositories {
        google()
        mavenCentral()
     }
}

  2. Add the dependencies you need to the module-level build.gradle file (current version may be different from what's shown here):

    Bottom navigation

    implementation "com.microsoft.device.dualscreen:bottomnavigation:1.0.0-beta4"

    Fragments handler

    implementation "com.microsoft.device.dualscreen:fragmentshandler:1.0.0-beta5"

    Layouts

    implementation "com.microsoft.device.dualscreen:layouts:1.0.0-beta8"

    Tabs

    implementation "com.microsoft.device.dualscreen:tabs:1.0.0-beta4"

    RecyclerView

    implementation "com.microsoft.device.dualscreen:recyclerview:1.0.0-beta6"

    SnackbarContainer

    implementation "com.microsoft.device.dualscreen:snackbar:1.0.0-alpha2"

    Foldable Navigation Component

    def nav_version = "1.0.0-alpha3"

// Java language implementation
implementation "com.microsoft.device.dualscreen:navigation-fragment:$nav_version"
implementation "com.microsoft.device.dualscreen:navigation-ui:$nav_version" 

// Kotlin
implementation "com.microsoft.device.dualscreen:navigation-fragment-ktx:$nav_version"
implementation "com.microsoft.device.dualscreen:navigation-ui-ktx:$nav_version"

Deprecated modules

Important

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

This library is deprecated. We recommend using the individual libraries above for the controls you need.

  • ScreenManager (Deprecated) - 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.

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

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

    Or, if you want to choose the version that uses Window Manager API, then add the following line.

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