Picasso Does Not Preserve Aspect Ratio While Resizing Image

14
votes

I'd like to preserve the aspect ratio of an imageView and resize it to fill / fit as large as possible without distorting/changing it's aspect ratio using Picasso.

Thus far I've found this:

scaling image size in Picasso

which suggests using: 

.fit().centerInside()

however when I tried it: 

        Picasso.with(this).load(boxart)
.fit().centerInside() 
        .into(imageItem);

Along with my XML:

    <RelativeLayout
        android:id="@+id/rl_ListView1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:layout_gravity="left"
        android:layout_weight="0.3" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:scaleType="fitXY"
            android:layout_gravity="left" />
    </RelativeLayout>

However the image still appears distorted (it appears too long and skinny - it's original aspect ratio is distorted) and I am unsure why.

enter image description here

2
androidandroid-layoutpicassoandroid-relativelayout
The Javadoc for fit() says that it will "resize the image to fit exactly into the target ImageView", i.e. ignore aspect ratio. – Christopher Orr
Yes, but centerInside() should rectify that, i. e. resize the image so that it fits inside the ImageView while keeping the aspect ratio. I suspect that the android:scaleType:fitXY is the problem. – david.mihola
That was actually quite helpful... the image is no longer distorted and is maintaining it's aspect ratio - however it does not resize / fill correctly (there is blank space around it) i.stack.imgur.com/ZpCZ3.jpg pastebin.com/UXbuU3vv – Jackie Deezner
Do you mean the space above and below the picture? I think that's unavoidable, given that the aspect ratio of the image does not fit that of the ImageView. Or do you want to resize the ImageView, so that it fits the aspect ratio of the image - which in your case would make it a bit wider overall. In that case have a look at this blog post: medium.com/@jpardogo/… -- I originally commented there with some clarifying questions but it seems that when he moved to medium.com all the comments were lost... Ask again if you need more help! – david.mihola

2 Answers

14
votes

Сode below should work:

.fit().centerCrop()
4
votes

CenterInside CenterInside() is a cropping technique that scales the image so that both dimensions are equal to or less than the requested bounds of the ImageView. The image will be displayed completely, but might not fill the entire ImageView.

Picasso
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.resize(600, 200)
.centerInside() 
.into(imageViewResizeCenterInside);