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