Custom LayoutManager and ItemDecoration for RecyclerView

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.

The FoldableLayoutManager is a wrapper over a LinearLayoutManager and a GridLayoutManager that will provide one or the other depending on whether the app is spanned across displays or not.

The FoldableItemDecoration is an implementation of a RecyclerView.ItemDecoration that will create a margin between the two columns so they don't get covered by the hinge (in case it is present) when the app is spanned and the FoldableLayoutManager is used.

On a single screen, a RecyclerView that uses the FoldableLayoutManager and the FoldableItemDecoration will look as usual:

Surface Duo Emulator displaying an application on the left screen with items of the same size

In spanned mode, a RecyclerView that uses the FoldableLayoutManager and the FoldableItemDecoration will split the content between the two screens:

Surface Duo Emulator displaying a spanned application with items of the same size

Starting with the 1.0.0-beta4 version, a RecyclerView that uses the FoldableLayoutManager and the FoldableItemDecoration will split the content across the FoldingFeature on foldable devices also. For example, this is how it would look on the 6.7" Horizontal Fold-in Emulator:

Foldable Emulator displaying an application on the whole screen with items of the same size

class MainActivity : AppCompatActivity() {
//...
    
    private fun onWindowLayoutInfoChanged(windowLayoutInfo: WindowLayoutInfo) {
        recyclerView.layoutManager = FoldableLayoutManager(this, windowLayoutInfo).get()
        recyclerView.replaceItemDecorationAt(FoldableItemDecoration(windowLayoutInfo))
    }
}

FoldableStaggeredLayoutManager and FoldableStaggeredItemDecoration

There is also a way to have the StaggeredGridLayoutManager in dual-screen mode, by including the FoldableStaggeredLayoutManager which should be used together with the FoldableStaggeredItemDecoration.

On a single screen, a RecyclerView that uses the FoldableStaggeredLayoutManager and the FoldableStaggeredItemDecoration will look as usual:

Surface Duo Emulator displaying an application on the left screen with items of variable sizes

In spanned mode, a RecyclerView that uses the FoldableStaggeredLayoutManager and the FoldableStaggeredItemDecoration will split the content between the two screens:

Surface Duo Emulator displaying a spanned application with items of variable sizes

Starting with the 1.0.0-beta4 version, a RecyclerView that uses the FoldableStaggeredLayoutManager and the FoldableStaggeredItemDecoration will split the content between the two screens on foldable devices also. For example, this is how it would look on the 6.7" Horizontal Fold-in Emulator:

Foldable Emulator displaying an application on the whole screen with items of variable sizes

class MainActivity : AppCompatActivity() {
//...
    
    private fun onWindowLayoutInfoChanged(windowLayoutInfo: WindowLayoutInfo) {
        recyclerView.layoutManager = FoldableStaggeredLayoutManager(this, windowLayoutInfo).get()
        recyclerView.replaceItemDecorationAt(FoldableStaggeredItemDecoration(windowLayoutInfo))
    }
}