Layouts, theming, and animation

Implement more advanced layouts and add movement and style to your app. You’ll learn about the various Compose Animation APIs, how to implement Material Design 3, how to use custom layouts to implement complex designs, and how you can use lazy layouts to create performant UIs.

 

Fundamentals of Compose Layouts and Modifiers

Video

Learn the fundamentals of Layouts and Modifiers: how Layouts and Modifiers work together, what out-of-the-box APIs are offered, and how to style your UI.

Lazy layouts

Video

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.

Material Design System

Video

Learn about Material You dynamic color, theming and components in Compose.

Theme your app with Material Design 3

Codelab

In this codelab you will learn how to use Jetpack Compose's theming APIs to style your application. We'll see how to customize colors, shapes and typography so that they're used consistently throughout your application and supporting light & dark theme and dynamic theming.

Styling text

Video

Learn how to use Material APIs to configure typography, including using downloadable fonts and variable fonts.

5 quick animations to make your app stand out

Video

Learn 5 quick animations to make your app come to life in just a few minutes.

Introduction to drawing in Compose

Video

Learn all about how to draw something custom in Compose.

Animating elements

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.

Custom layouts and graphics

Video Optional

Compose offers a variety of out-of-the-box solutions to quickly and easily build screens from scratch. But what happens when you need to go a step beyond and go fully custom? Learn more advanced layout concepts to build your own custom layout to take your design implementations to the next level.

Constraints and modifier order

Video Optional

Modifiers in Compose can be chained and the order in which we do so matters. But how exactly does it matter? Learn to reason about modifier chaining and how it influences the sizes of composables.

Quiz

Test what you’ve learned and earn your Layouts and animation badge.