Mobile development

Stage 2 · Lesson 7 of 10

LazyColumn, LazyRow and grids

Jetpack Compose UI

and LazyRow build only the items on screen, and LazyVerticalGrid lays them out in . So a list of 10,000 contacts costs about the same as a list of 20. Instead of passing children, you describe the items: items(contacts, key = { it.id }) { contact -> ContactRow(contact) }.

Stable keys keep the scroll position and each item's state correct when the list changes. contentType helps reuse rows of different kinds. Use contentPadding and Arrangement.spacedBy for spacing, and stickyHeader for grouped lists.

Common trapnesting a LazyColumn inside a vertically scrolling Column, which crashes because the lazy list is given infinite height.

A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock

Resources for this stage

Start with

Practise

  • Use a free challenge's mobile design image as the spec for a native screen

Keep handy

  • Spacing, type scale, colour and component specs your screens should follow

Mark this stage as not done?