Image streching in list view for multiple resolutions

Question

This question may be off topic but I am really looking for an answer.

I am using list it has image and text (40% image and 60% text). Image is loading from the server. I am using Universal Image loading lib for cache. We are sending image resolutions as 200*200 for all resolution. In some devices it looks little stretch, Is there any way that we can add image width height as per resolution.

Simply I want to download image according to device resolution. but how I will calculate image width and height for different resolutions to fit 40% of list item?

Edit: Added layout xml (List item layout)

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.4"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/recommendationlist_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/imgnt_placeholder" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="0.6"
    android:padding="10dp" >

    <TextView
        android:id="@+id/recommendationlist_eventname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="start|center_vertical"
        android:maxLines="2"
        android:minLines="1"
        android:textColor="#86bc25"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/recommendationlist_venuename"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/recommendationlist_eventname"
        android:layout_alignStart="@id/recommendationlist_eventname"
        android:layout_below="@id/recommendationlist_eventname"
        android:textColor="#444444"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/recommendationlist_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/recommendationlist_venuename"
        android:layout_alignParentBottom="true"
        android:layout_alignStart="@id/recommendationlist_venuename"
        android:textColor="#444444"
        android:textSize="14sp"
        android:textStyle="bold|italic" />
</RelativeLayout>

Thank You

Use Picaso for load image from server.. – Santosh Mar 28 '15 at 06:13 — Santosh, Mar 28 '15 at 06:13
change ScaleType to --> android:scaleType="Center" – Gagan Apr 02 '15 at 06:03 — Gagan, Apr 02 '15 at 06:03

score 1 · Answer 1 · edited May 23 '17 at 11:56

Your image will always be stretched/shrunk or will otherwise simply leave some blank space if the aspect ratio of the image is not matching the aspect ratio of your list view item (ie. your device if it's set to match/fill parent)

There are not too many ways to avoid it unless you download the exact aspect ratio your device supports. You can either use scaleType to control the behavior in case the aspect ratio are different (using for instance centerCrop) which has its limitations or calculate the width/height of the list view item according to this solution:

Calculating the height of each row of a ListView

and then downloading the correct image from your server if it supports multiple resolutions/aspect ratios.

Using different image libraries won't fix the problem (unlike what the other answer tells you). the problem here is that you're showing an image with fixed resolution and fixed aspect ratio in a container that has a different aspect ratio and supports different resolution (leading to stretched images and/or pixilation).

If your server can supply the correct aspect ratio (calculated using the post I linked), you can use the ImageScaleType.EXACTLY (or even ImageScaleType.EXACTLY_STRETCHED) on UIL to then load it to meet your resolution. This should avoid the problem with the image looking stretched on different devices.

Should your server not support different resolutions, maybe centerCrop is your best bet. It will center the image in the image view and will crop anything that doesn't fit inside which will be better than stretching the image (by using fitXY) that you're using.

score 0 · Answer 2 · answered Mar 28 '15 at 05:48

0

You can also use picasso : https://github.com/square/picasso

OR

Glide : https://github.com/bumptech/glide

For image better resolution and quality

answered Mar 28 '15 at 05:48

Darsh Patel

1,015
9
15

inmyth · Answer 3 · 2015-04-01T17:22:33.763

This sounds like a conflicting problem. You cannot maintain fixed container width (in your case 40% of screen width) while at the same time matching it with aspect ratio of the image. Beside your source images are all 200 x 200. How can you know if 40% of screen width x ImageView height will match the same ratio ? (even if rescaling is not taken into account)

I think you should change the scaleType from fitXY to centerCrop (already suggested by others, but make sure your image is at least as big as the biggest possible ImageView on your target device).

The better way is to create different layouts for different screen resolutions. This way you can define not only ImageView but anything else for a given screen. For example you can put all the layouts for devices with screen width bigger or equal to 600dp (like most tablets) in:

res/layout/layout-w600dp

score 0 · Answer 4 · answered Apr 05 '15 at 15:31

Try this layout:

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_weight="0.4"
  android:orientation="vertical" >

 <FrameLayout
    android:id="@+id/fm_imageview1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentCenter="true"
    >

  <ImageView
    android:id="@+id/recommendationlist_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:layout_gravity="center"
    android:gravity="center"
    android:contentDescription="@string/app_name"
    android:src="@drawable/imgnt_placeholder" />

  </FrameLayout>
</RelativeLayout>

<RelativeLayout
   ... ...
  >

  //no change

</RelativeLayout>

Hope this help!

score 0 · Answer 5 · answered Apr 06 '15 at 05:16

Just use

android:scaleType="centerCrop"
android:background="@drawable/img_placeholder"

this will crop the image according to the size of imageview, if the imageview will be a square then there will be no cropping. Also, keep different "img_placeholder" in drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi folders accordingly.

Image streching in list view for multiple resolutions

5 Answers5