Mobile development

Stage 2 · Lesson 1 of 10

Composable functions

Jetpack Compose UI

In , a piece of UI is a function marked with @Composable. It draws UI instead of returning a value. You call inside other composables to build a tree.

So a ProductCard composable is an image, some text and a Row, and a list screen calls it for each product. This is declarative UI. When the data a composable reads changes, Compose calls it again.

That is called , and only the parts that read the changed data update. Composables should be fast and free of side effects (work that changes something outside the function), because they may run many times.

Common trapdoing work like a network call or writing to a variable inside a composable body.

A question to check yourself, an AI practice session and 2 cheat sheet entries 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?