Happy Two Year
Welcome to 2022 – a great year to be developing for two screens! To kick off the new year we’re going to do a quick recap of all the two screen enhanced components – across developer platforms – that can help you get started quickly with dual-screen and foldable support, while also providing great single-screen experiences on phones or larger-screen devices.
Two screen native controls
Among our rich library of dual-screen controls, the FoldableLayout component provides an easy way for Kotlin and Java developers to build an adaptive user interface without having to write a lot of custom code. You can find both simple samples and a real-world app example on GitHub.
TwoPaneLayout for Jetpack Compose
Jetpack Compose developers can add the Microsoft TwoPaneLayout to their apps. There are many code examples in our Jetpack Compose Samples GitHub repo, including simple guidance as well as the NavigationRail demo which combines a number of components into a well-designed dual-screen user experience:
TwoPane widget for Flutter
TwoPaneView for .NET
Two viewport segments in Edge
Web developers can take advantage of the viewport segments CSS media query to build dual-screen aware layouts that work when Edge is spanned over two screens. You can view a demo online (using browser developer tools) and try out these complete samples which include a battleship game, a photo gallery, and a news reading experience.