ImageView is pixelated on older Android devices

Question

The Problem

I have an ImageView in my XML like that:

                <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/ic_person_add"
                android:alpha="0.87" />

The ic_person_add is the normal Material design Vectoricon.

On my Nexus 5 (Android 6), the icon scales beautiful and is really sharp:

On a Note 2 (Android 4.4) however, the icon gets really pixelated and ugly:

How do I get the ImageView (with a Vector as src) sharp on every device? Preferably with an only xml solution.

I already found:

Adding android:adjustViewBounds="true" -> did nothing
ImageView images seem pixelated and low quality -> Doesn't apply to vector
Setting BitmapFactory.inscaled=false -> doesn't work with only xml and I didn't know where to put this in a custom ImageView class.

maybe you should use https://romannurik.github.io/AndroidAssetStudio/ tp generate needed sizes — piotrek1543, Jan 11 '16 at 23:12
Use "wrap_content" for android:layout_width and android:layout_height in your ImageView. That would retain the original icon size and not get pixelated — Fareya, Jan 11 '16 at 23:19
@piotrek1543 The Problem is, I shouldn't need to have different sizes since the Image is a vectorgraphic. — Jonathan, Jan 11 '16 at 23:21
@Fareya On the Nexus 5 it also works with the 100dp size and it doesn't get pixelated. Also since it is a vectorgraphic it should scale correctly to any size. — Jonathan, Jan 11 '16 at 23:22
Check your icons inside the folder \path-to-your-android-sdk-folder\platforms\android-xx\data\res Not all icons are xml shapes. A png-icon has a quality loss when it gets upscaled. — skymedium, Jan 11 '16 at 23:34
`with a Vector as src` are you sure it's a vectorial image? We have no evidence of that. — Phantômaxx, Jan 12 '16 at 09:03
Any one else looking for solution, you need to use VectorDrawableCompat. https://developer.android.com/studio/write/vector-asset-studio.html check Support Library section. — Muhammad Babar, Jan 25 '18 at 06:38

score 7 · Accepted Answer · answered Jan 12 '16 at 09:31

The real problem wasn't the DPI of the Note 2, it was its Android Version.

The Link Melllvar posted states:

Once you have a vectorDrawable image in your res/drawable, the Gradle plugin will automatically generate raster PNG images for API level 20 and below during build time

So my Android 6 device really had a Vectorgraphic as source for the ImageView so it managed to scale it up flawlessly. For the Note 2 (running on an older than Android 5 OS) Android Studio automatically converted the Vectorgraphic in my Drawables Folder to a PNG.

You can change the size of the converted PNG in the VectorXML by changing the

android:height android:width

to the size in dp your vectorgraphic needs to be displayed on pre API 20 devices. So in my Case (maximum of 100dp) I had to change the Values to:

<vector android:height="100dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="100dp">

What if you use real SVG files and use a library to read them? — Phantômaxx, Jan 12 '16 at 13:20

score 1 · Answer 2 · edited May 23 '17 at 10:29

The Nexus 5 density bucket is xxhdpi, while the Note 2's (based on this) is xhdpi. This suggests that your xxhdpi bitmap is sized properly (or is, at least, at or above the required size), while xhdpi isn't.

If you're using the automatic conversion provided by the recent versions of Android studio, you may want to try rasterizing the vector image manually to see if this fixes the issue.

If you're using raster graphics, you may want to add some visual element to each density variant to get an idea which one is actually being used.

ImageView is pixelated on older Android devices

The Problem

I already found:

2 Answers2