Bring your app to Surface Duo – Step 1

Hakon Strande

Hello Developers!

We’re excited to post another devblog for developers considering dual screen devices as a new form factor that can enhance your application’s user experience. In this post, we’re focusing on application compatibility testing.

As you know, the Microsoft Surface Duo has two screens and those screens are slightly different in size compared to many existing mobile devices, even those in the new foldables category.

But our goal is for your app to work just fine on a single screen when running on the Surface Duo without any code changes. Some applications though make various assumptions about screen size, and hardcode UI elements to fit within common mobile device screen sizes, while others don’t check for or don’t apply appropriate layouts when screen size changes.

If you are curious about your app’s current behavior on the Surface Duo, before you make changes to take real advantage of the dual screens (see the dual screen enhancement ideas located in our dual-screen documentation here for tips on that), we would like to share some test cases we have been using on our own Android based applications. You can use these test tips to determine how your application functions on the Surface Duo before making any dual-screen enhancement code changes.

Pre-requisites

Before you test your application, please install the latest SDK that includes the most recent Surface Duo emulator OS image, which was released on 02/20/2020. We made changes in the latest SDK to increase compatibility with single screen devices. These updates will greatly affect your test results. Follow these instructions to sideload your application onto the emulator.

We recommend that you also read the 02/20/2020 blog post which outlines all of the changes in that SDK release.

First, let’s cover what you cannot test right now

The current version of the Surface Duo emulator OS image does not include Google’s Mobile Services (GMS), so any functionality that relies on those services unfortunately cannot be tested using the emulator. Note that the Surface Duo device will include GMS and APIs like other Android-based mobile devices, so we do not expect any appcompat issues around these services when applications are running on a hardware device.

Even though the emulator also does not allow for testing playback of DRM content, the Surface Duo is using existing Android content DRM capabilities, so no appcompat issues are expected here either.

OS Functionality application compatibility impact

While the Surface Duo is Android-based, we have made changes to the platform to better support certain dual-screen form factor specifics, such as extending the Android WindowManager to accommodate running two apps side by side or spanning a single app between both displays.

Updating how we report the relevant screen size to apps (see our previous devblog covering recent application compatibility changes to the Surface Duo OS) in the recent release resolved many of the UI issues we found in our own apps. Even so, there may still be opportunities to create a better experience on dual screen devices depending on how the application currently handles screen orientation and posture changes.

Here are some examples:

• UI layout issues running on one of the Surface Duo’s screens
• App is letterboxed
• App is scaled up/down
• User must restart app to extend fully to the screen size

Image #1: Mock-up of various UI layout issues we have found while testing apps

The last three issues are existing Android OS appcompat workarounds that Google has made to the OS over time to handle other device form factor evolutions and the Surface Duo can use those as well. But, for developers who would like their applications to support all mobile device form factors equally well, the types of UI/Layout issues that are based on form factor assumptions – or the lack thereof – in the app’s code, are the toughest ones to manage for an OS platform. We would love the application developer’s help in those cases.

Things to test

So, what can you do to get an idea of how your app’s UI will look and behave on the Surface Duo? Load the SDK emulator OS, side load your app into it, launch your app in single screen mode, and try these test cases:

1. Launch the app and determine if it is opening in tablet or mobile mode. See if your app follows material guidelines on phone vs. tablet UI. By default, on a single screen per material guidelines, the Surface Duo device is in the “mobile range”.
2. Launch the app with the device in portrait orientation and verify the following: Does your app’s first run landing page UI controls all render on the screen? Are any of them cut off? Is the text for the button misaligned with the button graphic?
3. Launch the app with the device in landscape mode and look for the same thing.
4. Turn on auto rotate in Settings and rotate the emulator and determine if your app activity restarts when the screen orientation changes. Consider Google’s documentation on how to properly restart your app activity and if restarting is slow due to dependencies on large datasets or network re-connection, consider using ViewModels. Note: The 02/20/2020 emulator version erroneously restarts some activities. If yours restarts, it may be our bug. Let us know on the forums if your app’s activities are restarting unexpectedly.
5. Do you have an animated UI or graphical elements? Notice if they jitter or otherwise look unnatural. Your animation logic may have dependencies on screen size that are different from the screen you are using.
6. Navigate/use your app. Go through a normal user flow. Notice anything weird? Are lists, dialogs, or menus falling off screen, otherwise cropped, or different than expected?
7. Does your app have widgets? Try to load some of them and see if they show up.
8. Try different hinge postures as well to see how your app reacts to one screen going away when the screens are in flipped posture.

Ok, so if everything is copacetic so far, are you feeling adventurous? Now span your app across both screens in the Surface Duo emulator and perform the same tests listed above and any others you can think of, both in portrait and landscape orientations. Here there are lots of opportunity to make use of the two screens as suggested in our dual screen pattern documentation.

Summary

The Surface Duo developers are working hard to provide the highest possible application compatibility on Surface Duo. As we all know, Android has a vast ISV app ecosystem. With so many different user experience goals from so many different companies across a long period of time, certain assumptions have been made in code that come to light when new form factors arrive. This blog post intended to share some of the things you may consider testing with your application to see how it behaves on this new type of mobile device.

In essence, an app written for modern Android mobile devices should considered these aspects during development for great user experience on all mobile device form factors, not just dual-screen devices:

• Handling resize/orientation changes
• Reflow content when on larger displays (for dual screen this matters when app is spanned across both screens, but may also benefit large screen Android based slates/tablets)
• Create new windowed activities when appropriate

As with anything new, some issues are to be expected, so thank you for proactively considering how your app works on this new form factor.

Please let us know if you have run into issues trying to test your application or have follow-up questions. You can reach out to us on our forums or if you would like a more confidential communication channel, reach out to me privately on Twitter (@HakonStrande) or on LinkedIn (https://www.linkedin.com/in/hakonstrande/).

– Hakon Strande

Hakon Strande Principal Program Manager, Surface Duo Developer Experience

Follow