Custom layouts and graphics in Compose
summary
Builds a working Sleep Tracker called JetLagged in 20 minutes using Jetpack Compose with a real custom graph layout and animated graphics. Uses a custom layout that measures children, passes per-bar duration/offset via ParentDataModifier, and places synchronized day labels and bars. Draws bars with DrawScope, text-measures emojis, composes segmented paths and strokes, animates expansion via transitions, caches brushes with drawWithCache, and runs an animated GPU shader compiled as a RuntimeShader in AGSL.
AI-written summary · about
chapters (8)
- 0:00Intro
- 0:25Custom layouts
- 2:30Define the input
- 3:25Measure all components
- 8:00Placement
- 10:35Drawing
- 12:28Draw Text
- 14:02Increase Height
related talks
32mThinking outside the Box: Custom Compose layouts
36mPractical implementations of powerful UI expressions using Jetpack Compose
41mCreating a Custom Compose Layout, Step-By-Step
28mBuilding graphs in Jetpack Compose with Canvas
42mCreating a Custom Compose Layout, Step-by-Step
40mComposing Creatively with Custom Layouts
41mCompose by Example
39mJetpack Compose: Drawing without pain and recomposition