Drawable resize causes blurring

Question

I'm a little new to Android and have been playing around with it but am struggling with the drawable icons.

I have a icon called "icon.png" and have stored copies of it in the following folders and sizes: drawable-mdpi - 48px by 48px drawable-hdpi - 72px by 72px drawable-xhdpi - 96px by 96px drawable-xxhdpi - 144px by 144px

Now I reference this icon in a list view through an android XML file, using a image view:

android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/icon"

Now when I run the above program the icons load up perfectly, they look the right size and are anti-aliased.

However, I now want to try and upscaling these icon sizes along with the font in the textview beside it, so if the user chooses a larger font the icons enlarge too. I thought a easy way of doing this was to change the above code to:

android:layout_height="@dimen/large_size"
android:layout_width="@dimen/large_size"
android:src="@drawable/icon"

The dimen definition is:

<resources>
    ...
    <dimen name="large_size">50dp</dimen>
    ...
</resources>

Now when I run the above code it works, the image does upscale but the issue I get is it looses it's resolution and becomes so blurry. However, I assume that my drawable max size is 144px which wouldn't make it blurry would it? How can I stop it from becoming blurry when I upscale it?

Answer 1

Nevermind, I realized my problem.

I thought the drawable folders were automatic for resizing as well but I found that if you resize in xml files it won't happen properly, you have to manually have the images resized and then store the different versions in the drawable folders.

E.g. icon.png which goes into all the drawable folders and then a slightly larger version called icon_large.png which goes into all the drawable folders as well. Ofcourse each of the files have to manually be scaled up proportionally to each other.