Instruction

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Layouts in Compose

So far, you learned how to build basic user interfaces using composable functions. The next step is to build a more complex UI by arranging smaller composables and positioning them in a specific way. In XML, you use ViewGroup widgets like LinearLayout, RelativeLayout, or FrameLayout to measure and position children on the screen based on rules.

Exploring Basic Layouts in Compose

Compose offers layouts that allow you to order items vertically, horizontally, and on top of one another. Compose also offers more complex layouts that handle UI elements like navigation drawers, etc. Internally, all these layouts use the measurePolicy property to position items.

Using Row

Row is the LinearLayout counterpart that handles stacking items horizontally. Here’s a look at the signature for Row.

Using Column

Column is the LinearLayout counterpart that handles stacking items vertically. Here’s a look at the signature for Column:

Using Box

Box is the FrameLayout counterpart and handles stacking items on top of one another relative to the parent. Box is helpful for cases where you need to show overlapping items such as dialogs or cards.
See forum comments
Download course materials from Github
Previous: Introduction Next: Demo