Huyen's talk at Philly ETE on performance and efficiency in Android layouts.
HUYEN TUE DAO@QUEENCODEMONKEYLOVINGLEANANDROIDLAYOUTS
View Slide
LOVINGLEANANDROIDLAYOUTSandroid:orientation="horizontal" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> 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" /> 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" /> 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" />
LOVINGLEANANDROIDLAYOUTSWHY LEAN LAYOUTSFINDING PROBLEMSFIXING PROBLEMSGOOD PRACTICES
HOW ANDROIDDRAWS LAYOUTSMEASURELAYOUTDRAWDEPTH-FIRSTTRAVERSALINFLATION
PARENT MEASURESEACH CHILDCHILD CALCULATESMEASURED WIDTH/HEIGHTMEASURE OWNCHILDREN (IF ANY)HOW ANDROIDDRAWS LAYOUTSMEASURELAYOUTDRAW
HOW ANDROIDDRAWS LAYOUTSMEASURELAYOUTDRAWPARENT SIZES ANDPOSITIONS CHILD
HOW ANDROIDDRAWS LAYOUTSMEASURELAYOUTDRAWPARENT DRAWSPARENT TELLSCHILDREN TO DRAW
WHY LEAN LAYOUTS#PERFMATTERS
PERFORMANCE = RESOURCES USED∝COMPLEXITY
PERFORMANCE = RESOURCES USED∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY
PERFORMANCE = RESOURCES USED∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY= # EXECUTIONS OFonMeasure()/onLayout()
PERFORMANCE = RESOURCES USED∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY= # EXECUTIONS OFonMeasure()/onLayout()BAD PERFORMANCE = UI JANK
MAINTAINABILITYWHY LEAN LAYOUTS
RESOURCES USED∝COMPLEXITY∝EFFORT TO MAINTAIN AND REFACTOR= READABILITY (PARSING + NESTING)+ STABILITY
CHANGE IN SIZE/POSITIONSTARTS MEASURE/LAYOUTSTARTING AT ROOT.SOME LAYOUTS NEED MULTIPLEMEASURE/LAYOUT PASSES,E.G. RELATIVELAYOUTLISTS MAKE MANYCOPIES OF SAME LAYOUTDEEP HIERARCHIES INCREASECOMPLEXITY AND DEPENDENCYWHERE ISTHE PROBLEM?
HIERARCHY VIEWERFINDING PROBLEMSVISUALIZATIONANDROID DEVICE MONITORBEST ON PHYSICAL DEVICE | 4.1+
LAYOUT INSPECTORFINDING PROBLEMSANDROID MONITOREXAMINE/DEBUG LAYOUTEVENTUALLY SUPERSEDEHIERARCHY VIEWER
BLUEPRINT VIEWFINDING PROBLEMS
SYSTRACEFINDING PROBLEMSSYSTEM + APPLICATIONPROCESS EXECUTION DATADATA TRACE → INTERACTIVE REPORTSSMOOTH UI → 60FPS → 16.6MS/FRAME
DUMPSYSFINDING PROBLEMSSYSTEM SERVICES STATUSFRAMES OF ANIMATIONadb shell dumpsys gfxinfo DETAILED FRAME TIMING INFOadb shell dumpsys gfxinfo framestats
OnFrameMetricsAvailableListenerFINDING PROBLEMSMARSHMALLOWPUB/SUB APIEQUIVALENT TO DUMPSYS FRAMESTATSEXCEPT NOT LIMITED TO 120 FRAMES
MAKE LINT HAPPYFIXING PROBLEMS
LINTUSELESSPARENT
LINTNESTED WEIGHTS
LINTTOO MUCHNESTING
SIMPLIFY AND REDUCEFIXING PROBLEMS
3 VIEWS, 2 LEVELS
android:drawablePadding=“…" android:drawableEnd=“…"/>1 VIEW, 1 LEVEL
SPANNABLES
style="@style/StyleA" /> style="@style/StyleB" /> style="@style/StyleA" /> 4 VIEWS, 2 LEVELS
+Spannables1 VIEW, 1 LEVEL
android:padding=“…”android:background=“…“> 2 VIEWS, 2 LEVELS
android:padding=“…”android:background=“…“/>1 VIEW, 1 LEVEL
5 VIEWS, 3 LEVELS
4 VIEWS, 2 LEVEL
CONSTRAINTLAYOUTMORE EXPRESSIVEMORE PERFORMANTFLATTEN HIERARCHIESREDUCE VIEWS
GO CUSTOMFIXING PROBLEMSCUSTOM VIEW/VIEWGROUPTOTAL CONTROL OVER LAYOUT/DRAWBALANCE PERFORMANCE GAINSAND DEVELOPMENT EFFORT
ANTICIPATE ANDDEVELOP GOOD HABITSGOOD PRACTICES
SIMPLEST SOLUTIONSWHERE POSSIBLEGOOD PRACTICES
FEWER AND FLATTERNO RELATIVELAYOUT AT ROOTGOOD PRACTICES
DON’T LET PROBLEMSACCUMULATEGOOD PRACTICES
BALANCE PERFORMANCE GAINSWITH DEVELOPMENT EFFORTGOOD PRACTICES
THANK YOU!SPEAKERDECK.COM/QUEENCODEMONKEYYOUTUBE.COM/ANDROIDDIALOGSRANDOMLYTYPING.COMHUYEN TUE DAO@QUEENCODEMONKEY
REFERENCES63ANDROID PERFORMANCE PATTERNS, WHY 60FPS?https://youtu.be/CaMTIgxCSqUDEVELOPING FOR ANDROID: THE NAUGHTY BITShttps://youtu.be/Q2qQoJlwqlk?t=36m4sHIERARCHY VIEWERhttps://developer.android.com/studio/profile/hierarchy-viewer.htmlLAYOUT INSPECTORhttp://tools.android.com/tech-docs/layout-inspector
REFERENCES64TESTING DISPLAY PERFORMANCEhttp://developer.android.com/training/testing/performance.htmlANALYZING UI PERFORMANCE WITH SYSTRACEhttp://developer.android.com/tools/debugging/systrace.htmlOPTIMIZING LAYOUT HIERARCHIEShttp://developer.android.com/training/improving-layouts/optimizing-layout.htmlANDROID PERFORMANCE PATTERNS, DOUBLE LAYOUT TAXATIONhttps://www.youtube.com/watch?v=dB3_vgS-UqoANDROID PERFORMANCE PATTERN, INVALIDATIONS, LAYOUTS, AND PERFORMANCEhttps://youtu.be/we6poP0kw6E
REFERENCES65BUILD A RESPONSIVE UI WITH CONSTRAINTLAYOUTdeveloper.android.com/training/constraint-layout/index.htmlANDROID DEVELOPERS BACKSTAGE: EPISODE 50: CONSTRAINT LAYOUTandroidbackstage.blogspot.com/2016/06/episode-50-constraint-layout.htmlCUSTOM VIEWGROUPShttps://sriramramani.wordpress.com/2015/05/06/custom-viewgroups/MEASURE, LAYOUT, DRAW, REPEAT: CUSTOM VIEWS AND VIEWGROUPShttps://youtu.be/dLl0ovmta6A