Jetpack WindowManager Library

Support foldable devices with Jetpack WindowManager

Photo by Onur Binay on Unsplash

What is Jetpack WindowManager?

Jetpack WindowManager is a new feature of Jetpack that allows Android apps to support foldable devices, such as the Samsung Galaxy Fold, by creating a new view hierarchy with the folding view as its root component.

Support for foldable devices begins with responsive design. For XML-based layouts, implement the responsive design with ConstraintLayout, you may handle different layouts and styles for different states by using different resources (e.g. layout-fold and layout-unfold); for Compose, BoxWithConstraints.

Jetpack WindowManager supports both horizontal and vertical folding views. In addition to supporting multiple levels of folding views, you can also control whether each level is visible or not using a setVisibility() method on your custom view hierarchy. This allows you to support different levels of visibility for each folded state of your app’s UI.

There are two types of foldable devices:

1. Single-screen foldable devices, with one screen that can be folded. Users can run multiple apps on the same screen at the same time using multi-window mode.
2. Dual-screen foldable devices, with two screens, joined by a hinge. These devices can be folded as well, but they have two different logical display regions.

Foldable devices support different postures:

1. Spanning, the app is spanned (displayed) across the whole display region.
2. Folded, a logical split between the part of the screen that’s flat and the part that’s tilted towards you, and tent mode.

Let’s Get Started with the basics!

To support foldable devices with Jetpack WindowManager in an Android app, you will need to make use of the androidx.window.window class and its associated methods. Here is an example of how to do this:

• First, import the packages in your app's main activity using the dependencyimplement androidx.window.window:$windowmanager_version

import androidx.window.layout.WindowInfoTracker
import androidx.window.layout.WindowLayoutInfo
import androidx.window.layout.WindowMetricsCalculator

• Next, create an instance of the WindowInfoTracker class in the onCreate() method of your main activity.

windowInfoTracker = WindowInfoTracker.getOrCreate(this@MainActivity)

• WindowInfoTracker is a class that is used to track and manage information about the windows that are currently open on the device. This class is responsible for maintaining a list of all open windows, including their size, position, and other properties. It also provides methods for manipulating and interacting with these windows, such as resizing, moving, and closing them.
  Here we will update the UI once windowLayoutInfo collect the value.

windowInfoTracker.windowLayoutInfo(this@MainActivity)
                    .collect { value ->
                        updateUI(value)
                    }

• Next, add a function to determine the appropriate layout and size based on the device’s screen size and resolution. WindowMetricsCalculator class is used to calculate and manage the metrics for a window, such as its size, position, and visibility.

private fun obtainWindowMetrics() {
        val wmc = WindowMetricsCalculator.getOrCreate()
        val currentWM = wmc.computeCurrentWindowMetrics(this).bounds.flattenToString()
        val maximumWM = wmc.computeMaximumWindowMetrics(this).bounds.flattenToString()
        binding.windowMetrics.text =
            "CurrentWindowMetrics: ${currentWM}\nMaximumWindowMetrics: ${maximumWM}"
    }

• Now, update the UI according to WindowLayoutInfo’s displayFeature, If the screen is spanned or folded.

private fun updateUI(newLayoutInfo: WindowLayoutInfo) {
        binding.layoutChange.text = newLayoutInfo.toString()
        if (newLayoutInfo.displayFeatures.isNotEmpty()) {
            binding.configurationChanged.text = "Spanned across displays"
        } else {
            binding.configurationChanged.text = "One logic/physical display - unspanned"
        }
    }

And it’s done💥 You have successfully given support for foldable devices in your app now!
Find the source code here.

Conclusion

Jetpack WindowManager helps us with new form factor devices such as foldable.

It’s also important to keep in mind that foldable devices are still relatively new and that it’s still an experimental feature, so you should test your app thoroughly on foldable devices to ensure that it works as expected.

That’s a wrap for now! Many more to come 💥
I hope you find this blog helpful.