Using predefined layouts

When you create a UI, you must define where its elements appear and how big they are. Jetpack Compose provides a couple of basic layouts, which arrange their content along one main axis. There are three axes to consider:

• Horizontal
• Vertical
• Stacked

Each axis is represented by a layout. Row() arranges its content horizontally, while Column() does so vertically. Box() and BoxWithConstraints() stack their contents on top of each other. By combining these axes-orientated building blocks, you can create great-looking UIs easily.

Combining basic building blocks

The following PredefinedLayoutsDemo sample app shows three checkboxes that toggle a red, a green, and a blue rectangle, respectively. The boxes appear only if the corresponding checkbox is checked:

Figure 4.1 – Sample PredefinedLayoutsDemo app

Let’s see how this is done. First, I will show you how to create a checkbox with an accompanying...