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...