How can I display scaled images without losing clarity?

I have to display small thumbnail images for my ListView, with the full image on a detail screen.

I'm using the same image for the two layouts. Here is my list item <ImageView>:

<ImageView android:layout_height="50dip"                             
    android:layout_width="50dip" 
    android:id="@+id/item_view_img" 
    android:scaleType="fitXY">
</ImageView>

Here is my detail view's <ImageView>:

<ImageView android:id="@+id/update_details_img"
    android:layout_width="289dip" android:layout_height="206dip"
    android:src="@drawable/q_silhouette" android:paddingTop="10dp"
    android:scaleType="fitXY" android:gravity="center">                                     
</ImageView>

The original image size is about 300x360. Neither of my image displays are looking good. How can I show these images without losing clarity?

Solution

This question is not as much an Android question as it is a 2D graphics question. Currently there are many graphics gurus trying to solve the exact problem you are having.

It is impossible to change image dimensions without losing fidelity from the original. The issue really is whether or not that loss in fidelity results in loss of clarity. Most often, the answer is as fidelity goes down, so does clarity. There are many ways to mitigate this, however.

As a general rule of thumb, you may downsize an image to about 1/2 the original size without artifacts. After this is accomplished, you may often downsize one more time depending upon the complexity of the image (number of colors).

Alternatively, you may upsize an image to approximately 1.75 the original. You can almost never cheat the system by upsizing again.

All bets are off, however, if you change the aspect ratio. This is because it will distort the image in other ways. In Android, you may avoid changing the aspect ratio in XML by setting the scaleType attribute to centerInside value. This will help considerably and keep the image within the bounds. You should especially do this for your thumbnail ImageView, unless you are going to set it with the same aspect ratio as the detailed ImageView.