Vector Drawables showing Blurr image on ANDROID NOUGAT

Question

I am new to android. I am trying to use vector drawables in my application. The below code works fine till Marshmallow version. Also works fine on lower versions. But as soon as I run it on Nougat the image gets blurr.

My build.gradle (project)version is 2.0+ and have added below code in my build.gradle (app)

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        minSdkVersion 15
        targetSdkVersion 25
        vectorDrawables.useSupportLibrary = true
    }

Support version is:

compile 'com.android.support:appcompat-v7:25.3.1'

Also I have added the below code in onCreate method

 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);

In my XML:

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:srcCompat = "@drawable/ic_camera_black_24dp"/>

Have you tried adding `android:scaleType="fitXY"` to your ImageView XML? — MatPag, Jun 21 '17 at 07:10
@MatPag Thanks for the quick reply. I have tried that too, but all in vain. Still the image is blurred. — Matrix, Jun 21 '17 at 07:37
Can you assemble a small sample project and provide the github link? Im curious about this because vector drawables had a lot of problems in the past which should be solved with the latest support library — MatPag, Jun 21 '17 at 07:41
@MatPag I have uploaded it on GitHub. Link is: https://github.com/ChoudharyAnjali/Vector-drawable — Matrix, Jun 21 '17 at 09:30
@MatPag I think I found the solution. But its little weird. I set the drawable on Imageview via java code not through XML. Drawable vectorDrawable = AppCompatResources.getDrawable(this, R.drawable.ic_camera_black_24dp); mImageView.setImageDrawable(vectorDrawable); Also I have to add scaleType = "fitXY" in XML — Matrix, Jun 21 '17 at 10:46
I also have one more question to ask. How to convert **png or jpg** files to **vectorDrawables**. Or if the user which uses my application captures an image. How to convert that into vector drawable. Is there any way to do it? — Matrix, Jun 21 '17 at 12:33

MatPag · Accepted Answer · 2017-06-21T23:06:56.587

1

I've played a bit with your code and what i've discovered is that the problem seems to be caused by the use of really different sizes of the same icon. In you specific case, you had the ImageView with the vector icon at 200x200dp and the same icon attached to the TextView with the method setCompoundDrawablesRelativeWithIntrinsicBounds which uses the vector defined width and height to determine its size. (24dp in your case)

The main reason behind this behaviour is the response of this Google engineer which you can find here.

So, if you don't want have problems in the future, you shouldn't use the same vector icon with size 200x200dp and 24x24dp, because the system will create some cached Bitmap (to optimize performance) which won't be of the size you need, and this can result in blurry images on some devices.

If you need the same exact icon in really different sizes, use multiple Vector drawables.

PS: About your comment question on how to convert JPEG or PNG to a vector drawable, i can say that vectors shouldn't be builded by photos (even if possible it is extremely hard and expensive), vectors are convenient only if you use small paths, that's why they are used only for icons or logos

edited Jun 21 '17 at 23:06

answered Jun 21 '17 at 22:09

MatPag

41,742
14
105
114

Did you mean to write "multiple PNGs"? I would have said multiple VectorDrawables as that answer you linked to suggested. – Lewis McGeary Jun 21 '17 at 23:04
1

Yes sorry, i mean multiple Vector resources, i will correct it ASAP – MatPag Jun 21 '17 at 23:06
@MatPag Thanks a lot. I was really getting confused about why the image is blurred. That was really a good explanation. :) . Also about the conversion question **What if I have small icons as PNG and I want to convert those small icons into vector drawables. How to achieve that ?** – Matrix Jun 22 '17 at 06:12
If you have simple PNG icons, you can use an online tool and try what's the result, like https://www.vectorizer.io/ (search on google for more options). The best way should be to use a program like Adobe Illustrator and using the PNG as background re-creating the path in a vector (but you need to know how to use those programs). Btw accept the answer if it helped you a bit (the check under the arrows). Good luck man :) – MatPag Jun 22 '17 at 06:50

Vector Drawables showing Blurr image on ANDROID NOUGAT

1 Answers1