Framing the Canvas (November 2014)

[Presented at Berlin DevFest 2014 and Droidcon NL 2014]

This talk will guide you through a topic that is often ignored: the Canvas API. Even if there's only scarce documentation for it, the Canvas API is at the heart of everything that shows a UI on Android. You'll need to tame this powerful and mysterious creature if you want to create great custom views and brilliant, lightweight UIs for your apps.

What is a Canvas? How do you Paint? Can you draw Paths? What is Skia, and who invited it anyway? What actually happens during a drawing pass? What are Shaders? What are Filters? Is it true that text is basically impossible to measure correctly? What shape does a Shape have if noone's painting it? These and other questions will get an answer during this session. Well, some of them will not, probably.

Connect the dots in the spotty documentation the Android team has assembled, and become a true pixel pusher!

Transcript

1. Framing the Canvas Get your Paint together, follow the Path and get to master Shaders
2. Sebastiano Poggi Insult/stalk me on: @seebrock3r +SebastianoPoggi rock3r Android Software Craftsman in London
3. CC-BY-NC Joe Benjamin on Flickr
4. Paint on the Canvas CC-BY-NC-ND anna gutermuth on Flickr
5. Painting on the Canvas
6. • Base for any Android UI • Drawing on a buffer • Hardware or Software • API: Canvas, Paint, … Canvas CC-BY Cara St.Hilaire on Flickr
7. WELL GOOGLE, IF WE COULD HAVE SOME DOCUMENTATION EVERY NOW AND THEN YEAH, THAT’D BE GREAT
8. We should love Skia • Underneath Canvas • Native code • 2D graphics rendering toolkit • Basic painting • Advanced features walcor on DeviantArt
9. • Text is a pain • Weird quirks • E.g., no proper arcs • No documentation …but Skia kinda sucks Eugenio Marletti on Medium
10. Google • Draw using HWUI • Subset of Skia • Honeycomb and later • With limitations (of course) • Revert to software buffer OK, Canvas is still cool
11. Unsupported ops on HW Google
12. Good read Hardware Acceleration on Android Developers website http://goo.gl/HgV8D
13. Using the Canvas • Transforms using matrices and Cameras • Views must use it on the UI thread • Or go with a SurfaceView • Canvas is stateful
14. State of the art 1.Call save() — or saveToCount() 2.Do your stuff 3.Restore original state: restore() — or restoreToCount()
15. Seb’s top tip
16. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state);
17. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas
18. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas
19. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas
20. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer
21. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer
22. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer PROFIT!
23. Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas PROFIT!
24. Surfacing ideas CC-BY-NC-SA arbyreed on Flickr
25. Painting on the Canvas
26. Surfaces and flingers • Draw on surfaces • Buffers • SurfaceFlinger • SW or HW backing CC-BY-NC-SA Nicolas Hoizey on Flickr
27. Good read AOSP Graphics on AOSP Source website http://goo.gl/i5iVwH
28. Layers • Offscreen buffers • Every Canvas has one • Can be blitted with a Paint • Different types of layer CC-BY-NC-SA Doug88888 on Flickr
29. View Layer types (3.0+) • NONE: no buffer • SOFTWARE: bitmap buffer • HARDWARE: HW-backed texture • Can improve performances (e.g., animations)
30. CC-BY Brandon Morse on Flickr Pushing pixels
31. Pushing pixels
32. Canvas API Paint Shape Path Matrix Color Drawable Bitmap Camera Movie NinePatch Picture Interpolator SurfaceTexture Typeface
33. Drawable Canvas API Shape Path Color Bitmap Camera Movie Picture Interpolator SurfaceTexture Typeface Matrix NinePatch Paint
34. Paint it (black) • Knows how to draw the pixels • All drawing calls need a Paint • Handles text as well • TextPaint subclass CC-BY-NC-ND Mark Chadwick on Flickr
35. Skia pipeline Adapted from Laurence Gonsalves’ post on Xenomachina
36. Good read Android's 2D Canvas Rendering Pipeline by Laurence Gonsalves on Xenomachina http://goo.gl/4W5R0Z
37. Effective painting • Steps have two phases each • “Two-pass” strategy • Effects modify steps output • Second passes default to identity CC-BY-NC-SA ClintJCL on Flickr
38. Mask filters • Rasterization phase • Affect alpha mask • Not HW accelerated • Blur and Emboss P S T R
39. Good read Blurring Images (series) by Mark Allison on Styling Android http://goo.gl/zZVs2V
40. Shaders • Shading phase • Similar to OpenGL shaders • Not programmable • TileMode CC-BY-NC-SA Andreas Köberle on Flickr P S T R
41. A Shady bunch Shader BitmapShader ComposeShader *Gradient Use a Bitmap as texture when painting Combine two different shaders and mix them with a Xfermode Paint using a Linear, Radial or Sweep gradient P S T R
42. Color Filters • Adjust colours after Shaders • Uniform transformation for all pixels ColorFilter ColorMatrixColorFilter LightingColorFilter PorterDuffColorFilter Apply a 4x5 colour matrix transform Multiply SRC colours by a colour, and then add a second colour Apply a colour to the SRC colour using a Porter-Duff mode P S T R
43. Transfer modes • Second step of Transfer phase • Blend SRC image onto DST through mask Xfermode AvoidXfermode PixelXorXfermode PorterDuffXfermode Draw (or don’t draw) pixels based on the “distance” from a reference Exclusive-OR source and destination pixels. Drops the alpha channel! Blends the source and destination colours using a Porter-Duff mode P S T R
44. Q&A
45. We’re hiring! natasha@novoda.com LONDON BERLIN LIVERPOOL