Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Philly ETE 2017: Loving Lean Android Layouts

Philly ETE 2017: Loving Lean Android Layouts

Huyen's talk at Philly ETE on performance and efficiency in Android layouts.

Huyen Tue Dao

April 18, 2017
Tweet

More Decks by Huyen Tue Dao

Other Decks in Technology

Transcript

  1. HUYEN TUE DAO
    @QUEENCODEMONKEY
    LOVING
    LEAN
    ANDROID
    LAYOUTS

    View Slide

  2. LOVING
    LEAN
    ANDROID
    LAYOUTS
    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="1">


    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="@string/help_im_being_repressed"

    android:textStyle="bold"

    style="@style/TextAppearance.AppCompat.Body1" />


    android:layout_width="0dp"

    android:layout_height=“@dimen/image_height"

    android:layout_weight="2"

    android:src="@drawable/berries_plate"

    android:scaleType="centerCrop"

    android:contentDescription="@null" />


    android:layout_width="0dp"

    android:layout_height="@dimen/image_height"

    android:layout_weight="1"

    android:src="@drawable/creme_brulee"

    android:scaleType="centerCrop"

    android:contentDescription="@null" />



    View Slide

  3. LOVING
    LEAN
    ANDROID
    LAYOUTS
    WHY LEAN LAYOUTS
    FINDING PROBLEMS
    FIXING PROBLEMS
    GOOD PRACTICES

    View Slide

  4. HOW ANDROID
    DRAWS LAYOUTS
    MEASURE
    LAYOUT
    DRAW
    DEPTH-FIRST
    TRAVERSAL
    INFLATION

    View Slide

  5. PARENT MEASURES
    EACH CHILD
    CHILD CALCULATES
    MEASURED WIDTH/HEIGHT
    MEASURE OWN
    CHILDREN (IF ANY)
    HOW ANDROID
    DRAWS LAYOUTS
    MEASURE
    LAYOUT
    DRAW

    View Slide

  6. HOW ANDROID
    DRAWS LAYOUTS
    MEASURE
    LAYOUT
    DRAW
    PARENT SIZES AND
    POSITIONS CHILD

    View Slide

  7. HOW ANDROID
    DRAWS LAYOUTS
    MEASURE
    LAYOUT
    DRAW
    PARENT DRAWS
    PARENT TELLS
    CHILDREN TO DRAW

    View Slide

  8. LOVING
    LEAN
    ANDROID
    LAYOUTS
    WHY LEAN LAYOUTS
    FINDING PROBLEMS
    FIXING PROBLEMS
    GOOD PRACTICES

    View Slide

  9. WHY LEAN LAYOUTS
    #PERFMATTERS

    View Slide

  10. PERFORMANCE = RESOURCES USED
    ∝COMPLEXITY

    View Slide

  11. PERFORMANCE = RESOURCES USED
    ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY

    View Slide

  12. PERFORMANCE = RESOURCES USED
    ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY
    = # EXECUTIONS OF
    onMeasure()/onLayout()

    View Slide

  13. PERFORMANCE = RESOURCES USED
    ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY
    = # EXECUTIONS OF
    onMeasure()/onLayout()
    BAD PERFORMANCE = UI JANK

    View Slide

  14. MAINTAINABILITY
    WHY LEAN LAYOUTS

    View Slide

  15. RESOURCES USED∝COMPLEXITY
    ∝EFFORT TO MAINTAIN AND REFACTOR
    = READABILITY (PARSING + NESTING)
    + STABILITY

    View Slide

  16. CHANGE IN SIZE/POSITION
    STARTS MEASURE/LAYOUT
    STARTING AT ROOT.
    SOME LAYOUTS NEED MULTIPLE
    MEASURE/LAYOUT PASSES,
    E.G. RELATIVELAYOUT
    LISTS MAKE MANY
    COPIES OF SAME LAYOUT
    DEEP HIERARCHIES INCREASE
    COMPLEXITY AND DEPENDENCY
    WHERE IS
    THE PROBLEM?

    View Slide

  17. LOVING
    LEAN
    ANDROID
    LAYOUTS
    WHY LEAN LAYOUTS
    FINDING PROBLEMS
    FIXING PROBLEMS
    GOOD PRACTICES

    View Slide

  18. HIERARCHY VIEWER
    FINDING PROBLEMS
    VISUALIZATION
    ANDROID DEVICE MONITOR
    BEST ON PHYSICAL DEVICE | 4.1+

    View Slide

  19. View Slide

  20. View Slide

  21. LAYOUT INSPECTOR
    FINDING PROBLEMS
    ANDROID MONITOR
    EXAMINE/DEBUG LAYOUT
    EVENTUALLY SUPERSEDE
    HIERARCHY VIEWER

    View Slide

  22. View Slide

  23. BLUEPRINT VIEW
    FINDING PROBLEMS

    View Slide

  24. SYSTRACE
    FINDING PROBLEMS
    SYSTEM + APPLICATION
    PROCESS EXECUTION DATA
    DATA TRACE → INTERACTIVE REPORTS
    SMOOTH UI → 60FPS → 16.6MS/FRAME

    View Slide

  25. View Slide

  26. View Slide

  27. DUMPSYS
    FINDING PROBLEMS
    SYSTEM SERVICES STATUS
    FRAMES OF ANIMATION
    adb shell dumpsys gfxinfo
    DETAILED FRAME TIMING INFO
    adb shell dumpsys gfxinfo framestats

    View Slide

  28. OnFrameMetricsAvailableListener
    FINDING PROBLEMS
    MARSHMALLOW
    PUB/SUB API
    EQUIVALENT TO DUMPSYS FRAMESTATS
    EXCEPT NOT LIMITED TO 120 FRAMES

    View Slide

  29. LOVING
    LEAN
    ANDROID
    LAYOUTS
    WHY LEAN LAYOUTS
    FINDING PROBLEMS
    FIXING PROBLEMS
    GOOD PRACTICES

    View Slide

  30. MAKE LINT HAPPY
    FIXING PROBLEMS

    View Slide

  31. View Slide

  32. LINT
    USELESS
    PARENT

    View Slide

  33. LINT
    NESTED WEIGHTS

    View Slide

  34. LINT
    TOO MUCH
    NESTING

    View Slide

  35. SIMPLIFY AND REDUCE
    FIXING PROBLEMS

    View Slide

  36. View Slide








  37. 3 VIEWS, 2 LEVELS

    View Slide

  38. android:drawablePadding=“…"

    android:drawableEnd=“…"/>
    1 VIEW, 1 LEVEL

    View Slide

  39. View Slide

  40. View Slide

  41. SPANNABLES

    View Slide



  42. style="@style/StyleA" />


    style="@style/StyleB" />


    style="@style/StyleA" />



    4 VIEWS, 2 LEVELS

    View Slide


  43. +
    Spannables
    1 VIEW, 1 LEVEL

    View Slide

  44. View Slide

  45. View Slide

  46. android:padding=“…”
    android:background=“…“>





    2 VIEWS, 2 LEVELS

    View Slide

  47. android:padding=“…”
    android:background=“…“/>
    1 VIEW, 1 LEVEL

    View Slide

  48. View Slide

  49. View Slide














  50. 5 VIEWS, 3 LEVELS

    View Slide










  51. 4 VIEWS, 2 LEVEL

    View Slide

  52. CONSTRAINTLAYOUT
    MORE EXPRESSIVE
    MORE PERFORMANT
    FLATTEN HIERARCHIES
    REDUCE VIEWS

    View Slide

  53. View Slide

  54. GO CUSTOM
    FIXING PROBLEMS
    CUSTOM VIEW/VIEWGROUP
    TOTAL CONTROL OVER LAYOUT/DRAW
    BALANCE PERFORMANCE GAINS
    AND DEVELOPMENT EFFORT

    View Slide

  55. GO CUSTOM
    FIXING PROBLEMS
    CUSTOM VIEW/VIEWGROUP
    TOTAL CONTROL OVER LAYOUT/DRAW
    BALANCE PERFORMANCE GAINS
    AND DEVELOPMENT EFFORT

    View Slide

  56. LOVING
    LEAN
    ANDROID
    LAYOUTS
    WHY LEAN LAYOUTS
    FINDING PROBLEMS
    FIXING PROBLEMS
    GOOD PRACTICES

    View Slide

  57. ANTICIPATE AND
    DEVELOP GOOD HABITS
    GOOD PRACTICES

    View Slide

  58. SIMPLEST SOLUTIONS
    WHERE POSSIBLE
    GOOD PRACTICES

    View Slide

  59. FEWER AND FLATTER
    NO RELATIVELAYOUT AT ROOT
    GOOD PRACTICES

    View Slide

  60. DON’T LET PROBLEMS
    ACCUMULATE
    GOOD PRACTICES

    View Slide

  61. BALANCE PERFORMANCE GAINS
    WITH DEVELOPMENT EFFORT
    GOOD PRACTICES

    View Slide

  62. THANK YOU!
    SPEAKERDECK.COM/QUEENCODEMONKEY
    YOUTUBE.COM/ANDROIDDIALOGS
    RANDOMLYTYPING.COM
    HUYEN TUE DAO
    @QUEENCODEMONKEY

    View Slide

  63. REFERENCES
    63
    ANDROID PERFORMANCE PATTERNS, WHY 60FPS?
    https://youtu.be/CaMTIgxCSqU
    DEVELOPING FOR ANDROID: THE NAUGHTY BITS
    https://youtu.be/Q2qQoJlwqlk?t=36m4s
    HIERARCHY VIEWER
    https://developer.android.com/studio/profile/hierarchy-viewer.html
    LAYOUT INSPECTOR
    http://tools.android.com/tech-docs/layout-inspector

    View Slide

  64. REFERENCES
    64
    TESTING DISPLAY PERFORMANCE
    http://developer.android.com/training/testing/performance.html
    ANALYZING UI PERFORMANCE WITH SYSTRACE
    http://developer.android.com/tools/debugging/systrace.html
    OPTIMIZING LAYOUT HIERARCHIES
    http://developer.android.com/training/improving-layouts/optimizing-layout.html
    ANDROID PERFORMANCE PATTERNS, DOUBLE LAYOUT TAXATION
    https://www.youtube.com/watch?v=dB3_vgS-Uqo
    ANDROID PERFORMANCE PATTERN, INVALIDATIONS, LAYOUTS, AND PERFORMANCE
    https://youtu.be/we6poP0kw6E

    View Slide

  65. REFERENCES
    65
    BUILD A RESPONSIVE UI WITH CONSTRAINTLAYOUT
    developer.android.com/training/constraint-layout/index.html
    ANDROID DEVELOPERS BACKSTAGE: EPISODE 50: CONSTRAINT LAYOUT
    androidbackstage.blogspot.com/2016/06/episode-50-constraint-layout.html
    CUSTOM VIEWGROUPS
    https://sriramramani.wordpress.com/2015/05/06/custom-viewgroups/
    MEASURE, LAYOUT, DRAW, REPEAT: CUSTOM VIEWS AND VIEWGROUPS
    https://youtu.be/dLl0ovmta6A

    View Slide