This document discusses Android's drawing and graphics API. It covers several topics: 1. Custom Views - how to extend View and ViewGroup classes to create custom drawing logic. 2. How Android draws its views - the view tree is traversed pre-order to measure, layout, and draw each view. 3. The measure and layout passes - how views push size requirements down the tree during measure and how parents position children during layout. 4. More on drawing - overriding lifecycle methods, updating drawing based on state, and detecting overdraw issues. 5. The Canvas and Paint classes - how Canvas relies on bitmaps and Paint is used to configure drawing properties.

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
?