This is a living post (regularly updated document). I will keep adding links to relevant design & development resources for building dual-screen apps for devices like the Surface Duo as I find them.

How can you use this post effectively?

• First 👈🏽 bookmark this post, add to reading list
• Next 👇🏽 subscribe to comments to get content updates

What is the Surface Duo?

The Surface Duo is a dual-screen device from Microsoft.

• It runs Android by default (access apps in Play store)
• It has built-in support for M365 apps (productivity)
• It has a unique 360-degree hinge (multi-posture)
• It is mobile developer friendly (native, cross-platform, mobile web)

Want to know the vision behind the device? Read this:

Surface Duo Dev: Do One Better with Dual Screens!

Nitya Narasimhan, Ph.D for Microsoft Azure ・ Sep 8 '20

#surfaceduodev #beginners #android #reactnative

Want to read detailed posts on the developer journey for Surface Duo app development? Follow this tag:

Have resources of your own that you want to share? We'd love to hear from you - just leave a comment!

1. Setup: Getting Started

Want to start building apps for Surface Duo? Start here:

1. Read | Introduction to dual screen devices
2. Install | Surface Duo SDK
3. Validate | Test Your Emulator
4. Develop | Native, Cross-Platform or Mobile Web
5. Subscribe | Surface Duo Blog
6. Bookmark | Azure for Mobile Developers

2. Build: Development Resources

This section lists developer-authored content for the various development platforms, that provide deep dives into specific aspects

Design Guidance

• Dual Screen App Patterns
• Dual Screen Layout Libraries
• Pen Events On Surface Duo
• Hinge Angle on Surface Duo

Native Android / Kotlin, Java

• Get Started
• Jetpack Compose on Surface Duo
• Android Samples
• Kotlin SDK Samples
• Java SDK Samples

Cross-Platform / React Native

• Get Started
• Part 1: Build React Native Apps For Surface Duo
• Part 2: New React Native dual-screen navigation module
• React Native Samples

Cross-Platform / Xamarin

• Get Started
• Xamarin Samples

Cross-Platform / Flutter

• Get Started
• Lighting up a Flutter Application on Surface Duo
• Flutter Samples

Unity / Gaming

• Get Started
• Dual Screen Games with Unity On Android
• Unity Game Samples

Mobile Web / JavaScript

• Get Started
• CSS Media Query: Spanning
• Windows Segments API: Screens
• Part 1: Dual Screen web experiences preview
• Part 2: Build and Test dual-screen web apps
• Web Samples

3. Learn: Modules & Paths

Microsoft Learn is a good resource for self-study with the potential to earn certification in specific tech areas.

• Browse | Learn Content
• Explore | Certifications
• Path | Customize, add advanced features to Xamarin.Forms apps
• Module | Build dual-screen Xamarin.Forms apps w/ TwoPaneView

4. Code: Samples & Projects

• (Kotlin) Two Note | Browse the code | Read Article
• (Kotlin) Photo Editor | Browse Code