Picasso Does Not Preserve Aspect Ratio While Resizing Image

Question

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

The [Javadoc for `fit()`](https://square.github.io/picasso/javadoc/com/squareup/picasso/RequestCreator.html#fit--) says that it will "resize the image to fit exactly into the target ImageView", i.e. ignore aspect ratio. — Christopher Orr, Jul 15 '15 at 19:31
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, Jul 15 '15 at 19:57
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) http://i.stack.imgur.com/ZpCZ3.jpg http://pastebin.com/UXbuU3vv — Jackie Deezner, Jul 15 '15 at 20:13
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: https://medium.com/@jpardogo/scale-a-bitmap-to-fit-height-or-width-ebc0ad1fb11a -- 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, Jul 16 '15 at 06:55

score 15 · Answer 1 · edited Aug 12 '15 at 12:34

15

Сode below should work:

.fit().centerCrop()

edited Aug 12 '15 at 12:34

mbaitoff

8,831
4
24
32

answered Aug 12 '15 at 05:59

prGD

1,501
2
12
22

5

Or .fit().centerInside() for aspect fit. – Makalele Apr 24 '18 at 07:08

score 4 · Answer 2 · edited Dec 10 '15 at 11:12

4

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);

edited Dec 10 '15 at 11:12

Robert

5,278
43
65
115

answered Dec 10 '15 at 10:54

Radwa Elsahn

41
2

Picasso Does Not Preserve Aspect Ratio While Resizing Image

2 Answers2