Apps ImageButton Icon blurry when scaled!

[croninberg]

I'm working on a little android wear heart rate application and using an ImageButton with a heart icon which I'm trying to scale, but each time its blurry. I'm using src to get the icon and scaletype to fitXY, but it hasn't helped. This is the result i'm getting.

Any ideas of what to do?

 

[Deleted User]

If this is a raster image, it will suffer from blurring if you scale it up. You would need a separate bigger, and higher resolution image to avoid the blurring.
Alternatively, use a vector image, which doesn't suffer from blurring when scaled.

https://modassicmarketing.com/understanding-image-file-types

 

[croninberg]

Well the image is an icon png from https://materialdesignicons.com/, which I would of thought would scale?

 

[Deleted User]

a png is a raster image, which as you have found, does not scale well.

Rather than scale images, app developers tend to include images of different sizes, to cope with the various device screen sizes out there.

If your image isn't the right size, don't scale it, just find one that is the right size.

Or use a vector image. It turns out that Android Studio has something called Vector Asset Studio, which I've never used myself, but you may want to look into it:

https://developer.android.com/studio/write/vector-asset-studio.html

 

[croninberg]

Ah christ you just reminded me that I often use svg for icons and not png! For some reason I had this notion that png was a vector graphic when its not. Thanks so much again!!

That plugin sounds pretty good, I'm going to install it and give it a trial run. I like that I won't have to have multiple instances of an icon for screen size and it seems it automatically creates a raster image when need be for devices running on API level 2o or less.