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.

Optimising The Performance Of VectorDrawables

136 views

Published on

Support for SVG finally arrived to Android in the form of vector drawables. You have replaced (or you are planning to replace) absolutely all your PNGs with VectorDrawables and your APK is smaller. Hurrah!
But now your app feels slower, the render time of your views has increased and you don’t know why!
In this talk, I will describe how vector drawables work and how they are rendered. I will show how big the difference in render time can be between vector drawables and PNGs for drawing areas bigger than 200x200dp and how to improve this.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Optimising The Performance Of VectorDrawables

  1. 1. @FMuntenescu Optimizing The Performance Of VectorDrawables
  2. 2. @FMuntenescu #PERFMATTERS Optimising the performance of VectorDrawables
  3. 3. @FMuntenescu res drawable card.png (5) card.png (hdpi) card.png (mdpi) card.png (xhdpi) card.png (xxhdpi) card.png (xxxhdpi)
  4. 4. @FMuntenescu res drawable card.png (5) card.png (hdpi) card.png (mdpi) card.png (xhdpi) card.png (xxhdpi) card.png (xxxhdpi) 134 KB
  5. 5. @FMuntenescu res drawable card.png (5) card.png (hdpi) card.png (mdpi) card.png (xhdpi) card.png (xxhdpi) card.png (xxxhdpi) res drawable card.xml 134 KB
  6. 6. @FMuntenescu res drawable card.png (5) card.png (hdpi) card.png (mdpi) card.png (xhdpi) card.png (xxhdpi) card.png (xxxhdpi) res drawable card.xml 134 KB 3 KB
  7. 7. @FMuntenescu Runtime rendering
  8. 8. @FMuntenescu VectorDrawable PNG
  9. 9. @FMuntenescu
  10. 10. @FMuntenescu ImageView.onDraw()
  11. 11. @FMuntenescu ImageView.onDraw() - 17 ms
  12. 12. @FMuntenescu 17 ms 0.2 ms
  13. 13. @FMuntenescu 17 ms 0.2 ms 0.2 ms
  14. 14. @FMuntenescu 17 ms 0.2 ms 0.2 ms
  15. 15. @FMuntenescu 17 ms 0.2 ms 0.2 ms 10 ms
  16. 16. @FMuntenescu 17 ms 0.2 ms 0.2 ms 16 ms 10 ms
  17. 17. @FMuntenescu 17 ms 0.2 ms 0.2 ms 16 ms 10 ms
  18. 18. @FMuntenescu 445 x 210 dp
  19. 19. @FMuntenescu 10.5 ms
  20. 20. @FMuntenescu 10.5 ms 0.14 ms
  21. 21. @FMuntenescu 10.5 ms 0.14 ms 0.15 ms
  22. 22. @FMuntenescu 0.15 ms 10.5 ms 0.14 ms 0.13 ms
  23. 23. @FMuntenescu VectorDrawable vs Raster image
  24. 24. @FMuntenescu VectorDrawable vs Raster image Longer 1st time, shorter afterwards
  25. 25. @FMuntenescu VectorDrawable vs Raster image Longer 1st time, shorter afterwards Constant drawing time
  26. 26. @FMuntenescu 60fps & 16ms
  27. 27. @FMuntenescu https://developer.android.com/studio/write/vector-asset-studio.html
  28. 28. @FMuntenescu 200 x 200 dp
  29. 29. @FMuntenescu 17 ms 2.8 ms
  30. 30. @FMuntenescu VectorDrawable complexity
  31. 31. @FMuntenescu <ImageView android:src=“@drawable/card”/>
  32. 32. @FMuntenescu <ImageView android:src=“@drawable/card”/>
  33. 33. @FMuntenescu <ImageView android:src=“@drawable/card”/>
  34. 34. @FMuntenescu <ImageView android:src=“@drawable/card” android:background=“...” />
  35. 35. @FMuntenescu <LinearLayout android:background=“...”> <View android:background=“...shape” ... </LinearLayout>
  36. 36. @FMuntenescu <LinearLayout android:background=“...”> <View android:background=“...shape” <View android:background=“...shape2” <View android:background=“...shape3” <View android:background=“...shape4” ... </LinearLayout>
  37. 37. @FMuntenescu Shapes
  38. 38. @FMuntenescu Shapes Small VectorDrawables
  39. 39. @FMuntenescu Shapes Small VectorDrawables WebP
  40. 40. @FMuntenescu Supporting multiple sizes?
  41. 41. @FMuntenescu Bigger than 200 x 200 dp?
  42. 42. @FMuntenescu How complex is the VectorDrawable?
  43. 43. @FMuntenescu Optimizing The Performance Of VectorDrawables jobs@updudes.net https://upday.github.io/blog/vector_drawables_optimisation

×