VectorDrawable image becomes pixelated

Question

I've used a couple of images which I've imported using Android Studio's Vector Asset Studio through a local SVG file.

The images loaded perfectly on my nexus 6p, however, on the Sony Xperia Z, its very pixelated, and on Samsung Galaxy s2, its even worse.

From my understanding, since the file is a xml (vector) and not a png file, it should have been able to resize automatically or am I missing out on something.

I've attached an image of the 3 cases.

EDIT: Just some extra info: The file was originally a PNG, however, I've fully converted to an vector file using a program called Vector Magic. I can open it on illustrator and edit each line etc.

Solved by changing from VectorDrawable to VectorDrawableCompat through the VectorDrawableCompat.create(..) method. Thanks @pskink.

Answer 1

Adding android:scaleType="fitXY" to the image solved it for me.

Answer 2

Android supports SVG on API level 21 and higher. For API level 19, 20 it fallback to png generation. The SVG we had put in the app had a smaller size for these generations and hence you seem to get pixelated images on your screen. In my case increasing the

<vector android:height="70dp" android:width="70dp"

of the vector XML generated better png and it started to look better on older devices

Answer 3

For me the reason that caused vectors to be converted to png was android:fillType="evenodd" attribute in my vector drawable. When I removed all occurrences of this attribute in my drawable (thus the vector using the default nonzero fill type), next time the app was built everything was fine.