LOVING LEAN LAYOUTS HUYEN TUE DAO @QUEENCODEMONKEY 

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

WHY LEAN LAYOUTS PERFMATTERS → DEVICE RESOURCES USED RESOURCES ∝ COMPLEXITY COMPLEXITY? # OF VIEWS. DEPTH OF HIERARCHY. REALLY # OF EXECUTIONS OF onMeasure()/onLayout() BAD PERFORMANCE→ JANK 

WHY LEAN LAYOUTS MAINTAINABILITY READABILITY COMPLEX VIEWS → HARD TO PARSE TOO NESTED → TOO INDENTED STABILITY CHANGE IN ONE PART AFFECTS OTHER PART 

MEASURE LAYOUT DRAW INFLATION/INSTANTIATION DEPTH-FIRST TRAVERSAL HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw() 

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

PARENT SIZES AND POSITIONS CHILD MEASURE LAYOUT DRAW HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw() 

PARENT DRAWS PARENT TELLS CHILDREN TO DRAW MEASURE LAYOUT DRAW HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw() 

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 

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. 

No content

No content

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. 

No content

HUYEN TUE DAO @QUEENCODEMONKEY SUBTITLE 

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 

HUYEN TUE DAO @QUEENCODEMONKEY SUBTITLE 

DUMPSYS SYSTEM SERVICES STATUS “INTERESTING INFORMATION” PERFORMANCE INFO FOR FRAMES OF ANIMATION adb shell dumpsys gfxinfo FINDING PROBLEMS DETAILED FRAME TIMING INFO. MARSHMALLOW. adb shell dumpsys gfxinfo framestats 

FRAMEMETRICSLISTENER MEASURE INTERACTION-LEVEL UI PERFORMANCE PUB/SUB API FRAME TIMING FOR CURRENT APP WINDOW FINDING PROBLEMS EQUIVALENT TO adb shell dumpsys gfxinfo framestats NOT LIMITED TO LAST 120 FRAMES LIKE framestats 

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 

No content

LINT USELESS PARENT 

LINT NESTED WEIGHTS 

LINT TOO MUCH NESTING 

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 

No content


 
 
 
 
 
 → 3 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL 

No content

No content

SPANNABLES 


 
 
 
 
 
 
 
 + Spannables → 4 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL 

No content

No content


 
 
 
 → 2 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL 

No content

No content


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 → 5 VIEWS, 3 LEVELS 4 VIEWS, 2 LEVEL 

No content

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 

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 

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

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 

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 

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