Developing for Different Form Factors

This book shows you how to write beautiful, fast, and maintainable Jetpack Compose apps. In Chapters 1 to 3, I introduced you to the fundamentals of Jetpack Compose, and explained the core techniques and principles, as well as important interfaces, classes, packages, and, of course, composable functions. Chapters 4 to 7 focused on building Compose user interfaces (UIs). You learned how to manage the state and navigate to different screens. We also explored the ViewModel and Repository patterns. Chapters 8 to 10 covered advanced topics such as animation, interoperability, testing, and debugging.

You hopefully enjoyed digging through all of this and may thus be asking yourself what’s left to tackle. The remaining two chapters show you how to bring Compose UIs to devices other than smartphones. We’ll start with foldables and tablets. The final chapter helps you leverage your Jetpack Compose skills beyond Android. Wouldn’t it...

Technical requirements

Please refer to the Technical requirements section in Chapter 1, Building Your First Compose App, for information about how to install and set up Android Studio, as well as how to get the sample apps. This chapter covers the WindowSizeClassDemo sample.

Understanding different form factors

Android has always been great at supporting different screen sizes, pixel densities, and aspect ratios. These criteria contribute to two terms, form factor and device class. The latter assigns hardware to broad categories, such as smartphones, tablets, foldables, TVs, and watches. Smartwatches have tiny screens. We need to consider carefully what content should be displayed. Television sets feature huge screens but are watched from a greater distance and are operated with remote controls; we need to make sure content remains readable and easily navigable.

Smartphones usually have smaller screens than foldables, which in turn have displays smaller than or like tablets. All are held in our hands and can be rotated. That’s where the form factor becomes important: it describes the size, shape, and natural orientation (the way we hold it most of the time) of a device. Smartphones typically are more tall than wide, resembling a portrait. Tablets...

Using Jetpack WindowManager

In the Understanding different form factors section, I introduced you to the WindowSizeClassDemo sample. The app evolved from always showing one layout (a vertically scrolling list) to utilizing an adaptive layout based on window size classes: depending on the width of the app window, either a list or a two- or three-column grid will be shown. This works great on smartphones and tablets. But how about foldable devices? Figure 11.6 shows the sample on an unfolded Microsoft Surface Duo.

Figure 11.6 – WindowSizeClassDemo running on an unfolded Surface Duo

Foldable devices feature a hinge or fold, which allows the user to switch between two display area sizes. Often, this means it is either smartphone-sized or tablet-sized. However, there are also products (so-called flip phones) that need to be unfolded to be fully operable. Their screen size resembles smartphones. Consequently, the presence of a hinge does not warrant a...

Organizing the screen content

In the previous sections, I explained that to make your app look great on a wide range of devices, you should build its layout on top of Window Size Classes and foldable-related events emitted by Jetpack WindowManager. But what does layout refer to? Figure 11.8 shows the ComposeUnitConverter sample from Chapters 6 and 7.

Figure 11.8 – The ComposeUnitConverter sample

There appear to be three areas: the content, bottom navigation, and the top app bar. However, Material You (the design language and design system used on Android) puts the latter two in one bucket, navigation. Therefore, inside the app window, there are only two major blocks or areas: the content (sometimes referred to as body) and the navigation. How these blocks are laid out is defined in the Material You documentation (https://m3.material.io/foundations/layout/understanding-layout/overview). For example, bottom navigation should be used only if the horizontal...

Summary

In this chapter, you learned how to use Window Size Classes, Jetpack WindowManager, and Canonical Layouts to make sure your app looks great on smartphones, tablets, and foldable devices. First, we investigated how screen sizes, form factors, and hardware features influence app layout. Then, I explained how Window Size Classes help structure your UI, and how you can compute them during runtime.

The second main section, Using Jetpack WindowManager, explained why relying solely on Window Size Classes is not enough to create awesome layouts for tablets and foldables. You learned how to query hardware features such as hinge orientation and device posture and how this helps fine-tune your UI.

Finally, the Organizing the screen content section introduced a Material Design concept called Canonical Layouts. You learned which Canonical Layouts have been defined so far and in which scenarios they work best.

In the final chapter, Bringing Your Compose UI to Different Platforms...

Exercise

The WindowSizeClass sample makes a few assumptions about hinges and folds. Please modify the app so that it uses WindowMetricsCalculator to obtain the display size and then checks whether the areas to the left and the right of the hinge are the same size.