Android Canvas in Depth

As developers we always thrive to deliver the best experience in our apps, yet we've all been in situations where the Android UI views were not enough for our needs.

In this talk, we'll dive into custom drawing with Android Canvas, along with what happens behind the scenes. Showcasing some of Nik's latest work we will discover different manipulation techniques with the canvas and how it can be animated by the user's microphone input. This includes tips to remember when going custom, the pros and cons of custom drawing and how we can profile the GPU to optimise our apps.

Transcript

1. Busuu 2019 Busuu 2019 Android Canvas in Depth
2. Busuu 2019 Busuu 2019 Busuu - language learning community 2
3. Busuu 2019 3 Android dev for 5 years Love art Love animations and drawing Let’s talk Canvas and optimisation Nik Shevchenko
4. Busuu 2019 4 Canvas is a the main class for drawing 2D graphics Part of android.graphics collection What Text, Lines, Ovals, Arcs, Bitmaps…. Where x, y coordinates How Paint object What is a Canvas Bitmap Canvas Button
5. Busuu 2019 5 What is a Canvas Every View has a canvas fun onDraw(Canvas canvas) To redraw - invalidate() Rendering commands stored in DisplayList Sent to GPU for OpenGL to consume Bitmap Canvas Button
6. Busuu 2019 6 What is a Canvas Every View has a canvas fun onDraw(Canvas canvas) To redraw - invalidate() Rendering commands stored in DisplayList Sent to GPU for OpenGL to consume CPU GPU Bitmap Canvas Button
7. Busuu 2019 7 onDraw -> Dispaly List Drawn out: how Android renders (Google I/O '18) https://www.youtube.com/watch?v=zdQRIYOST64
8. Busuu 2019 8
9. Busuu 2019 9 Layouts Quick but not always calls propagate in the hierarchy Prompt to overdraw Double Taxation
10. Busuu 2019 10 Calls propagate in the hierarchy Layout Inspector Flatten views - Constraint Layout Lint
11. Busuu 2019 11 Prompt to overdraw Painter's algorithm redrawing pixels Turn on in the settings Remove backgrounds Reducing transparency
12. Busuu 2019 12 Double Taxation 2x layout-and-measure RelativeLayout LinearLayout Horizontal / max height Root element or a ViewHolder
13. Busuu 2019 13 calls propagate in the hierarchy Prompt to overdraw Double Taxation Layouts Solutions - Tools Lint Layout inspector GPU overdraw settings Profile GPU Rendering Systrace
14. Busuu 2019 14 Profile GPU Profiling
15. Busuu 2019 15 Profile GPU Profiling
16. Busuu 2019 16 Profile GPU Profiling
17. Busuu 2019 17 Systrace App in Android tools Android 10+ Perfetto UI adb pull /data/local/traces/
18. Busuu 2019 18 Systrace example
19. Busuu 2019 19 Systrace example
20. Busuu 2019 20 Systrace example
21. Busuu 2019 21 Systrace example
22. Busuu 2019 22 Systrace example
23. Busuu 2019 23 What if... Canvas inside Viewholder
24. Busuu 2019 24 Profile GPU Profiling
25. Busuu 2019 25 3x
26. Busuu 2019 26 Profile GPU Profiling Constraint Layout performance https://android.jlelse.eu/constraint-layout-performance-870e5f23 8100
27. Busuu 2019 27 3x Constraint Layout
28. Busuu 2019 28 Canvas in Real life Gmail Messenger
29. Busuu 2019 29 Docs Great descriptions https://developer.android.com/topic/performance/rendering/optimizing-view-hierarchies https://developer.android.com/topic/performance/rendering/overdraw https://developer.android.com/topic/performance/rendering/profile-gpu
30. Busuu 2019 Busuu 2019 Speech Recognition Study 30
31. Busuu 2019 31 Speech Recognition Animation Nothing similar out there Randomised waves from a circle Based on mic input 31
32. Busuu 2019 32 1. Calculate random arcs around the circle 2. Random heights for each arcs 3. Draw them 4. Animate them up and down 5. Clear & Repeat The steps
33. Busuu 2019 33 1. Calculate random Arcs 2. Random heights for each arcs heights = angles.map { random(20) * voiceAmplitude } voiceAmplitude = [0 - 1]
34. Busuu 2019 34 Draw Arcs private val path = Path() for (i in 0 until angles.size) { path.reset() // calculate oval path.addOval(oval, Path.Direction.CW) rotationAngle = currentAngle /2 + futureAngle /2 canvas.rotate(rotationAngle, center.x, center.y) canvas.drawPath(path, wavePaint) }
35. Busuu 2019 35 Draw Arcs private val path = Path() for (i in 0 until angles.size) { path.reset() // calculate oval path.addOval(oval, Path.Direction.CW) rotationAngle = currentAngle /2 + futureAngle /2 canvas.rotate(rotationAngle, center.x, center.y) canvas.drawPath(path, wavePaint) }
36. Busuu 2019 36 Draw Arcs + randomness Arcs -> Ovals Paint(ANTI_ALIAS_FLAG).apply { setStyle(Paint.Style.STROKE) setStyle(Paint.Style.FILL)
37. Busuu 2019 37 Draw 3 layers of Arcs
38. Busuu 2019 38 Ovals size Left, top, right, bottom
39. Busuu 2019 39 Get coordinates with Math.sin
40. Busuu 2019 40 Where are we... + Random Arcs + Random height for each arc + White circle on top + 3 layers with different + Animation
41. Busuu 2019 41 Add animation
42. Busuu 2019 42 Iterations “Always take into account design re-iterations. They usually pay off” Cit. Nik
43. Busuu 2019 43 Iterations + Add a “Dominant” and 2 subdominants
44. Busuu 2019 44 Iterations + Add a “Dominant” and 2 subdominants + Add microphone
45. Busuu 2019 45 Iterations + Add a “Dominant” and 2 subdominants + Add microphone
46. Busuu 2019 46 Iterations + Add a “Dominant” and 2 subdominants + Add microphone + Add Alpha and gradients
47. Busuu 2019 47 Iterations + Add a “Dominant” and 2 subdominants + Add microphone + Add Alpha and gradients + Slower and darker when moving
48. Busuu 2019 48 Iterations + Add a “Dominant” and 2 subdominants + Add microphone + Add Alpha and gradients + Slower and darker when moving Ship it!
49. Busuu 2019 49 How does it perform?
50. Busuu 2019 50 To remember Don’t allocate memory in onDraw() Preview in AS works after compiling - mock with isInEditMode Accessibility - setContentDescription() Don’t Canvas everything - business / performance needs
51. Busuu 2019 Busuu 2019 51 Thanks for listening! Embrace custom drawing! Make it unique. Embrace open source! https://github.com/nshevchenko/SpeechWaves Come work with us - busuu.com/jobs Have a great evening! Nik