LOVING LEAN LAYOUTS HUYEN TUE DAO 2016年2⽉月19⽇日

LOVING LEAN LAYOUTS WHY LEAN LAYOUTS? FIND PROBLEMS FIX PROBLEMS GOOD PRACTICES

WHY LEAN LAYOUTS? r r r r shallow simple simple lean + = shallow reduce views reduce levels in view tree 3

WHY LEAN LAYOUTS? • #perfmatters • Complexity ∝ Resources (memory, CPU) • No. of views, depth of view tree • No. of measure() and layout() executions • Bad performance → UI/animations jank • Maintainability • Complexity ∝ effort to maintain/refactor • Readability • Stability: a change to one part affects other part 4

WHERE’S THE PROBLEM? (HINT: SEVERAL PLACES) r Change in size/position starts measure/layout starting at root. r r r r Some layouts need multiple measure/layout passes, e.g. RelativeLayout Lists make many copies of same layout Deep hierarchies increase complexity and dependency

STEP NO. 1 IN LOVING LEAN LAYOUTS FIND PROBLEMS

FIND PROBLEMS • SDK tool for visualizing view hierarchy • Used to be standalone; now in Device Monitor • Tree representation of view hierarchy • Evaluates performance of measure(), layout(), and draw() phases • Best: use on physical device running 4.1 up HIERARCHY VIEWER :

FIND PROBLEMS • systrace: system + application process execution data → interactive reports • Frame rendering → how much time measure/layout takes up; warns of frames that exceed 16.6ms needed for 60fps • dumpsys: collects and dumps “interesting information” about system services status • adb shell dumpsys gfxinfo → perf info related to frames of animation • adb shell dumpsys gfxinfo framestats → detailed frame timing info; on Marshmallow SYSTRACE + DUMPSYS :

STEP NO. 2 IN LOVING LEAN LAYOUTS FIX PROBLEMS

FIX PROBLEMS • Lint complains about things that are generally not good ideas. • These things are good candidates for things that you should fix first. • Generally, straightforward: • Don’t nest weights • Remove useless views • Don’t nest too much MAKE LINT HAPPY :

FIX PROBLEMS • Many different ways to do one thing: opt for simplest • Often view attributes/features can replace multiple views. • TextView compound drawables • Spannable • LinearLayout → android:divider • If you need a placeholder/divider, just use a regular View. • Sometimes you just need to pick the right view/layout. SIMPLIFY AND REDUCE :

FIX PROBLEMS • Sometimes best option = custom ViewGroup. • Total control over measure/layout logic. • Mitigate double-layout phases from platform layouts. • Starting out? Try with simple, straightforward layouts. • Also: totally custom Views (draw all the things). • Balance performance benefits with development effort. GO CUSTOM :

STEP NO. 3 IN LOVING LEAN LAYOUTS GOOD PRACTICES

GOOD PRACTICES • Anticipate and develop good habits • Know how to identify possible problem areas • Use simplest solutions where possible • Fewer/flatter Views and ViewGroups • “Don’t do too much stuff.” • Don’t use RelativeLayout at the root! Romain and Chet said so. • Don’t let problems accumulate • Balance performance benefit with effort required

THANKS FOR COMING! https://github.com/queencodemonkey/Android-Loving-Lean-Layouts Huyen Tue Dao @queencodemonkey +HuyenTueDao [email protected] randomlytyping.com youtube.com/androiddialogs speakerdeck.com/queencodemonkey

REFERENCES • 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 • Testing Display Performance: http://developer.android.com/training/ testing/performance.html • Analyzing UI Performance with Systrace: http://developer.android.com/ tools/debugging/systrace.html 16

REFERENCES • Custom ViewGroups: https:// sriramramani.wordpress.com/2015/05/06/custom- viewgroups/ • 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 17