Mobile Era 2016: Loving Lean Layouts

Huyen's talk from Mobile Era 2016 about ways to improve UI performance and avoid jank by building efficient layouts.

Transcript

1. LOVING LEAN LAYOUTS HUYEN TUE DAO @QUEENCODEMONKEY
2. LOVING LEAN LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING PROBLEMS GOOD PRACTICES
3. WHY LEAN LAYOUTS PERFMATTERS → DEVICE RESOURCES USED RESOURCES ∝ COMPLEXITY COMPLEXITY? # OF VIEWS. DEPTH OF HIERARCHY. REALLY # OF EXECUTIONS OF onMeasure()/onLayout() BAD PERFORMANCE→ JANK
4. WHY LEAN LAYOUTS MAINTAINABILITY READABILITY COMPLEX VIEWS → HARD TO PARSE TOO NESTED → TOO INDENTED STABILITY CHANGE IN ONE PART AFFECTS OTHER PART
5. MEASURE LAYOUT DRAW INFLATION/INSTANTIATION DEPTH-FIRST TRAVERSAL HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw()
6. PARENT MEASURES EACH CHILD CHILD CALCULATES MEASURED WIDTH/HEIGHT MEASURE HOW ANDROID DRAWS VIEWS onMeasure() LAYOUT onLayout() DRAW onDraw() MEASURE OWN CHILDREN (IF ANY)
7. PARENT SIZES AND POSITIONS CHILD MEASURE LAYOUT DRAW HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw()
8. PARENT DRAWS PARENT TELLS CHILDREN TO DRAW MEASURE LAYOUT DRAW HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw()
9. WHERE IS THE PROBLEM? 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
10. FINDING PROBLEMS HIERARCHY VIEWER SDK TOOL. HIERARCHY VISUALIZATION. ANDROID DEVICE MONITOR BEST → PHYSICAL DEVICE. ANDROID 4.1+ | ROOTED | VIEW SERVER. RUNTIME NUMBERS COMPLETELY INACCURATE. DO NOT USE.
13. FINDING PROBLEMS LAYOUT INSPECTOR EXAMINE/DEBUG LAYOUT ANDROID MONITOR. SINCE AS 2.2. HIGH-LEVEL LIST OF VIEWS. SHOWS NESTING. WIP. WILL “SUPERSEDE” HIERARCHY VIEWER.
15. HUYEN TUE DAO @QUEENCODEMONKEY SUBTITLE
16. SYSTRACE SYSTEM + APPLICATION PROCESS EXECUTION DATA DATA TRACE → INTERACTIVE REPORTS FRAME RENDERING. HOW LONG TRAVERSALS TAKE. ALERTS. SMOOTH UI → 60FPS → 16.6MS/FRAME ANDROID DEVICE MONITOR FINDING PROBLEMS
17. HUYEN TUE DAO @QUEENCODEMONKEY SUBTITLE
18. DUMPSYS SYSTEM SERVICES STATUS “INTERESTING INFORMATION” PERFORMANCE INFO FOR FRAMES OF ANIMATION adb shell dumpsys gfxinfo <PACKAGE_NAME> FINDING PROBLEMS DETAILED FRAME TIMING INFO. MARSHMALLOW. adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats
19. FRAMEMETRICSLISTENER MEASURE INTERACTION-LEVEL UI PERFORMANCE PUB/SUB API FRAME TIMING FOR CURRENT APP WINDOW FINDING PROBLEMS EQUIVALENT TO adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats NOT LIMITED TO LAST 120 FRAMES LIKE framestats
20. MAKE LINT HAPPY COMPLAINS ABOUT THINGS THAT ARE NOT GOOD IDEAS FIXING PROBLEMS GOOD CANDIDATES FOR THINGS TO FIX FIRST DON’T NEST WEIGHTS DON’T HAVE USELESS VIEWS DON’T NEST TOO DEEP
22. LINT USELESS PARENT
23. LINT NESTED WEIGHTS
24. LINT TOO MUCH NESTING
25. SIMPLIFY AND REDUCE DIFFERENT WAYS TO DO ONE THING. OPT FOR SIMPLEST. FIXING PROBLEMS REPLACE VIEWS WITH ATTRIBUTES/OTHER TECHNIQUES DIRECTLY APPLY LAYOUT/STYLING PICK THE RIGHT VIEW/LAYOUT
27. <LinearLayout…>
 
 <ImageView…/>
 
 <TextView…/>
 
 </LinearLayout> <TextView…
 android:drawablePadding=“…"
 android:drawableEnd=“…"/> → 3 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
30. SPANNABLES
31. <LinearLayout…>
 
 <TextView…
 style="@style/StyleA" />
 
 <TextView…
 style="@style/StyleB" />
 
 <TextView…
 style="@style/StyleA" />
 
 </LinearLayout> <TextView…/> + Spannables → 4 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
34. <FrameLayout… android:padding=“…” android:background=“…“>
 
 <LinearLayout… />
 
 </FrameLayout> <LinearLayout… android:padding=“…” android:background=“…“/> → 2 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
37. <LinearLayout… >
 
 <LinearLayout…>
 
 <TextView… />
 
 <TextView… />
 
 </LinearLayout>
 
 <TextView… />
 
 </LinearLayout> 
 
 <ConstraintLayout…>
 
 <TextView… />
 
 <TextView… />
 
 <TextView… />
 
 </ConstraintLayout> → 5 VIEWS, 3 LEVELS 4 VIEWS, 2 LEVEL
39. GO CUSTOM CUSTOM VIEW/VIEWGROUP TOTAL CONTROL OVER LAYOUT/DRAW FIXING PROBLEMS MITIGATE DOUBLE LAYOUT PASSES START WITH SIMPLE, STRAIGHTFORWARD LAYOUTS BALANCE PERFORMANCE GAINS WITH DEVELOPMENT EFFORT
40. ANTICIPATE AND DEVELOP GOOD HABITS SIMPLEST SOLUTIONS WHERE POSSIBLE GOOD PRACTICES DON’T LET PROBLEMS ACCUMULATE BALANCE PERFORMANCE GAINS WITH DEVELOPMENT EFFORT FEWER AND FLATTER NO RELATIVELAYOUT AT ROOT
41. THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY
42. REFERENCES 42 ANDROID PERFORMANCE PATTERNS, WHY 60FPS? https://youtu.be/CaMTIgxCSqU DEVELOPING FOR ANDROID: THE NAUGHTY BITS https://youtu.be/Q2qQoJlwqlk?t=36m4s HIERARCHY VIEWER http://developer.android.com/tools/help/hierarchy-viewer.html HIERARCHY VIEWER WALKTHROUGH http://developer.android.com/tools/performance/hierarchy-viewer/index.html LAYOUT INSPECTOR http://tools.android.com/tech-docs/layout-inspector
43. REFERENCES 43 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
44. REFERENCES 44 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