The document discusses techniques for optimizing Android application UI, emphasizing the importance of limiting layout hierarchy and minimizing overdraw. It highlights various tools, such as the hierarchy viewer and GPU overdraw, and provides practical examples of layout simplification and the use of lightweight view subclasses. Additionally, it presents a problem-solving approach for implementing a grid-based item preview with swipe gestures using ViewPager and GridView.

1. UI optimization of android
applications
Dino Kovač,
Ivan Marić

2. –Donald Knuth
“Premature optimization is the root of all evil.”

3. Tools
• Hierarchy Viewer
• “Show GPU Overdraw” (Developer options, android
4.2+)

4. Example app
• One relevant activity
• Two lists
• A compound view as the
right list item

5. View tree

6. 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

7. Focus of optimization
• Flattening layout hierarchy
• Minimizing overdraw

8. Layout simplification

9. <merge />

10. <merge />

11. Overdraw
• Pixels get drawn more
than once
• blue(2), green(3), light
red(4), dark red(5)
• mostly multiple
backgrounds

12. Tweaking the selector

13. Overdraw before/after

14. 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

15. Space
• “a lightweight View subclass that may be used to
create gaps between components”
• draw() method empty

16. ViewStub
• “an invisible, zero-sized View that can be used to
lazily inflate layout resources at runtime”
• does not support the <merge /> tag

17. ViewStub use case

18. ViewStub usage
((ViewStub) findViewById(R.id.stub_import)).inflate();

19. View tree before inflating

20. View tree after inflating

21. Think outside of box
Ivan Marić

22. Problem
• Implement items preview in grid
• Enable swipe gesture
• Enable editing grid
• No limit to number of pages

23. Solution
• ViewPager with GridView
• Grid item view states:
• Preview empty state
• Item preview
• Edit empty state

25. Optimize
• Simplify layout with just one view
• Eliminate measurement
• Custom view

29. 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