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:

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

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:

Kotlin

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

Java

public class MainActivity implements AppCompatActivity {
//...
    
    private void onWindowLayoutInfoChanged(WindowLayoutInfo windowLayoutInfo) {
        recyclerView.setLayoutManager(new FoldableLayoutManager(this, windowLayoutInfo).get());
        recyclerView.replaceItemDecorationAt(new 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:

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

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:

Kotlin

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

Java

public class MainActivity implements AppCompatActivity {
//...
    
    private void onWindowLayoutInfoChanged(WindowLayoutInfo windowLayoutInfo) {
        recyclerView.setLayoutManager(new FoldableStaggeredLayoutManager(this, windowLayoutInfo).get());
        recyclerView.replaceItemDecorationAt(new FoldableStaggeredItemDecoration(windowLayoutInfo));
    }
}