Creative and complex user interfaces with Compose UI
summary
Recreates a Persona 5–style messaging UI in Jetpack Compose: custom trapezoid speech bubbles drawn at runtime with genericShape, avatars masked and layered with drawOutline, a recycled LazyColumn plus a background zigzag connector line that stays in sync with scroll and overscroll using drawWithCache and drawIntoCanvas, animations driven by Animatable (staggered timing including a 160ms jump), custom layout to anchor text to avatar, and finished code available on GitHub — the demo works on device and matches the game's motion and clipping closely.
AI-written summary · about
chapters (24)
- 0:00Intro
- 0:26Context
- 1:37Rectangles
- 2:24Flat Design
- 3:58Boring
- 4:33Time
- 4:43Keynote
- 5:32Winamp
- 6:53Persona
- 7:40Rebellion
- 8:30Message UI
- 9:46Background
- 10:40Text Boxes
- 16:00Avatar
- 17:38Text Box
- 22:43Lines
- 27:47Lazy Column
- 29:08Overlap Height
- 30:37Draw Connecting Line
- 32:00Animations
- 33:48Graphics Layers
- 34:25Animating Lines
- 35:44Final Result
- 37:40Outro
related talks
32mJetpack Compose for Games & Animations
37mJetpack Compose for Games & Animations
36m90s Website … in 2023 on mobile in Compose … for science
36mCreative Coding with Compose
36mBuild The Million-Dollar Animation
31mComposing in your Canvas!
38m90s Website … in 2023 on mobile in Compose … for science
38mBringing Your Canvas Creations to Life with Jetpack Compose