This document discusses Android's drawing and graphics API. It covers topics like custom views, how Android draws its views in a tree traversal order, the measure and layout drawing steps, using MeasureSpec to determine view dimensions, causes and detection of overdraw, and an overview of the Canvas and Paint classes used for drawing. The Canvas relies on a underlying Bitmap and uses Paint objects configured with settings to perform drawing operations. Examples of fillable loaders are provided to demonstrate animating drawing properties over time.

1. Android drawing & graphics API
JorgeCastilloPrz
@JorgeCastilloPr
jorge.castillo.prz@gmail.com
Jorge Castillo
Android Engineer at

2. We are hiring
https://www.jobandtalent.com/es/careers

3. We are hiring!
http://www.jobandtalent.com/es/careers

4. Inspired by... ...the community

5. Custom Views
● Good way to wrap drawing logic semantically
● Simplify layout composition
● Extend from View / ViewGroup or whatever fits better
● Custom attributes to customize behavior
● Use <merge> tag on layout root (performance)

6. How Android draws its Views
● It requests the layout’s root node to measure and draw it’s tree
● Tree traversal is pre-order
○ Parents are drawn before their children
○ Siblings drawn in the order they are in the tree
● ViewGroups are responsible for requesting
its children to be drawn
● Every View is responsible for drawing itself F, B, A, D, C, E, G, I, H

7. Drawing steps
● Measure pass - measure(int, int)
● Layout pass - layout(int, int, int, int)
The draw itself is internally divided in two steps:

8. measure(int, int)
● Top to bottom
● At the end, getMeasuredWidth() and getMeasuredHeight() must be set for
current view and all its descendants
● Each view pushes dimension specifications down the tree during recursion
● Measured width and height must respect constraints imposed by parent
● A parent may call measure() more than once on its children. (If the children
does not agree on dimensions among themselves).
(1/3)

9. measure(int, int)
● MeasureSpec are used to push requirements down the tree. Three modes
available:
○ UNESPECIFIED: Used by parents to determine the desired dimen of a
child. (LinearLayout calls measure() on its child with a width of 240 and
height UNESPECIFIED to find out how tall the child would be for an
exact given width)
○ EXACTLY: Used by parent to impose exact size on the child
○ AT_MOST: Used by the parent to impose a maximum size on the child
(2/3)

10. ● MeasureSpec are implemented as ints to reduce object allocation
● Class MeasureSpec is used to pack / unpack <size, mode> tuples into the
given int arguments
● MeasureSpec.getMode(int)
● MeasureSpec.getSize(int)
● MeasureSpec.makeMeasureSpec(int size, int mode) to create a new one
measure(int, int) (3/3)

12. layout(int, int, int, int)
● Top to bottom
● To assign position to a view and all its descendants
● Each parent is responsible for positioning all of its children using the sizes
computed in the measure pass
● Each parent calls layout() on all of its children
● Four given int arguments are the Left, Top, Right and Bottom positions,
relative to the view’s parent

13. More about drawing
● Override onSizeChanged() to update your view calculations,
don’t do it in the onDraw() method
● 16 ms / 60 fps every drawing cycle for smoothness
● Update the drawing logic according to states
● You can force a View to draw calling invalidate()
● You can force init the layout pass using requestLayout()
● Keep an eye on overdraw

14. Detecting Overdraw
● When a time frame of pixels are drawn
multiple times (more rendering work than
necessary)
● Enable “Show overdraw areas” in your
developer console
● Some overdraw is unavoidable. Try to get
mostly true color or 1X as maximum

15. Some causes
● Multiple full screen background
○ DecorView theme bg can be removed
(after the brand screen is gone):
getWindow().setBackgroundDrawable(null)
● Backgrounds behind avatars to mimic borders
● View hierarchy too deep (Flatten it as much as
possible. Use Hierarchy Viewer to check it)

16. What about the
Graphics API?

17. PaintCanvas

18. About Canvas
● Draw to Canvas when your View needs to re-draw so often.
● You can use it into a View’s onDraw() method or into SurfaceView /
TextureView
● TetureView is like a SurfaceView but behaves as a View, and not just as a
dumb Surface. So it can be moved, transformed, animated… etc.
● SurfaceView and TextureView perform draws to the Canvas as fast as your
thread is capable of
(1/3)

19. About Canvas
● Canvas relies on underlying Bitmap
● To create a new Canvas from zero you need to provide it
(2/3)
● Multiple clipping and drawing methods
● Every drawing method receives a Paint

21. About the Paint
● Paint is our drawing tool. Like a brush.
● Paints are configured properly to be used in canvas methods

23. AndroidFillableLoaders
https://github.com/JorgeCastilloPrz/AndroidFillableLoaders
http://jorgecastillo.xyz

24. Originally made by Pol Quintana (@poolqf) for iOS
https://github.com/poolqf/FillableLoaders

25. Two steps
● Stroke animation

26. Two steps
● Filling animation

27. ClippingTransform
● Every onDraw() tick we draw depending o the current phase
○ build clipping path
○ apply an offset for the height depending on the phase
○ apply the clipping Path

28. questions
?