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.

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

For more information: Install Surface Duo SDK

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.

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.

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:

Extended Canvas
Master-Detail
Two page
Dual-view
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.

You need to initialize the dual-screen device service and add it to layout configuration in your MainActivity of your Xamarin.Android project.

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.

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.

Handle dual screen info changed property

Dual-screen design patterns

Application 1^st page:

Companion pane:

Master detail:

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