Laying Out UI Elements in Compose
In the previous chapters, you learned how to build simple UIs. Although they consisted of just a few UI elements, they needed to arrange their buttons, text fields, and sliders in a particular order, direction, or hierarchy. Layouts position and size their content in a way specific to this layout, such as horizontally (Row()
) or vertically (Column()
). This chapter explores layouts in greater detail.
In this chapter, we will cover the following topics:
- Using predefined layouts
- Understanding the single measure pass
- Creating custom layouts
We will start by exploring the predefined layouts of Row()
, Column()
, and Box()
. You will learn how to combine them to create beautiful UIs. Next, I’ll introduce you to ConstraintLayout
. It places composables that are relative to others on the screen and uses attributes to flatten the UI element hierarchy. This is an alternative to nesting Row()
, Column()
, and Box()
.
The second main...