Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Droidcon Berlin 2016: Loving Lean Layouts

Droidcon Berlin 2016: Loving Lean Layouts

Huyen's talk from Droidcon Berlin discusses how performance issues can appear in layouts and how creating lean layouts can address these issues.

Huyen Tue Dao

June 16, 2016
Tweet

More Decks by Huyen Tue Dao

Other Decks in Technology

Transcript

  1. 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 #PERFMATTERS
  2. WHY LEAN LAYOUTS? • Complexity ∝ effort to maintain/refactor •

    Readability • Complex views are hard to parse • Too nested → too indented • Stability: a change to one part affects other part MAINTAINABILITY
  3. HOW TO LAYOUT A VIEW HIERARCHY measure STEP 1 layout

    STEP 2 measure measure layout layout r
  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
  5. FIND PROBLEMS • SDK tool for visualizing view hierarchy •

    Android Device Monitor • Best: use on physical device running 4.1 up • Do not use runtime numbers given in Hierarchy Viewer; completely inaccurate HIERARCHY VIEWER :
  6. FIND PROBLEMS • Tool inside the Android Monitor: AS 2.2

    • Purpose: debug rendering of a layout • Also has high-level view of hierarchy useful to determining general depth/nested-ness • Similarly new Blueprint View LAYOUT INSPECTOR :
  7. 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 :
  8. FIND PROBLEMS • FrameMetricsListener API (Android N): measurement of interaction-level

    UI performance • Pub/Sub API → current app window • Equivalent to adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats • Not limited to last 120 frames like framestats • Gather performance data and “catch regressions in UI performance” FRAMEMETRICSLISTENER :
  9. 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 :
  10. 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 • Directly apply margins, padding, backgrounds, etc. • Placeholder/divider → View or Space. • Sometimes you just need to pick the right view/layout. • Less views, less levels, less nesting • ConstraintLayout SIMPLIFY AND REDUCE :
  11. FIX PROBLEMS SIMPLIFY AND REDUCE : <LinearLayout…>
 
 <ImageView…/>
 


    <TextView…/>
 
 </LinearLayout> <TextView…
 android:drawablePadding=“…"
 android:drawableEnd=“…"/> → 3 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
  12. 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
  13. FIX PROBLEMS SIMPLIFY AND REDUCE : <FrameLayout… android:padding=“…” android:background=“…“>
 


    <LinearLayout… />
 
 </FrameLayout> <LinearLayout… android:padding=“…” android:background=“…“/> → 2 VIEWS, 2 LEVELS 1 VIEW, 1 LEVEL
  14. FIX PROBLEMS SIMPLIFY AND REDUCE : <LinearLayout… >
 
 <LinearLayout…>


    
 <TextView… />
 
 <TextView… />
 
 </LinearLayout>
 
 <TextView… />
 
 </LinearLayout> 
 
 <ConstraintLayout…>
 
 <TextView… />
 
 <TextView… />
 
 <TextView… />
 
 </ConstraintLayout> → 5 VIEWS, 3 LEVELS 4 VIEWS, 2 LEVEL
  15. 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. • Balance performance gains with development effort. GO CUSTOM :
  16. 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 use RelativeLayout at the root! • Don’t let problems accumulate. • Balance performance gains with development effort.
  17. 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 40
  18. 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 41