Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Picasso Does Not Preserve Aspect Ratio While Resizing Image

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

like image 813
Jackie Deezner Avatar asked Jul 15 '15 19:07

Jackie Deezner


People also ask

How do you preserve aspect ratio when scaling images?

Press-and-hold the Shift key, grab a corner point, and drag inward to resize the selection area. Because you're holding the Shift key as you scale, the aspect ratio (the same ratio as your original photo) remains exactly the same.

How do you lock the ratio when resizing an image so it keeps its original ratio?

Using the “Shift” is a quick method by which you can make sure that the aspect ratio of the image remains locked when changing the size of the image. Simply press the shift key, and drag the image from one of the edges or the sides, and the image will be resized in the same aspect ratio.

How to resize image in Picasso?

This example demonstrates how to do I in android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 3 − Add the following code to res/layout/activity_main.

How do I resize an image in Picasso?

The discussed options should cover your needs for functionality regarding image resizing and scaling. There is one last helper functionality of Picasso, which can be very useful: fit (). fit () is measuring the dimensions of the target ImageView and internally uses resize () to reduce the image size to the dimensions of the ImageView.

What is the advantage of using fit() over image in Picasso?

First, calling fit () can delay the image request since Picasso will need to wait until the size of the ImageView can be measured. Second, you only can use fit () with an ImageView as the target (we'll look at other targets later). The advantage is that the image is at the lowest possible resolution, without affecting its quality.

What happens when you set the pixel dimensions but not resolution?

Therefore, the pixel dimensions decreased because there are fewer pixels now in the image. The file size also decreased. When you set the pixel dimensions but you do not set the resolution, the resolution stabilizes at the same resolution as the original image.

How do I reduce the size of a picture without resampling?

To reduce the image's physical size by half without resampling, you set the physical size to 2 x 2 inches. Photoshop increases the resolution to 200 ppi. Resizing the image this way keeps the total number of pixels constant (200 ppi x 2 x 2 inches = 400 x 400 pixels).


2 Answers

Сode below should work:

.fit().centerCrop() 
like image 92
prGD Avatar answered Nov 15 '22 16:11

prGD


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);
like image 32
Radwa Elsahn Avatar answered Nov 15 '22 16:11

Radwa Elsahn