infinum android talks #09 - ui optimization
TRANSCRIPT
UI optimization of android applications
Dino Kovač, Ivan Marić
–Donald Knuth
“Premature optimization is the root of all evil.”
Tools
• Hierarchy Viewer
• “Show GPU Overdraw” (Developer options, android 4.2+)
Example app• One relevant activity
• Two lists
• A compound view as the right list item
View tree
How android draws views
1. measure pass - each view stores its measurements
2. layout pass - each view positions its children
3. draw pass - each view draws itself
Focus of optimization• Flattening layout hierarchy
• Minimizing overdraw
Layout simplification
<merge />
<merge />
Overdraw
• Pixels get drawn more than once
• blue(2), green(3), light red(4), dark red(5)
• mostly multiple backgrounds
Tweaking the selector
Overdraw before/after
Some numbers
Hierarchy depth
Total views Measure Layout Draw Total
Before 9 76 0.354 1.7792 3.3624 5.4956
After 8 52 0.3402 1.0984 2.7098 4.1484
Space
• “a lightweight View subclass that may be used to create gaps between components”
• draw() method empty
ViewStub
• “an invisible, zero-sized View that can be used to lazily inflate layout resources at runtime”
• does not support the <merge /> tag
ViewStub use case
ViewStub usage
((ViewStub) findViewById(R.id.stub_import)).inflate();
View tree before inflating
View tree after inflating
Think outside of boxIvan Marić
Problem
• Implement items preview in grid
• Enable swipe gesture
• Enable editing grid
• No limit to number of pages
Solution
• ViewPager with GridView
• Grid item view states:• Preview empty state• Item preview• Edit empty state
Optimize
• Simplify layout with just one view
• Eliminate measurement
• Custom view
References• http://www.youtube.com/watch?v=URyoiAt8098
• http://www.youtube.com/watch?v=-FUw8HMbmBQ
• http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-by.html
• http://developer.android.com/training/improving-layouts/optimizing-layout.html
• http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-with.html
• https://github.com/reisub/android_uioptimizationexample