Happy Two Year

Craig Dunn

January 6th, 20221 0

Hello developers!

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:

A picture containing text, electronics, display, screenshotDescription automatically generated

TwoPane widget for Flutter

Flutter developers can try out the TwoPane widget that the developer experience team is working on. Follow these instructions to set up your Flutter project for dual-screen support.

A close-up of a smartphoneDescription automatically generated with low confidence

TwoPaneView for .NET

Xamarin and Uno Platform developers both have access to the TwoPaneView component using C# and XAML.

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.

Graphical user interface, application, WordDescription automatically generated

Resources and feedback 

We’d love to hear about your plans for building dual-screen and fold-aware apps in 2022 – use the feedback forum or message us on Twitter @surfaceduodev. 

Finally, please join us for our dual screen developer livestream at 11am (Pacific time) each Friday – mark it in your calendar and check out the archives on YouTube. 

Craig Dunn Principal SW Engineer, Surface Duo Developer Experience