Microsoft Surface Duo Setup and Xamarin Forms-Based Android Application Example

Introduction

 
In this article, I have explained how to setup Microsoft Surface Duo emulator and demo of a Xamarin forms-based Android application in this article. You will be able to run Microsoft surface duo emulator in your machine and test your existing Xamarin forms-based application in surface duo.
 
Source Code Link: Source code of the example
 

What is Microsoft Surface Duo?

This is an android operating system-based dual-screen device with two screens connected by a revolutionary 360° hinge. All your existing android apps work as expected on this device, but you can take a few steps to make them work better, and take advantage of the dual-screen nature of the Surface Duo to provide unique experiences for your users.

For more information about Surface Duo: Introduction to dual-screen devices
 

What do you need to start working with Surface Duo?

  • Get the latest version of Visual Studio 
  • Xamarin installed
  • Android SDK installed
  • Surface Duo emulator, Surface Duo SDK (Download the SDK here)

What are the system requirements for Surface Duo SDK?

  • Windows OS 8/10 (32- or 64-bit)
  • 4 GB of RAM minimum, 8 GB of RAM recommended
  • The Surface Duo preview image requires an Android Emulator to be installed with Visual Studio (Xamarin) 

How to install Surface Duo SDK?

  • Download the Surface Duo SDK from the given link and install it
  • You will get the SDK icon on your desktop after the successful installation of the SDK.
Microsoft Surface duo icon on desktop
  • Default installation location: %USERPROFILE%\SurfaceDuoEmulato
  • Open the artifacts folder inside of the installation folder
  • Open the file run.bat in a text editor
  • Check ANDROID_SDK_LOCATION path value on the top of the file is correct or not. Default ANDROID_SDK_LOCATION location path: C:\Program Files (x86)\Android\android-sdk
Android SDK location path

How to open the Surface Duo emulator?

  • Double click on Surface duo emulator icon which is available on your desktop after successful installation of the SDK.
Microsoft Surface duo emulator
 

How to span your app in Surface Duo?

 
To span your app in the Surface duo emulator, drag the app from the white bar at the bottom of the app screen in the middle of the emulator. When the background turns white in both screens, drop the app.
 
How to span screen?
 

Start With Xamarin forms-based Android Application

 
I have made this example of various dual-screen design patterns. There are 5 types of dual screen design patterns available:
  1. Extended Canvas 
  2. Master-Detail
  3. Two page
  4. Dual-view
  5. Companion Pane
Required NuGet packages:
  • Xamarin.Forms.DualScreen (For Xamarin forms-based application)
  • Xamarin.DuoSdk (For Xamarin.Android project)
  • Create a Xamarin forms application in an Android project
  • Install Xamarin.Forms.DualScreen nugget package in all projects
  • You can also install the Xamarin.DuoSdk NuGet package in Xamarin.Android project, if you want to know if the device is a dual-screen device or a normal single-screen device. 
Xamarin.Forms.DualScreen nuget
  • You need to initialize the dual-screen device service and add it to layout configuration in your MainActivity of your Xamarin.Android project.
MainActivity layout configuration
  • You need to add Xamarin.DuoSdk in Xamarin.Android project if you want to know if the device is a dual-screen device or a normal single-screen mobile device.
Check is dual screen device or not
 

How to check if the App is in Dual-Screen or Single-Screen?

 
You can check SpanMode and handle dual-screen info via property changed event.
 
Check app is spanned or not
 
Handle dual screen info changed property
 
Dual-screen design patterns
  • Application 1st page:
Demo application 1st page
  • Companion pane:
Companion page 
  • Master detail:
Master details page
 
Note
You can check other dual-screen design patterns in the given demo source code.
 

Summary

 
In this article, we explored the Microsoft Surface Duo SDK and emulator setup and demo of a Xamarin forms-based Android application. I hope that this this article will help you get a basic idea of how to provide support for dual-screen devices for your application. Share your feedback!
 
References
  • https://docs.microsoft.com/en-us/dual-screen/android/
  • https://docs.microsoft.com/en-us/dual-screen/android/get-duo-sdk?tabs=windows