Tweet
Tweet

Slide 1

Slide 1 text

HUYEN TUE DAO @QUEENCODEMONKEY LOVING LEAN ANDROID LAYOUTS

Slide 2

Slide 2 text

LOVING LEAN ANDROID LAYOUTS 
 
 
 
 
 
 
 


Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

WHY LEAN LAYOUTS #PERFMATTERS

Slide 10

Slide 10 text

PERFORMANCE = RESOURCES USED ∝COMPLEXITY

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

MAINTAINABILITY WHY LEAN LAYOUTS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

BLUEPRINT VIEW FINDING PROBLEMS

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

MAKE LINT HAPPY FIXING PROBLEMS

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

LINT USELESS PARENT

Slide 33

Slide 33 text

LINT NESTED WEIGHTS

Slide 34

Slide 34 text

LINT TOO MUCH NESTING

Slide 35

Slide 35 text

SIMPLIFY AND REDUCE FIXING PROBLEMS

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text


 
 
 
 
 
 3 VIEWS, 2 LEVELS

Slide 38

Slide 38 text

1 VIEW, 1 LEVEL

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

SPANNABLES

Slide 42

Slide 42 text


 
 
 
 
 
 
 
 4 VIEWS, 2 LEVELS

Slide 43

Slide 43 text

+ Spannables 1 VIEW, 1 LEVEL

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text


 
 
 
 2 VIEWS, 2 LEVELS

Slide 47

Slide 47 text

1 VIEW, 1 LEVEL

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text


 
 
 
 
 
 
 
 
 
 
 
 5 VIEWS, 3 LEVELS

Slide 51

Slide 51 text


 
 
 
 
 
 
 
 4 VIEWS, 2 LEVEL

Slide 52

Slide 52 text

CONSTRAINTLAYOUT MORE EXPRESSIVE MORE PERFORMANT FLATTEN HIERARCHIES REDUCE VIEWS

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

ANTICIPATE AND DEVELOP GOOD HABITS GOOD PRACTICES

Slide 58

Slide 58 text

SIMPLEST SOLUTIONS WHERE POSSIBLE GOOD PRACTICES

Slide 59

Slide 59 text

FEWER AND FLATTER NO RELATIVELAYOUT AT ROOT GOOD PRACTICES

Slide 60

Slide 60 text

DON’T LET PROBLEMS ACCUMULATE GOOD PRACTICES

Slide 61

Slide 61 text

BALANCE PERFORMANCE GAINS WITH DEVELOPMENT EFFORT GOOD PRACTICES

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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