
Android UI Development with Jetpack Compose
By :

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