DEV Community

Cover image for Test your UI
Thomas Künneth
Thomas Künneth

Posted on

Test your UI

Welcome to the third part of Understanding foldable devices. Today, we'll spend some time on testing. No, not the usual suspects, unit tests and instrumented tests. Instead, we look at how to test our app on foldable devices. The most obvious solution is to get some hardware. Given the short product cycles in our industry, it's pretty easy to get last generation devices for a reasonable price. If you stick to unpopular products you will likely make a true bargain. You don't feel ready to spend real money? No worries, you can still test using emulators. There are a few options to consider.

Surface Duo Emulator

The Microsoft Surface Duo Emulator is available for macOS, Windows, and Linux.

Download options at the time of writing

As its name suggests, the Surface Duo Emulator simulates the Surface Duo, which is a dual screen device. If your app works great on the Surface Duo, you need to try really hard to make it not work great on other foldables, too 🤣. The tool is based on the standard Android Emulator, so you can interact with it using the Android Debug Bridge. Like the physical Surface Duo line, the Emulator currently runs Android 12L.

The Surface Duo Emulator

It comes preinstalled with a few sample apps. Yes, I know what you think, Why do they install this crap?. It's not that way, though. In fact, the samples help you understand how dual screen devices work. So, it's really a good idea to take some time and play with them. Besides, their source code is freely available, so there's a lot to read and learn.

Working with two screens

Android Emulator

Remember that not all foldable devices feature a dual screen. It's actually the other way round, the Surface Duo is a niche device. To test your app on a device that has no obstructing hinge, you can configure an AVD (Android virtual device) for the standard Android emulator.

Select Hardware dialog in Android Studio

But what do Fold out, Fold in, or Rollable mean? Just pick any of them and check out different postures by opening the Virtual sensors section in the Emulator settings.

Virtual sensors section showing a closed Fold-in with outer display device

Virtual sensors section showing a almost closed Fold-in with outer display device

Virtual sensors section showing a partially opened Fold-in with outer display device

Virtual sensors section showing a partially opened Fold-in with outer display device

As you can see, the 3D preview nicely visualizes different postures and how they affect screen layout.

Finally, here's how a Rollable looks like:

The Android emulator running a rollable device

While you can move and rotate the device using the preview, rolling and folding is done here:

Screenshot showing a slider

Screenshot showing a slider

By testing with the Surface Duo Emulator and the Android Emulator you can be pretty confident that your app will work great on foldables. Though this series focusses on that device category, please keep in mind that you will likely want to provide an awesome experience on non-foldable devices, too. After all, a tablet is a foldable without a fold or hinge 🤣. The Android Emulator is offering a wide selection of large screen configurations, which you can give a try. Let me show you two maybe not so obvious alternatives.

Windows Subsystem for Android and ChromeOS

The Windows Subsystem for Android is a really nice Windows 11 feature. As the name suggests, it allows you to run Android apps. Yet, there's no Play Store. The official way to get apps is to download them from the Amazon Appstore. I know what you are thinking, so let me immediately mention that there is full ADB support.

Here's how to get started.

Once everything is in place, basically all you need to do is fire up adb connect 127.0.0.1:58526. However, for this to work you must launch an Android app. Fortunately, this no hen egg thing, as the Amazon Appstore will do just fine.

Launching Windows Subsystem for Android

Windows Subsystem for Android in Android Studio

If you have read the second part of this series you already know why this is freaking cool: the app window is resizable.

Here's how my Min Time app behaves with different window sizes.

The Min Time app in one column mode

The Min Time app showing two columns

Now, isn't that a gorgeous way to test your UI?

While Freeform debuted with Android 7, you may not recall having seen it in action too often. Yet, there is another platform which has allowed us to run Android apps in moveable, resizable windows for quite a while: ChromeOS. To learn more, visit Android apps on ChromeOS.

Conclusion

Time to recap. To check if your app looks good on foldables, you can test it

  • on real hardware
  • the Surface Duo Emulator
  • the Android Emulator with a foldable AVD

As foldables in a way are tablets with a hinge or fold, you should also test your app on other large screen devices (please keep in mind, though, that not all foldables must have large screens), using

  • real hardware
  • the Android Emulator with a large screen AVD

Finally, freeform environments are very interesting variations of large screen devices. Among them are:

  • Windows Subsystem for Android
  • ChromeOS

This part again didn't contain code. Originally I had planned to show you some, but then I felt I wanted to provide some more information regarding testing first. The next headline will read Code your UI* - promised. So please stay tuned.

Top comments (0)