Jetpack Compose

Learn about Compose, a modern toolkit for building native Android UI.

 

Tutorial: Jetpack Compose basics

Article Optional

Learn the basics of Compose and how to build a simple UI component with declarative functions. Understand composable functions, basic layouts, and how Material design, lists and animations work in Compose.

Jetpack Compose overview

Video Optional

Get an overview of Jetpack Compose, learn what a declarative UI toolkit is, and how to use Compose to build beautiful UIs.

Thinking in Compose

Article Optional

Learn how the declarative approach of Compose is different from the view-based approach you may have used in the past.

Jetpack Compose basics

Codelab

Go hands-on and learn the fundamentals of declarative UI, working with state, layouts, and theming. You'll see what composables and modifiers are, how to work with basic UI elements such as Row and Column, and how to give state to your app.

Migrating to Jetpack Compose

Codelab

Walk through a practical migration of a View-based app to Jetpack Compose to understand how to incrementally adopt Compose, and explore the implications for your architecture and testing.

Basic layouts in Compose

Codelab

Learn how layouts work in Jetpack Compose, including: built-in layouts, modifiers, and how to build your own custom layout.

Lazy layouts in Compose

Video Optional

Learn how to make scrolling lists in Compose and why it's simpler than using RecyclerView. Dig into why nesting scrolling lists aren't allowed and how to do it differently, why items should never be 0 pixel sized, and why providing unique keys are important and how item animations work. Last, discover how to display Grids, use custom layout managers, and understand how to improve performance optimization to make scrolling faster.

Jetpack Compose theming

Codelab

Go hands-on with Material Design in Compose to understand how to theme an app’s colors, typography, and shapes, and support light and dark themes.

Jetpack Compose Animation

Codelab

Learn how to use Compose Animation APIs. We start with the simplest value animation and learn other APIs through some common animation patterns. We also take a look at more advanced topics, such as animation customizations and animations with touch gestures.

State in Jetpack Compose

Codelab

Learn the core concepts related to using State in Jetpack Compose, to build rich and interactive Android apps.

Advanced state and side effects in Jetpack Compose

Codelab

Learn advanced concepts related to state and side effects APIs in Jetpack Compose. Learn how to create a state holder for complex stateful composables, create coroutines and call suspend functions from Compose code, and trigger side effects for different use cases.

Jetpack Compose Navigation

Codelab

Learn how to use the Jetpack Navigation library in Compose, navigate within your application, navigate with arguments, support deep-links, and test your navigation.

Common Performance Gotchas in Jetpack Compose

Video Optional

Jetpack Compose can feel like magic, but what do you do when the magic isn’t as performant as you want? This talk will go over best practices in Jetpack Compose with regards to performance, common mistakes, and how to avoid them.

Testing in Jetpack Compose

Codelab

Learn about testing Jetpack Compose UIs. Write your first tests, and learn about testing in isolation, debugging tests, the semantics tree, and test synchronization.

Accessibility in Jetpack Compose

Codelab

Learn how you can improve your app's usability, particularly for users with disabilities. Increase touch target sizes, add content descriptions, create custom actions, and more.

Jetpack Compose quiz

Test your knowledge of Compose and earn your Jetpack Compose badge.