Philly ETE 2017: Loving Lean Android Layouts

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

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