Surface Duo Dev: Learning Resources For Beginners
Tags: surfaceduodev, beginners, android, reactnative
Published: 2020-09-09 22:28:47

---
title: Surface Duo Dev: Learning Resources For Beginners
published: true
description: Want to develop native, cross-platform or mobile web apps for the Microsoft Surface Duo? Subscribe to this post to get updates on resources, events and content to help you build, test and deploy your next dual-screen app!
tags: surfaceduodev, beginners, android, reactnative
series: "Surface Duo Development: Dual-Screen, Multi-posture, Multi-platform"
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0yi8nbd0eh3z9bl6dh54.png
---

> _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](#comments) to get content updates

---

## What is the Surface Duo?

The [Surface Duo](https://www.microsoft.com/en-us/surface/devices/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:

{% link https://dev.to/azure/surface-duo-dev-do-one-better-with-dual-screens-2k1p %}

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

{% tag surfaceduodev %}

Have resources of your own that you want to share? We'd love to hear from you - just [leave a comment](#comments)!

---

## 1. Setup: Getting Started

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

1. Read | [Introduction to dual screen devices](https://docs.microsoft.com/en-us/dual-screen/introduction?WT.mc_id=surfaceduodev-blog-ninarasi)
2. Install | [Surface Duo SDK](https://docs.microsoft.com/en-us/dual-screen/android/get-duo-sdk??WT.mc_id=surfaceduodev-blog-ninarasi) 
3. Validate | [Test Your Emulator](https://docs.microsoft.com/en-us/dual-screen/android/use-emulator?WT.mc_id=surfaceduodev-blog-ninarasi) 
4. Develop | [Native](https://docs.microsoft.com/en-us/dual-screen/android/?WT.mc_id=surfaceduodev-blog-ninarasi), [Cross-Platform](https://docs.microsoft.com/en-us/dual-screen/cross-platform/?WT.mc_id=surfaceduodev-blog-ninarasi) or [Mobile Web](https://docs.microsoft.com/en-us/dual-screen/web/?WT.mc_id=surfaceduodev-blog-ninarasi)
5. Subscribe | [Surface Duo Blog](https://devblogs.microsoft.com/surface-duo/?WT.mc_id=surfaceduodev-blog-ninarasi)
6. Bookmark | [Azure for Mobile Developers](https://docs.microsoft.com/en-us/azure/developer/mobile-apps/?WT.mc_id=surfaceduodev-blog-ninarasi)

---

## 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](https://docs.microsoft.com/en-us/dual-screen/introduction#dual-screen-app-patterns?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Dual Screen Layout Libraries](https://docs.microsoft.com/en-us/dual-screen/android/api-reference/dualscreen-library/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Pen Events On Surface Duo](https://devblogs.microsoft.com/surface-duo/pen-events-on-the-surface-duo/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Hinge Angle on Surface Duo](https://devblogs.microsoft.com/surface-duo/hinge-angle-on-surface-duo/?WT.mc_id=surfaceduodev-blog-ninarasi)

### Native Android / Kotlin, Java
 * [Get Started](https://docs.microsoft.com/en-us/dual-screen/android/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Jetpack Compose on Surface Duo](https://devblogs.microsoft.com/surface-duo/jetpack-compose-dual-screen-sample/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Android Samples](https://docs.microsoft.com/en-us/dual-screen/android/samples?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Kotlin SDK Samples](https://docs.microsoft.com/en-us/samples/microsoft/surface-duo-sdk-samples-kotlin/all/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Java SDK Samples](https://docs.microsoft.com/en-us/samples/microsoft/surface-duo-sdk-samples/all/)

### Cross-Platform / React Native 
 * [Get Started](https://docs.microsoft.com/en-us/dual-screen/react-native/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Part 1: Build React Native Apps For Surface Duo](https://devblogs.microsoft.com/surface-duo/build-react-native-apps-for-microsoft-surface-duo/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Part 2: New React Native dual-screen navigation module](https://devblogs.microsoft.com/surface-duo/new-react-native-dual-screen-navigation-module/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [React Native Samples](https://docs.microsoft.com/en-us/dual-screen/react-native/samples?WT.mc_id=surfaceduodev-blog-ninarasi)

### Cross-Platform / Xamarin 
 * [Get Started](https://docs.microsoft.com/en-us/dual-screen/xamarin/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Xamarin Samples](https://docs.microsoft.com/en-us/dual-screen/xamarin/samples?WT.mc_id=surfaceduodev-blog-ninarasi)

### Cross-Platform / Flutter
 * [Get Started](https://devblogs.microsoft.com/surface-duo/get-started-with-flutter-on-surface-duo/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Lighting up a Flutter Application on Surface Duo](https://devblogs.microsoft.com/surface-duo/lighting-up-a-flutter-application-on-microsoft-surface-duo/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Flutter Samples](https://docs.microsoft.com/en-us/samples/microsoft/surface-duo-sdk-samples-flutter/all/?WT.mc_id=surfaceduodev-blog-ninarasi)

### Unity / Gaming
 * [Get Started](https://docs.microsoft.com/en-us/dual-screen/unity/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Dual Screen Games with Unity On Android](https://devblogs.microsoft.com/surface-duo/dual-screen-games-with-unity-for-android/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Unity Game Samples](https://docs.microsoft.com/en-us/dual-screen/unity/samples?WT.mc_id=surfaceduodev-blog-ninarasi)

### Mobile Web / JavaScript 
 * [Get Started](https://docs.microsoft.com/en-us/dual-screen/web/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [CSS Media Query: Spanning](https://docs.microsoft.com/en-us/dual-screen/web/css-media-spanning?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Windows Segments API: Screens ](https://docs.microsoft.com/en-us/dual-screen/web/javascript-getwindowsegments?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Part 1: Dual Screen web experiences preview ](https://devblogs.microsoft.com/surface-duo/dual-screen-web-experiences-preview/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Part 2: Build and Test dual-screen web apps](https://devblogs.microsoft.com/surface-duo/build-and-test-dual-screen-web-apps/?WT.mc_id=surfaceduodev-blog-ninarasi)
 * [Web Samples](https://docs.microsoft.com/en-us/dual-screen/web/samples?WT.mc_id=surfaceduodev-blog-ninarasi)

---

## 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](https://docs.microsoft.com/en-us/learn/?WT.mc_id=surfaceduodev-blog-ninarasi)
* Explore | [Certifications](https://docs.microsoft.com/en-us/learn/certifications/?WT.mc_id=surfaceduodev-blog-ninarasi)
* Path | [Customize, add advanced features to Xamarin.Forms apps](https://docs.microsoft.com/en-us/learn/paths/customize-your-xamarin-forms-apps/?WT.mc_id=surfaceduodev-blog-ninarasi)
* Module | [Build dual-screen Xamarin.Forms apps w/ TwoPaneView](https://docs.microsoft.com/en-us/learn/modules/xamarin-forms-dual-screen/?WT.mc_id=surfaceduodev-blog-ninarasi)

---

## 4. Code: Samples & Projects
 *  (_Kotlin_) Two Note | [Browse the code](https://docs.microsoft.com/en-us/samples/microsoft/surface-duo-app-samples/two-note/) | [Read Article](https://devblogs.microsoft.com/surface-duo/noteworthy-new-app-sample-twonote/?WT.mc_id=surfaceduodev-blog-ninarasi) 
 * (_Kotlin_) Photo Editor | [Browse Code](https://docs.microsoft.com/en-us/samples/microsoft/surface-duo-app-samples/photo-editor/?WT.mc_id=surfaceduodev-blog-ninarasi)