Composing in your Canvas!
summary
Shows how Jetpack Compose canvas draws real UIs using concrete APIs: drawLine, drawCircle, drawPath and drawArc to build a clickable circular progress indicator that maps a 0–100 progress value to a sweep angle via a 360/100 scale factor, places a draggable thumb by converting atan2 radians to degrees, and reads pointerInput detectTapGestures to get offsets. Also shows using drawContext.nativeCanvas to paint text and recommends scaling dimensions by canvas size; examples live in the repo.
AI-written summary · about
chapters (13)
- 0:00Introduction and agenda
- 3:13Why use Canvas
- 6:53Canvas basics in Jetpack Compose
- 8:38Drawing lines and circles
- 11:50Paths and shapes
- 13:41Elementary math for progress bars
- 16:13Circular progress bar design
- 19:41Adding interactivity with gestures
- 24:27Scaling designs across devices
- 26:56Accessing native Canvas
- 27:38Drawing text on Canvas
- 29:04When not to use Canvas
- 30:50Closing and resources
related talks
43mInteracting with Composable Canvas
28mBuilding graphs in Jetpack Compose with Canvas
36mPractical implementations of powerful UI expressions using Jetpack Compose
37mJetpack Compose for Games & Animations
38mBringing Your Canvas Creations to Life with Jetpack Compose
36mJetpack Compose: Drawing without pain and recomposition
38mImplementing That Common UI in Jetpack Compose: X Ways
32mJetpack Compose for Games & Animations