CODEWITHSUNDEEP
javaandroid
Isak
Isak

Reputation: 116

Strange issue with vector drawables. Jagged edges in ImageView

I have two ImageViews in the same layout, one has width and height set to 56dp and the other one to 64dp. I have added a vector asset to the project (I chose a predefined vector asset from Android Studio). I use ImageView.setImageResource(int resId) when setting the same vector drawable to the two ImageViews.

For some reason, this results in the smallest of the ImageViews having jagged edges. It doesn't matter which order I set the Drawables to the ImageViews. It doesn't matter which ImageView is the smallest or what sizes they have. As long as one is smaller than the other, the smallest will always have jagged edges.

compileSdkVersion 28
minSdkVersion 28

Screenshot

Upvotes: 1

Views: 669

Answers (1)

Ben P.
Ben P.

Reputation: 54204

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());

Upvotes: 4

Related Questions