Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Infinum Android Talks #09 - UI optimization

1,111 views

Published on

In this talk we'll show you some concrete examples of how to make your app faster by optimizing your views and layouts

Published in: Software
  • Be the first to comment

Infinum Android Talks #09 - UI optimization

  1. 1. UI optimization of android applications Dino Kovač, Ivan Marić
  2. 2. –Donald Knuth “Premature optimization is the root of all evil.”
  3. 3. Tools • Hierarchy Viewer • “Show GPU Overdraw” (Developer options, android 4.2+)
  4. 4. Example app • One relevant activity • Two lists • A compound view as the right list item
  5. 5. View tree
  6. 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. 7. Focus of optimization • Flattening layout hierarchy • Minimizing overdraw
  8. 8. Layout simplification
  9. 9. <merge />
  10. 10. <merge />
  11. 11. Overdraw • Pixels get drawn more than once • blue(2), green(3), light red(4), dark red(5) • mostly multiple backgrounds
  12. 12. Tweaking the selector
  13. 13. Overdraw before/after
  14. 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. 15. Space • “a lightweight View subclass that may be used to create gaps between components” • draw() method empty
  16. 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. 17. ViewStub use case
  18. 18. ViewStub usage ((ViewStub) findViewById(R.id.stub_import)).inflate();
  19. 19. View tree before inflating
  20. 20. View tree after inflating
  21. 21. Think outside of box Ivan Marić
  22. 22. Problem • Implement items preview in grid • Enable swipe gesture • Enable editing grid • No limit to number of pages
  23. 23. Solution • ViewPager with GridView • Grid item view states: • Preview empty state • Item preview • Edit empty state
  24. 24. Optimize • Simplify layout with just one view • Eliminate measurement • Custom view
  25. 25. 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

×