March 11th, 2021

Introducing Jetpack Window Manager for foldable and dual-screen devices Codelab

Cesar Valiente
Software Engineer

Hello Android developers,

As we have mentioned in previous blog posts, enhancing apps to take advantage of the capabilities that new form factor devices such as Microsoft Surface Duo and other foldable devices provide, can easily be done by following a step-by-step approach.

With that in mind, during the last months we have been working together with Google on developing a new Codelab to help you understand what foldable and dual-screen devices are, how to use Jetpack Window Manager to enhance your apps for use on foldables and dual-screen devices by making just a few small changes.

Accessing the Codelab

The new dual-screen Codelab is now available online. You can also search for it using the “foldable” keyword in the main Google Developers Codelabs site.

Once you are inside the Codelab you will see a left-side menu showing the different topics the Codelab covers. This post will go through them step-by-step.

Single screen devices vs. foldable devices

The first topic covered in the Codelab is what distinguishes dual-screen and foldable devices, and the differences from other single-screen devices.

Two mobile devices, one foldable and one with two screens
Figure 1: single- and dual-screen foldable devices

We will also learn about the different postures that foldable devices can have.

Jetpack Window Manager

This is the largest section in the Codelab and the most important one. In this section we will learn what Jetpack Window Manager is and how you can use it in order to handle the new capabilities foldable provide and take into consideration to develop a fantastic foldable experience for your users.

You will learn how to initialize and use Window Manager, such as to retrieve the state (posture) of the device, the type of the device (hinge or hingeless device), and more.

Screenshot of Window Manager API documentation
Figure 2: A preview of some of the Window Manager’s key-features.

We will also build a very basic app where we will learn how to use Window Manager, and how to use the information it provides in order to adjust an app designed originally for single screen devices to provide a better experience on a foldable device.

Enhance your app with minor and simple adjustments

In the last section of the Codelab, we will see how we can implement a few small adjustments in our apps so they shine when using on foldable devices. We will show how to:

  • Add drag and drop functionality to your app. We will use the existing API to develop a couple of basic apps that implement that functionality so we can see how drag & drop works when using apps side-by-side.
  • Launch an activity to the adjacent window. We will see how to launch a new activity to the adjacent window that can be the adjacent screen on Surface Duo or the adjacent window on devices that use Multi-Window.

Where is the code?

As the perfect companion to the Codelab, we have also created a GitHub Codelab code repository that includes all the samples we are using in this Codelab so you can build and learn directly through the code. To get started, go to the repo on GitHub, clone the repository, and start playing and learning!

Wrapping up

When you finish the Codelab, you will have learned:

  • What foldable devices are, and the differences between the various types available.
  • Jetpack Window Manager: What it provides and how to use it.
  • How to enhance your apps for foldable devices by just making a few minor changes.

This Codelab will give you a solid foundation on how to work with foldable devices so you can create delightful new experiences for your users.

Are you also a Xamarin/.NET developer? We also have a Xamarin Microsoft Learn module where you can learn how to build dual-screen apps with Xamarin.Forms using the TwoPaneView.

Resources and feedback

Check out the Surface Duo developer documentation and past blog posts for links and details on all our samples. You can also find them summarized in the Microsoft Samples Browser, or explore on GitHub.

If you have any questions, or would like to tell us about your apps, use the feedback forum or message us on Twitter @surfaceduodev.

You can also chat with us on Twitch on Friday, March 11th at 11am PST, where you can ask questions about the Codelab or any other aspect of developing dual-screen apps for the Surface Duo!

Author

Cesar Valiente
Software Engineer

#SurfaceDuo DevX @Microsoft 🚀 @urjc (uni) alumni 👨‍🎓 #Android #community #FLOSS Berlin ✈️ Madrid

0 comments

Discussion are closed.