optimising the performance of vectordrawables

@FMuntenescu

Optimizing The Performance Of

VectorDrawables

@FMuntenescu

#PERFMATTERSOptimising the performance of VectorDrawables

@FMuntenescu

res drawable

card.png (5) card.png (hdpi) card.png (mdpi) card.png (xhdpi) card.png (xxhdpi) card.png (xxxhdpi)

@FMuntenescu

res drawable

card.png (5) card.png (hdpi) card.png (mdpi) card.png (xhdpi) card.png (xxhdpi) card.png (xxxhdpi)

134 KB

@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

@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

@FMuntenescu

Runtime rendering

@FMuntenescuVectorDrawable

PNG

@FMuntenescu

@FMuntenescu

ImageView.onDraw()

@FMuntenescu

ImageView.onDraw() - 17 ms

@FMuntenescu

17 ms0.2 ms

@FMuntenescu

17 ms0.2 ms

0.2 ms

@FMuntenescu

17 ms0.2 ms

0.2 ms

@FMuntenescu

17 ms0.2 ms

0.2 ms 10 ms

@FMuntenescu

17 ms0.2 ms

0.2 ms

16 ms

10 ms

@FMuntenescu

17 ms0.2 ms

0.2 ms

16 ms

10 ms

@FMuntenescu

445 x 210 dp

@FMuntenescu

10.5 ms

@FMuntenescu

10.5 ms0.14 ms

@FMuntenescu

10.5 ms0.14 ms 0.15 ms

@FMuntenescu

0.15 ms

10.5 ms0.14 ms

0.13 ms

@FMuntenescu

VectorDrawable vs Raster image

@FMuntenescu

VectorDrawable vs Raster image

Longer 1st time, shorter afterwards

@FMuntenescu

VectorDrawable vs Raster image

Longer 1st time, shorter afterwards

Constant drawing time

@FMuntenescu

60fps & 16ms

@FMuntenescu

https://developer.android.com/studio/write/vector-asset-studio.html

@FMuntenescu

200 x 200 dp

@FMuntenescu

17 ms 2.8 ms

@FMuntenescu

VectorDrawable complexity

@FMuntenescu

<ImageViewandroid:src=“@drawable/card”/>

@FMuntenescu

<ImageViewandroid:src=“@drawable/card”/>

@FMuntenescu

<ImageViewandroid:src=“@drawable/card”/>

@FMuntenescu

<ImageViewandroid:src=“@drawable/card”android:background=“...” />

@FMuntenescu

<LinearLayoutandroid:background=“...”>

<Viewandroid:background=“...shape”

...</LinearLayout>

@FMuntenescu

<LinearLayoutandroid:background=“...”>

<Viewandroid:background=“...shape”

<Viewandroid:background=“...shape2”

<Viewandroid:background=“...shape3”

<Viewandroid:background=“...shape4”

...

</LinearLayout>

@FMuntenescu

Shapes

@FMuntenescu

Shapes

Small VectorDrawables

@FMuntenescu

Shapes

Small VectorDrawables

WebP

@FMuntenescu

Supporting multiple sizes?

@FMuntenescu

Bigger than 200 x 200 dp?

@FMuntenescu

How complex is the VectorDrawable?

@FMuntenescu

Optimizing The Performance Of

VectorDrawablesjobs@updudes.net

https://upday.github.io/blog/vector_drawables_optimisation