Droidcon Italy 2016: Loving Lean Layouts

From Droidcon Italy 2016, Huyen discusses how performance issues can appear in layouts and how creating lean layouts can address these issues.

1. LOVING LEAN LAYOUTS HUYEN TUE DAO 2016.04.07 speakerdeck.com/queencodemonkey/droidcon-italy-2016-loving-lean-layouts
2. LOVING LEAN LAYOUTS WHY LEAN LAYOUTS? FIND PROBLEMS FIX PROBLEMS GOOD PRACTICES
3. WHY LEAN LAYOUTS? • Complexity ∝ Resources (memory, CPU) • Complexity? • # of views • Depth of view hierarchy • (Really) # of measure() and layout() executions • Bad performance → UI/animations jank 3 #PERFMATTERS
4. WHY LEAN LAYOUTS? • Complexity ∝ effort to maintain/refactor • Readability • Complex views are hard to parse • Too many → too indented • Stability: a change to one part affects other part 4 MAINTAINABILITY
5. 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
6. STEP NO. 1 IN LOVING LEAN LAYOUTS FIND PROBLEMS
7. FIND PROBLEMS • SDK tool for visualizing view hierarchy • Used to be standalone; now in Device Monitor • Do not rely on runtime values for measure(), layout(), and draw() phases • Inaccurate • Chet Haase said so • Best: use on physical device running 4.1 up HIERARCHY VIEWER :
8. 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 <PACKAGE_NAME> → perf info related to frames of animation • adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats → detailed frame timing info; on Marshmallow SYSTRACE + DUMPSYS :
9. STEP NO. 2 IN LOVING LEAN LAYOUTS FIX PROBLEMS
10. FIX PROBLEMS • Lint complains about things that are generally not good ideas. • Good candidates for things that you should fix first. • Don’t nest weights • Remove useless views • Don’t nest too much MAKE LINT HAPPY :
11. FIX PROBLEMS • Many different ways to do one thing: opt for simplest • Often attributes or other techniques can replace multiple views, e.g.: • TextView compound drawables • Spannable • Placeholder/divider → plain View or Space. • Consolidate styling and spacing → set directly on content layout instead of a wrapper SIMPLIFY AND REDUCE :
12. FIX PROBLEMS SIMPLIFY AND REDUCE : <LinearLayout…>
 
 <ImageView…/>
 
 <TextView…/>
 
 </LinearLayout> <TextView…
 android:drawablePadding=“…"
 android:drawableEnd=“…"/> → 3 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
13. FIX PROBLEMS • Many different ways to do one thing: opt for simplest • Often attributes or other techniques can replace multiple views, e.g.: • TextView compound drawables • Spannable • Placeholder/divider → plain View or Space. • Consolidate styling and spacing → set directly on content layout instead of a wrapper SIMPLIFY AND REDUCE :
14. FIX PROBLEMS SIMPLIFY AND REDUCE : <LinearLayout…>
 
 <TextView…
 style="@style/StyleA" />
 
 <TextView…
 style="@style/StyleB" />
 
 <TextView…
 style="@style/StyleA" />
 
 </LinearLayout> <TextView…/> + Spannables → 4 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
15. FIX PROBLEMS • Many different ways to do one thing: opt for simplest • Often attributes or other techniques can replace multiple views, e.g.: • TextView compound drawables • Spannable • Placeholder/divider → plain View or Space. • Consolidate styling and spacing → set directly on content layout instead of a wrapper SIMPLIFY AND REDUCE :
16. FIX PROBLEMS SIMPLIFY AND REDUCE : <FrameLayout…
 android:layout_marginTop=“@dimen/a”
 android:layout_marginBottom=“@dimen/b“
 android:background=“@drawable/bg”>
 
 <LinearLayout…
 android:paddingTop=“@dimen/c”
 android:paddingBottom=“@dimen/d”>
 
 …
 
 </LinearLayout>
 
 </FrameLayout> 
 
 <LinearLayout…
 android:layout_marginTop="@dimen/a"
 android:layout_marginBottom="@dimen/b"
 android:paddingTop="@dimen/c"
 android:paddingBottom="@dimen/d"
 android:background=“@drawable/bg"> 
 <LinearLayout… 
 </LinearLayout> → 3 LEVELS -1 VIEWS, 2 LEVELS
17. FIX PROBLEMS • Many different ways to do one thing: opt for simplest • Often attributes or other techniques can replace multiple views, e.g.: • TextView compound drawables • Spannable • Placeholder/divider → plain View or Space. • Consolidate styling and spacing → set directly on content layout instead of a wrapper SIMPLIFY AND REDUCE :
18. FIX PROBLEMS • Sometimes just need to pick the “right” view/layout. • Nested LinearLayouts → RelativeLayout • RelativeLayout to layout n views in a row → LinearLayout • RelativeLayout → FrameLayout + layout_gravity • Do (or at least try) not use RelativeLayout at the root! • Generally, no set rules: “It depends.” SIMPLIFY AND REDUCE :
19. FIX PROBLEMS SIMPLIFY AND REDUCE : <LinearLayout… >
 
 <LinearLayout…>
 
 <TextView… />
 
 <TextView… />
 
 </LinearLayout>
 
 <TextView… />
 
 </LinearLayout> 
 
 <RelativeLayout…>
 
 <TextView… />
 
 <TextView… />
 
 <TextView… />
 
 </RelativeLayout> → 5 VIEWS, 3 LEVELS 4 VIEW, 2 LEVEL
20. FIX PROBLEMS • Sometimes just need to pick the “right” view/layout. • Nested LinearLayouts → RelativeLayout • RelativeLayout to layout n views in a row → LinearLayout • RelativeLayout → FrameLayout + layout_gravity • Do (or at least try) not use RelativeLayout at the root! • Generally, no set rules: “It depends.” SIMPLIFY AND REDUCE :
21. FIX PROBLEMS • Sometimes best option = custom ViewGroup. • Total control over measure/layout logic. • Mitigate double-layout phases. • Also: totally custom Views (draw all the things). • Start out with simple, straightforward layouts: static content, little user interaction • Balance performance gains with development effort. GO CUSTOM :
22. STEP NO. 3 IN LOVING LEAN LAYOUTS GOOD PRACTICES
23. GOOD PRACTICES • Anticipate and develop good habits • Use simplest solutions where possible • “Don’t do too much stuff.” • Fewer/flatter Views and ViewGroups. • Don’t let problems accumulate. • Best solution? It depends. • Balance performance gains with development effort.
24. THANKS FOR COMING! https://github.com/queencodemonkey/Android-Loving-Lean-Layouts Huyen Tue Dao @queencodemonkey +HuyenTueDao huyen@randomlytyping.com randomlytyping.com youtube.com/androiddialogs speakerdeck.com/queencodemonkey
25. 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 • on LinearLayout measures: http://helw.net/2016/01/27/on- linearlayout-measures/ 25
26. 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 26