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 axis-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 – The sample PredefinedLayoutsDemo app
Let's see how this is done. First, I will show you how to create a checkbox with an accompanying...