View To Pixel (Android Summit & DroidconUk 2017)

Also here: https://goo.gl/ZP6Ccf

Transcript

1. View To Pixel *Android Summit* Aug 2017 Britt Barak
3. Britt Barak Android Lead Android Academy TLV Women Techmakers IL
4. Today’s Story
5. CPU new View()
6. Rasterization From a high level object into pixels on screen (or in texture).
7. GPU - For The Rescue !
8. GPU - For The Rescue! CPU new View() GPU
9. GPU - For The Rescue! CPU new View() GPU Polygons Textures
10. GPU - For The Rescue! CPU new View() GPU Polygons Textures DisplayList
11. And all in 16 milliseconds...
12. Measure CPU new View() GPU
13. Layout CPU GPU
14. Draw CPU GPU new View() DisplayList
15. Sync & Upload CPU new View() GPU Polygons Textures DisplayList
16. Execute CPU new View() GPU Polygons Textures DisplayList
17. What happens if...
18. CPU GPU
19. CPU GPU
20. CPU GPU
22. What do we do?
23. Double Buffer
24. CPU new View() GPU Polygons Textures DisplayList Back Buffer Frame Buffer
25. CPU new View() GPU Polygons Textures DisplayList Back Buffer Frame Buffer
26. CPU new View() GPU Polygons Textures DisplayList Back Buffer Frame Buffer
27. CPU new View() GPU Polygons Textures DisplayList Back Buffer Frame Buffer
28. VSync
29. So What Does That Mean? Measure/ Layout Draw Sync & Upload Execute Swap Buffers VSync/Misc
30. actually...
31. Input
32. Animation
33. VSync/Misc Input Animation Measure/ Layout Draw Sync & Upload Command Issue Swap Buffers
34. Notifying on a change invalidate() - re-draw requestLayout() - re-measure
35. 1. Steps will be called by order 2. A step will be called up to once per frame
36. Choreographer
37. I/Choreographer(1378): Skipped 55 frames! The application may be doing too much work on its main thread.
38. Order Is Guaranteed Choreographer.java void doFrame(long frameTimeNanos, int frame) { //... doCallbacks(Choreographer.CALLBACK_INPUT, frameTimeNanos); doCallbacks(Choreographer.CALLBACK_ANIMATION, frameTimeNanos); doCallbacks(Choreographer.CALLBACK_TRAVERSAL, frameTimeNanos); doCallbacks(Choreographer.CALLBACK_COMMIT, frameTimeNanos); //… }
39. Reminder Measure Layout Draw!
40. Step 1: Measure Goal: obtain view size, including its descendants size, agreed by its parent. REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
41. Multiple measure() Calls measure() may be called more than once For example: - Call once with UNSPECIFIED - If size too big/small- evaluate - Call with exact size
42. getWidth()==0… What’s up with that?!
43. Step 1: Measure - What’s View SIZE? - width & height (aka: drawing width & drawing height) - - Actual size on screen, at drawing time and after layout. REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
44. Step 1: Measure - What’s View SIZE? - width & height (aka: drawing width & drawing height) - - Actual size on screen, at drawing time and after layout. - measured width & measured height - how big a view wants to be within its parent REF: http://developer.android.com/reference/android/view/View.html#onMeasure(int, int)
45. What if we want the size during an animation?
46. ViewTreeObserver • Provided by the view hierarchy • getViewTreeObserver() • Register listeners to view tree global changes https://developer.android.com/reference/android/view/ViewTreeObserver.html
47. ViewTreeObserver getViewTreeObserver().addOnPreDrawListener(); getViewTreeObserver().addOnDrawListener(); getViewTreeObserver().addOnGlobalLayoutListener(); getViewTreeObserver().addOnGlobalFocusChangeListener(); //…
48. ViewTreeObserver getViewTreeObserver().addOnPreDrawListener(); getViewTreeObserver().addOnDrawListener(); getViewTreeObserver().addOnGlobalLayoutListener(); getViewTreeObserver().addOnGlobalFocusChangeListener(); //… Don’t forget to remove the listener!
49. The Steps Measure Layout Draw!
50. Step 2: Layout Goal : set position for view and all its children, respect parent’s constraints. REF: http://developer.android.com/reference/android/view/View.html#onLayout(boolean, int, int, int, int)
51. How many layout passes are there?
52. Root View : RelativeLayout 1) By views’ requests • Then relativeLayout calculates by relations & weights 2) Determine final positions
53. Root View : RelativeLayout Example: • Every view is RelativeLayout • Per Leaf change: 2*2*2 = 8 traversals X2 X2 X2
54. Root View : LinearLayout • Nested weights • measureWithLargestChild(true)
55. Root View : GridLayout • Layout_gravity: fill* • Wrong weights
56. This is called Double Layout Taxation
57. It Usually Works Fine… But... • Root elements • Deep view hierarchy • Too many (i.e. list) Can hurt.
58. What can we do? • Flatten hierarchy : ◦ Removing unneeded views ◦ Merge on include ◦ flatter layout • Beware of double layout taxation • Minimize requestLayout()
59. Cool Tool Hierarchy Viewer
60. Tools→ Android → Android Device Monitor → Hierarchy Viewer
61. Which layout should I choose?
62. Simple VS Complex Layouts • Simple : LinearLayout, FrameLayout, TableLayout • Complex : RelativeLayout , GridLayout
63. Simple VS Complex Layouts • Simple : LinearLayout, FrameLayout, TableLayout ◦ → Nesting → Performance Problems • Complex : RelativeLayout , GridLayout ◦ → shouldn’t be @ top hierarchy ◦ → hard to use & maintain
64. Constraint Layout
65. Constraint Layout • Api 9+ • Performance oriented: ◦ Reduce nesting ◦ Improve measure/layout ◦ Best practice : top level, without nesting layouts • User friendly: ◦ Expressive ◦ New layout Editor!
66. New Layout Editor Designed for ConstraintLayout - but not only!
67. The Steps Measure Layout Draw!
68. Step3: Draw 1. Heavy onDraw() a. Object allocations 2. Overdraw a. Redundant backgrounds / transparency b. Wasteful onDraw - quickReject() - clipRect()
69. GPU Overdraw Tool https://developer.android.com/studio/profile/dev-options-overdraw.html
70. Profiling tools
71. VSync/Misc Input Animation Measure/ Layout Draw Sync & Upload Command Issue Swap Buffers
72. GPU Profiling Tool • A graph per visible app • A bar per frame • 16ms benchmark • Crossing = skipping frame https://developer.android.com/studio/profile/dev-options-rendering.html
73. GPU Monitor (Android Studio)
74. Vitals dashboard
76. Frame Metrics On Android N+ - Per-Frame data: - Windos.OnFrameMetricsAvailableListener() - Aggregated data: - FrameMetricsAggregator (Support lib v26)
77. https://developer.android.com/reference/android/view/FrameMetrics.html
78. VSync/Misc Input Animation Measure/ Layout Draw Sync & Upload Command Issue Swap Buffers
79. What Happened Here Today?
80. How Does A View Display On Screen? Screen GPU Polygons Textures CPU new Button() DisplayList
81. Tools - Hierarchy viewer - Gpu overdraw - Gpu profiler - Systrace - Vitals dashboard
82. Get my notes on - @britt.barak Keep in touch! Britt Barak @brittBarak Thank you!
83. Thank You !