Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Philly ETE 2017: Loving Lean Android Layouts
Search
Huyen Tue Dao
April 18, 2017
Technology
0
290
Philly ETE 2017: Loving Lean Android Layouts
Huyen's talk at Philly ETE on performance and efficiency in Android layouts.
Huyen Tue Dao
April 18, 2017
Tweet
Share
More Decks by Huyen Tue Dao
See All by Huyen Tue Dao
Less Imperative with More Kotlin
queencodemonkey
0
280
Øredev 2017: Cool ConstraintLayout
queencodemonkey
3
310
Øredev 2017: Measure. Layout. Draw. Repeat.
queencodemonkey
0
450
Be Like Water: Keeping Up with Android
queencodemonkey
2
310
DevFest DC 2017: Cool ConstraintLayout
queencodemonkey
1
13k
Chicago Roboto 2017: Cool ConstraintLayout
queencodemonkey
9
1.1k
Droidcon Boston 2017: Cool ConstraintLayout
queencodemonkey
6
510
My Life in Android
queencodemonkey
1
430
DevFest MN 2017: Cool ConstraintLayout
queencodemonkey
1
540
Other Decks in Technology
See All in Technology
Claude Code に プロジェクト管理やらせたみた
unson
7
4.8k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
260
SREのためのeBPF活用ステップアップガイド
egmc
1
780
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
220
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
290
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
400
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
630
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
600
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Language of Interfaces
destraynor
158
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
306
45k
Agile that works and the tools we love
rasmusluckow
329
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making Projects Easy
brettharned
116
6.3k
Speed Design
sergeychernyshev
32
1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
HUYEN TUE DAO @QUEENCODEMONKEY LOVING LEAN ANDROID LAYOUTS
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>
LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING
PROBLEMS GOOD PRACTICES
HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW DEPTH-FIRST TRAVERSAL INFLATION
PARENT MEASURES EACH CHILD CHILD CALCULATES MEASURED WIDTH/HEIGHT MEASURE OWN
CHILDREN (IF ANY) HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW
HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW PARENT SIZES AND
POSITIONS CHILD
HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW PARENT DRAWS PARENT
TELLS CHILDREN TO DRAW
LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING
PROBLEMS GOOD PRACTICES
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 OF onMeasure()/onLayout()
PERFORMANCE = RESOURCES USED ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY
= # EXECUTIONS OF onMeasure()/onLayout() BAD PERFORMANCE = UI JANK
MAINTAINABILITY WHY LEAN LAYOUTS
RESOURCES USED∝COMPLEXITY ∝EFFORT TO MAINTAIN AND REFACTOR = READABILITY (PARSING
+ NESTING) + STABILITY
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?
LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING
PROBLEMS GOOD PRACTICES
HIERARCHY VIEWER FINDING PROBLEMS VISUALIZATION ANDROID DEVICE MONITOR BEST ON
PHYSICAL DEVICE | 4.1+
None
None
LAYOUT INSPECTOR FINDING PROBLEMS ANDROID MONITOR EXAMINE/DEBUG LAYOUT EVENTUALLY SUPERSEDE
HIERARCHY VIEWER
None
BLUEPRINT VIEW FINDING PROBLEMS
SYSTRACE FINDING PROBLEMS SYSTEM + APPLICATION PROCESS EXECUTION DATA DATA
TRACE → INTERACTIVE REPORTS SMOOTH UI → 60FPS → 16.6MS/FRAME
None
None
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
OnFrameMetricsAvailableListener FINDING PROBLEMS MARSHMALLOW PUB/SUB API EQUIVALENT TO DUMPSYS FRAMESTATS
EXCEPT NOT LIMITED TO 120 FRAMES
LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING
PROBLEMS GOOD PRACTICES
MAKE LINT HAPPY FIXING PROBLEMS
None
LINT USELESS PARENT
LINT NESTED WEIGHTS
LINT TOO MUCH NESTING
SIMPLIFY AND REDUCE FIXING PROBLEMS
None
<LinearLayout > <ImageView /> <TextView /> </LinearLayout>
3 VIEWS, 2 LEVELS
<TextView… android:drawablePadding=“…" android:drawableEnd=“…"/> 1 VIEW, 1 LEVEL
None
None
SPANNABLES
<LinearLayout…> <TextView… style="@style/StyleA" /> <TextView… style="@style/StyleB" />
<TextView… style="@style/StyleA" /> </LinearLayout> 4 VIEWS, 2 LEVELS
<TextView…/> + Spannables 1 VIEW, 1 LEVEL
None
None
<FrameLayout… android:padding=“…” android:background=“…“> <LinearLayout /> </FrameLayout> 2 VIEWS,
2 LEVELS
<LinearLayout… android:padding=“…” android:background=“…“/> 1 VIEW, 1 LEVEL
None
None
<LinearLayout > <LinearLayout> <TextView /> <TextView />
</LinearLayout> <TextView /> </LinearLayout> 5 VIEWS, 3 LEVELS
<ConstraintLayout…> <TextView… /> <TextView… /> <TextView… />
</ConstraintLayout> 4 VIEWS, 2 LEVEL
CONSTRAINTLAYOUT MORE EXPRESSIVE MORE PERFORMANT FLATTEN HIERARCHIES REDUCE VIEWS
None
GO CUSTOM FIXING PROBLEMS CUSTOM VIEW/VIEWGROUP TOTAL CONTROL OVER LAYOUT/DRAW
BALANCE PERFORMANCE GAINS AND DEVELOPMENT EFFORT
GO CUSTOM FIXING PROBLEMS CUSTOM VIEW/VIEWGROUP TOTAL CONTROL OVER LAYOUT/DRAW
BALANCE PERFORMANCE GAINS AND DEVELOPMENT EFFORT
LOVING LEAN ANDROID LAYOUTS WHY LEAN LAYOUTS FINDING PROBLEMS FIXING
PROBLEMS GOOD PRACTICES
ANTICIPATE AND DEVELOP GOOD HABITS GOOD PRACTICES
SIMPLEST SOLUTIONS WHERE POSSIBLE GOOD PRACTICES
FEWER AND FLATTER NO RELATIVELAYOUT AT ROOT GOOD PRACTICES
DON’T LET PROBLEMS ACCUMULATE GOOD PRACTICES
BALANCE PERFORMANCE GAINS WITH DEVELOPMENT EFFORT GOOD PRACTICES
THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY
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
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
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