In July 2024, we launched a brand new YouTube series called “Compose Tips for Delightful UI”. The series set out to give short, actionable and technical tips for working with Jetpack Compose and share small examples of APIs that are not as widely known.
We aimed to show how you can achieve a premium look and feel of your app, by using the powers and strengths of Compose, and cover the most important (but low cost) UI concepts to keep in mind when designing and developing an app.
With the end of 2024 approaching, we ended our Season 1 which covered a variety of different, delightful topics that will make your UIs shine:
Edge-to-edge and insets
Learn how to easily make your Android apps go edge-to-edge using Compose, ensuring it has a modern, delightful UI. Follow three simple steps to safely handle insets, to prevent content from overlapping system UI elements:
Pager
Easily add the Pager
composable to your apps to get out of the box, delightful gestures on paged content. This episode covers how to use the Pager
composable, configuration parameters such as controlling the fling distance, and tying into the PagerState
to create animations:
Nested scrolling
Scrolling can be a valuable tool for making fun and delightful apps! In this episode, learn how to use nested scrolling in Compose, for a seemingly complex coordination between multiple components on a single scroll:
Brush
Brushes in Jetpack Compose are a fundamental part as to how content is drawn on screen. Understanding the different types of brushes you can use can help make your app stand out from the crowd. In this episode, we dive into solid color brushes, different gradient brushes, as well as various options for gradient brushes:
Shaders
In addition to Brushes, in Compose there is another delightful mechanism for painting your pixels and rendering graphics on screen, called Shaders. In this episode, we dive into the details of using shaders in Jetpack Compose, combined with render effects and how they can be applied to your whole UI:
Flow layouts
FlowRow
and FlowColumn
are similar to Row
and Column
layouts, however the items will flow into the next row or column when there is no more space in the area. In this video, Flow layouts are covered along with how to use them and tricks for using them to work on different window sizes:
Lazy grids
Lists are vital to the Android UI — we use columns and rows everywhere in our apps! This episode shows how grids can sometimes serve as a better alternative, to make these layouts more dynamic and delightful — especially when supporting different window sizes across devices:
AnchoredDraggable
In this episode, we cover Compose AnchoredDraggable
, which is a Jetpack Compose API that lets you build components that can be dragged between anchor points and settles an anchor point at the end of the gesture. AnchoredDraggable
is often used to build components like SwipeToDismiss
, Navigation Drawers, Bottom Sheets and more:
Graphics layers
Learn all about Graphics Layers in Compose and how you can use the APIs to composite graphics layers together to create interesting visual effects. This episode covers how to use blend modes to blend between two layers, and how to set the saturation of a whole layer:
Clipping and masking
Clipping or masking parts of your content is a way to create delightful UI effects, and is a common need when working with custom UI components. Clipping is the process of removing parts of your content based on a set path or shape, whereas masking is similar, but allows for semi-transparent pixels too:
You can check out the full YouTube playlist here.
We are incredibly grateful for your feedback and suggestions for what else you’d like to see us cover, so please keep it coming.
See you soon for Season 2 in 2025 — happy composing!