Picasso displays image smaller than expected (half expected size)

Question

I am using Picasso to load images from URLs like this one and display them in my Android app: http://image.tmdb.org/t/p/w185/A7HtCxFe7Ms8H7e7o2zawppbuDT.jpg

However, the problem is that they are displaying half their original size. I can't figure out why.

Loading the URL above directly in a browser, you get an image 185px x 278px

I saved one of the images locally to use as a dummy image for debugging. When I use imageView.setImageResource(R.drawable.dummyimage); the image appears as the correct size. (Sorry, I tried to attach a screenshot, but I don't have high enough Reputation.)

However, when I use Picasso.with(mContext).load(mMoviePosterURL).into(imageView); to load the images, they appear half that size. (I would attach a screenshot if I could.)

Here's my ImageView:

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/grid_item_imageview"
    android:src="@drawable/dummyimage">
</ImageView>

And my layout:

<GridView
    android:id="@+id/grid_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:verticalSpacing="0dp"
    android:horizontalSpacing="0dp"
    android:stretchMode="columnWidth"
    tools:context=".MainActivityFragment"
    android:numColumns="auto_fit">
</GridView>

The full code of my getView method in the BaseAdapter:

public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                imageView = new ImageView(mContext);
            } else {
                imageView = (ImageView) convertView;
            }

           //imageView.setImageResource(R.drawable.dummyimage);  for comparison

            if(mMoviePosterPaths!=null) {
                Picasso.with(mContext)
                   .load(mMoviePosterPaths[position])
                   .into(imageView);
            }
            return imageView;
        }

I have found a couple workarounds. One is by doing this: .resize(185*2,278*2), but I would want to avoid upscaling the image if possible.

Another is to call a larger image from the API that's providing the images, however I feel this is less efficient since it requires more data.

Searching around I haven't found anyone else with this issue so maybe I'm just doing something dumb, but I'm stumped :(

I guess the main thing here is that I'm trying to understand why imageView.setImageResource() and Picasso {...} display the same image differently.

Thank you

Answer 1

I got same problem, but using android:scaleType="fitXY" attribute in AppCompatImageView I got the exact same size as original size.

XML:

<androidx.appcompat.widget.AppCompatImageView
        android:scaleType="fitXY"
        android:id="@+id/student_photo_preview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/student"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

JAVA code:

getPicassoUnsafeCertificate(context).load(student.getPhoto())
                            .fit()
                            .networkPolicy(NetworkPolicy.NO_CACHE)
                            .memoryPolicy(MemoryPolicy.NO_CACHE)
                            .placeholder(R.drawable.no_image)
                            .error(R.drawable.no_image)
                            .into(previewImage);

I used getPicassoUnsafeCertificate() custom method for turning off the SSL verification check (I'm not concerned with this part but I added for additional benefit).

Answer 2

You resize the image to double of its original size. That's why the image show only half. Try removing

.resize(185*2,278*2)

or adjust the width and height.

.resize(185,278)

And in your ImageView, add

android:scaleType="fitXY"

Hope this helps :)