Android - cropped image in different devices

Question

First of all, I am not sure where I did wrong in the code I wrote.

As you can see here in the screenshots, are 3 different devices. Notice the image inside the red box. The image in Xperia Z Ultra screen has been cropped, but the rest is okay:

Samsung Galaxy SII (Jelly Bean)

Nexus 7 (KitKat)

Xperia Z Ultra (KitKat)

I put the images in a ListView which is then inflated inside an adapter. Here is the layout code for the custom rows:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/img_item"
        android:src="@drawable/error"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop" />

</RelativeLayout>

In adapter, I used Picasso image loader to load the image. I didn't set any image scaling options.

public class ItemPhotoAdapter extends BaseAdapter {
    ...

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ...

        Picasso.with(context) //
                .load(iim.getResized()) //
                .placeholder(R.drawable.placeholder) //
                .error(R.drawable.error)
                .into(vh.item_image);

        return view;
    }
}

Anyone know what's going on here?

Answer 1

Looks like this has to do with the android:scaleType="centerCrop" and how an image of the same size shows up in different screen sizes/densities. I don't think this has anything to do with Picasso.

The row height of the Xperia seems to be quite a bit smaller.

This Android documentation on the different ScaleTypes may be helpful. You may have to play around with setting explicit heights (specific or min/max) for the rows for different screen types... depending on what the final product needs to be.

Image sizing for different screen densities and sizes is a headache in Android :(. You may end up needing to some programmatic adjustments if you need something really specific. The OnPreDrawListener callback might be helpful.

You can see an example here of using this callback: https://stackoverflow.com/a/4398578/413254

and the official documentation here: https://developer.android.com/reference/android/view/ViewTreeObserver.OnPreDrawListener.html