View To Pixel (Android Summit & DroidconUk 2017)

View To Pixel (Android Summit & DroidconUk 2017)

3142db3adb711e247e371153b5777e04?s=128

Britt Barak

August 24, 2017
Tweet

Transcript

  1. View To Pixel *Android Summit* Aug 2017 Britt Barak

  2. None
  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

  21. None
  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

  75. None
  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 !