How Jetpack Compose Renders Your UI

Phase-by-phase breakdown of the Compose UI pipeline.

To understand Jetpack Compose performance, you must first understand how it renders UI. Compose breaks rendering into three phases.

I’m Amit Shekhar from Outcome School, where I teach AI and Machine Learning, and Android.

Let’s get started.

Jetpack Compose Phases

Jetpack Compose UI rendering goes through three main phases every time the UI needs to be (re)drawn.

• Composition

• Layout

• Drawing

Composition → Layout → Drawing : What → Where → How

• Composition: What

• Layout: Where

• Drawing: How

Composition Phase: What to Show

• Composable functions are called, and their parameters are read

• The UI tree is created or updated

• State reads are tracked for recomposition

• Only the composables that need to update are recomposed

Layout Phase: Where to Show

• Measuring each composable to determine its size requirements

• Positioning composables relative to their parent and siblings

• Calculating the final bounds and coordinates for each element

• Following Compose's single-pass layout algorithm (measure children, then place them)

Drawing Phase: How to Show

• Canvas operations are executed to paint the UI elements

• Colors, shapes, text, and images are rendered

• Effects like shadows, borders, and backgrounds are applied

• The final visual result appears on screen

Note:

• Sequential execution: They always run in order - composition, then layout, then drawing.

• Independent skipping: A phase can be skipped if no changes are needed. For example, if only colors change, composition and drawing run but layout is skipped.

• Cascading effects: Changes in an earlier phase trigger later phases, but not vice versa.

I teach these types of concepts at Outcome School and help you become a better software engineer.

Thanks

Amit Shekhar

Founder, Outcome School