Why Isn't My Vector Drawable Scaling as Expected

Why isn't my vector drawable scaling as expected?

There is new info about this issue here:

https://code.google.com/p/android/issues/detail?id=202019

It looks like using
android:scaleType="fitXY" will make it scale correctly on Lollipop.

From a Google engineer:

Hi, Let me know if scaleType='fitXY' can be a workaround for you , in
order to get the image look sharp.

The marshmallow Vs Lollipop is due to a special scaling treatment
added into marshmallow.

Also, for your comments: " Correct behavior: The vector drawable
should scale without quality loss. So if we want to use the same asset
in 3 different sizes in our application, we don't have to duplicate
vector_drawable.xml 3 times with different hardcoded sizes. "

Even though I totally agree this should be the case, in reality, the
Android platform has performance concern such that we have not reach
the ideal world yet. So it is actually recommended to use 3 different
vector_drawable.xml for better performance if you are sure you want
to draw 3 different size on the screen at the same time.

The technical detail is basically we are using a bitmap under the hook
to cache the complex path rendering, such that we can get the best
redrawing performance, on a par with redrawing a bitmap drawable.

android vector drawable size limit

The short answer is NO.

The linter keep complains for this for the reason.

The initial loading of a vector drawable can cost more CPU cycles than the corresponding raster image. Afterward, memory use and performance are similar between the two. We recommend that you limit a vector image to a maximum of 200 x 200 dp; otherwise, it can take too long to draw.

So if you declare both width and height below 200 dp, but load it and set the size bigger than 200 dp programmatically. It's the same thing. The CPU still needs to doing math to calculate vectors. It still costs a lot depends on how big it was. The vector drawable is ideally for icons, which typically is small.

If you are using vector drawable bigger than that. You should use raster images instead.

Strange issue with vector drawables. Jagged edges in ImageView

This happens because of the fact that Drawable instances loaded from the same resource share a ConstantState instance. I'm not sure exactly what part of the ConstantState is responsible for this, but you're functionally getting two different 64x64 drawables, with one (badly) scaled down.

You can fix the problem by using the Drawable.mutate() method to make sure that your two ImageViews are getting Drawables with different ConstantState. You only need to mutate() one of the two drawables, and which one you choose doesn't matter.

Of course, this means you're going to have to get an actual Drawable instance instead of using setImageResource().

ImageView large = findViewById(R.id.large);
large.setImageResource(R.drawable.ic_arrow_drop_down_circle_black_24dp);

ImageView small = findViewById(R.id.small);
small.setImageDrawable(AppCompatResources.getDrawable(this, R.drawable.ic_arrow_drop_down_circle_black_24dp).mutate());

---

Related Topics