Philly ETE 2017: Loving Lean Android Layouts

Huyen's talk at Philly ETE on performance and efficiency in Android layouts.

Transcript

1. HUYEN TUE DAO @QUEENCODEMONKEY LOVING LEAN ANDROID LAYOUTS
2. LOVING LEAN ANDROID LAYOUTS <LinearLayout
 android:orientation="horizontal"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/help_im_being_repressed"
 android:textStyle="bold"
 style="@style/TextAppearance.AppCompat.Body1" />
 
 <ImageView
 android:layout_width="0dp"
 android:layout_height=“@dimen/image_height"
 android:layout_weight="2"
 android:src="@drawable/berries_plate"
 android:scaleType="centerCrop"
 android:contentDescription="@null" />
 
 <ImageView
 android:layout_width="0dp"
 android:layout_height="@dimen/image_height"
 android:layout_weight="1"
 android:src="@drawable/creme_brulee"
 android:scaleType="centerCrop"
 android:contentDescription="@null" />
 
 </LinearLayout>
3. LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING PROBLEMS GOOD PRACTICES
4. HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW DEPTH-FIRST TRAVERSAL INFLATION
5. PARENT MEASURES EACH CHILD CHILD CALCULATES MEASURED WIDTH/HEIGHT MEASURE OWN CHILDREN (IF ANY) HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW
6. HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW PARENT SIZES AND POSITIONS CHILD
7. HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW PARENT DRAWS PARENT TELLS CHILDREN TO DRAW
8. LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING PROBLEMS GOOD PRACTICES
9. WHY LEAN LAYOUTS #PERFMATTERS
10. PERFORMANCE = RESOURCES USED ∝COMPLEXITY
11. PERFORMANCE = RESOURCES USED ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY
12. PERFORMANCE = RESOURCES USED ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY = # EXECUTIONS OF onMeasure()/onLayout()
13. PERFORMANCE = RESOURCES USED ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY = # EXECUTIONS OF onMeasure()/onLayout() BAD PERFORMANCE = UI JANK
14. MAINTAINABILITY WHY LEAN LAYOUTS
15. RESOURCES USED∝COMPLEXITY ∝EFFORT TO MAINTAIN AND REFACTOR = READABILITY (PARSING + NESTING) + STABILITY
16. 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 WHERE IS THE PROBLEM?
17. LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING PROBLEMS GOOD PRACTICES
18. HIERARCHY VIEWER FINDING PROBLEMS VISUALIZATION ANDROID DEVICE MONITOR BEST ON PHYSICAL DEVICE | 4.1+
21. LAYOUT INSPECTOR FINDING PROBLEMS ANDROID MONITOR EXAMINE/DEBUG LAYOUT EVENTUALLY SUPERSEDE HIERARCHY VIEWER
23. BLUEPRINT VIEW FINDING PROBLEMS
24. SYSTRACE FINDING PROBLEMS SYSTEM + APPLICATION PROCESS EXECUTION DATA DATA TRACE → INTERACTIVE REPORTS SMOOTH UI → 60FPS → 16.6MS/FRAME
27. DUMPSYS FINDING PROBLEMS SYSTEM SERVICES STATUS FRAMES OF ANIMATION adb shell dumpsys gfxinfo <PACKAGE_NAME> DETAILED FRAME TIMING INFO adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats
28. OnFrameMetricsAvailableListener FINDING PROBLEMS MARSHMALLOW PUB/SUB API EQUIVALENT TO DUMPSYS FRAMESTATS EXCEPT NOT LIMITED TO 120 FRAMES
29. LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING PROBLEMS GOOD PRACTICES
30. MAKE LINT HAPPY FIXING PROBLEMS
32. LINT USELESS PARENT
33. LINT NESTED WEIGHTS
34. LINT TOO MUCH NESTING
35. SIMPLIFY AND REDUCE FIXING PROBLEMS
37. <LinearLayout >
 
 <ImageView />
 
 <TextView />
 
 </LinearLayout> 3 VIEWS, 2 LEVELS
38. <TextView…
 android:drawablePadding=“…"
 android:drawableEnd=“…"/> 1 VIEW, 1 LEVEL
41. SPANNABLES
42. <LinearLayout…>
 
 <TextView…
 style="@style/StyleA" />
 
 <TextView…
 style="@style/StyleB" />
 
 <TextView…
 style="@style/StyleA" />
 
 </LinearLayout> 4 VIEWS, 2 LEVELS
43. <TextView…/> + Spannables 1 VIEW, 1 LEVEL
46. <FrameLayout… android:padding=“…” android:background=“…“>
 
 <LinearLayout />
 
 </FrameLayout> 2 VIEWS, 2 LEVELS
47. <LinearLayout… android:padding=“…” android:background=“…“/> 1 VIEW, 1 LEVEL
50. <LinearLayout >
 
 <LinearLayout>
 
 <TextView />
 
 <TextView />
 
 </LinearLayout>
 
 <TextView />
 
 </LinearLayout> 5 VIEWS, 3 LEVELS
51. <ConstraintLayout…>
 
 <TextView… />
 
 <TextView… />
 
 <TextView… />
 
 </ConstraintLayout> 4 VIEWS, 2 LEVEL
52. CONSTRAINTLAYOUT MORE EXPRESSIVE MORE PERFORMANT FLATTEN HIERARCHIES REDUCE VIEWS
54. GO CUSTOM FIXING PROBLEMS CUSTOM VIEW/VIEWGROUP TOTAL CONTROL OVER LAYOUT/DRAW BALANCE PERFORMANCE GAINS AND DEVELOPMENT EFFORT
55. GO CUSTOM FIXING PROBLEMS CUSTOM VIEW/VIEWGROUP TOTAL CONTROL OVER LAYOUT/DRAW BALANCE PERFORMANCE GAINS AND DEVELOPMENT EFFORT
56. LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING PROBLEMS GOOD PRACTICES
57. ANTICIPATE AND DEVELOP GOOD HABITS GOOD PRACTICES
58. SIMPLEST SOLUTIONS WHERE POSSIBLE GOOD PRACTICES
59. FEWER AND FLATTER NO RELATIVELAYOUT AT ROOT GOOD PRACTICES
60. DON’T LET PROBLEMS ACCUMULATE GOOD PRACTICES
61. BALANCE PERFORMANCE GAINS WITH DEVELOPMENT EFFORT GOOD PRACTICES
62. THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY
63. REFERENCES 63 ANDROID PERFORMANCE PATTERNS, WHY 60FPS? https://youtu.be/CaMTIgxCSqU DEVELOPING FOR ANDROID: THE NAUGHTY BITS https://youtu.be/Q2qQoJlwqlk?t=36m4s HIERARCHY VIEWER https://developer.android.com/studio/profile/hierarchy-viewer.html LAYOUT INSPECTOR http://tools.android.com/tech-docs/layout-inspector
64. REFERENCES 64 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
65. REFERENCES 65 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