Image loading error when resize() and centercrop()

[sivelasco]

Hello, First of all thank you for providing this great library free. I am coding an app for a game and everything worked fine for the first beta. I load the images from Internet and display them on a placeholder like follows:

CODE

Picasso.with(getActivity())
                    .load(datos[2])
                    .placeholder(R.drawable.cargar)
                    .error(R.drawable.error)
                    .resize(px, px)
                    .centerCrop()
                    .into((ImageView) view.findViewById(R.id.Imagen));

/CODE

This works fine loading light images but now I need to load some images that are a bit bigger (1215 x 717 and 282kB). I copy and past the code that was working and now the code doesn't work. Sometimes it loads an image correctly (<2%) but normally it displays the drawable error and sometimes it displays just a part of the image and its blurred.

After trying a few things I found that removing the resize() and centerCrop() calls make everything work fine, so there must be something wrong in there. Do you have any ideas? Thanks in advance :)

PS: I will attach some images showing the bug.

Drawable error:

Blur:

Mix:

[sivelasco]

No ideas? Please the error is still there and I can't believe that I am the only one having this issue

[kamoljan]

Hi crispi7

I suspect it is nothing to do with Picasso. Maybe, the way of recycling of view is not right, maybe some other issues.. Can you show your Adapter?

Regards Kamol

[sivelasco]

This is the adapter code:

########### CODE ##############

package com.lol.lolpro.app;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

/**
 * Adaptador para mostrar los objetos y campeones en un gridview usando Picasso
 */
public class GridAdapterNombre extends BaseAdapter {

    private final Context context;
    private int finalDP;
    private String[][] data;

    /**
     * Constructor
     *
     * @param context   recibe el activity al que está asociado el fragment
     * @param allData      datos de los campeones o los objetos
     * @param desiredDP Dp que tendrán las imágenes
     */
    public GridAdapterNombre(Context context, String[][] allData, int desiredDP) {
        this.context = context;
        data = allData;
        finalDP = desiredDP;
    }

    /**
     * Crea un view con la imagen del campeón u objeto que se encuentra en una posición determinada para añadirlo al grid
     *
     * @param position    Posición de la imagen a crear
     * @param convertView ImageView en el que se insertará la imagen
     * @param parent      null
     * @return Imageview con la imagen creada
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View view = convertView;
        //Convert dp into px
        int px = (int) Utils.dipToPixels(context, finalDP);

        if (view == null) {
            LayoutInflater inflater = ((Activity) context).getLayoutInflater();
            view = inflater.inflate(R.layout.cell, parent, false);
        }

        view.setTag(getId(position));

        // Get the image URL for the current position.
        String url = getItem(position);

        // Trigger the download of the URL asynchronously into the image view.
        Picasso.with(context) //
                .load(url) //
                .placeholder(R.drawable.cargar)
                .error(R.drawable.error)
                .into((ImageView) view.findViewById(R.id.item_image));
        ((TextView) view.findViewById(R.id.item_text)).setText(data[position][1]);
        return view;
    }

    /**
     * Devuelve la longitud del array datos, es decir tantos campeones u objetos como haya en el array
     *
     * @return Número de campeones u objetos en datos
     */
    @Override
    public int getCount() {
        return data.length;
    }

    /**
     * Devuelve la ruta de la imagen del array datos
     *
     * @param position posición del campeón u objeto para el que se devolverá la ruta
     * @return Ruta de la imagen del campeón u objeto
     */
    @Override
    public String getItem(int position) {
        return data[position][2];
    }

    /**
     * Devuelve el identificador del campeón u objeto
     *
     * @param position posición del campeón u objeto para el que se devolverá el identificador
     * @return Identificados único del campeón u objeto
     */
    public String getId(int position) {
        return data[position][0];
    }

    /**
     * Calcula posición del grid en la que se insertará el campeón u objeto
     *
     * @param position posición del campeón u objeto para el que se devolverá el identificador
     * @return posición del grid en la que se insertará el campeón u objeto
     */
    @Override
    public long getItemId(int position) {
        return position;
    }
}

###########/CODE ##############

The same adapter is working fine in other fragments, so I don't think is the adapter problem. I'm not sure about this, but could the problem be concerned with the image codification? COuld you try to resize() and centerCrop() with these images?

Images links: http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_0.jpg http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_1.jpg http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_2.jpg

http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_1.jpg http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_2.jpg

[kamoljan]

You don't want to use ViewHolder?

In my code I use:

@Override public View getItemView(ParseObject object, View v, ViewGroup parent) {
    final ViewHolder holder;
    if (v != null) {
      holder = (ViewHolder) v.getTag();
    } else {
     v = View.inflate(getContext(), R.layout.row_category, null);
     holder = new ViewHolder(v);
     v.setTag(holder);
   }
   super.getItemView(object, v, parent);
   Picasso.with(getContext()).load(object.getString("url")).into(holder.target);
   holder.tvName.setText(object.getString("name"));
   return v;
 }

[dnkoutso]

Do you have a sample app I can use to download and work with?

[dnkoutso]

Then again you did provide links and an adapter. I will try it out in our sample app and let you know.

[sivelasco]

Thanks for your reply. I have done a little app that shows three images repeated two times. The first time as you can see in the code I use resize() and centerCrop() and the second time I don't use those methods. As you can see in the image below the first three images show a drawable error but it doesn't happen with the last three ones.

Thanks for everything and keep this project on :+1:

Github repository: https://github.com/crispi7/picassoExample

Source code:

package com.PicassoExample.picassoexample;

import android.app.Activity;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class ActivityexampleActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activityexample);
        if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, new PlaceholderFragment())
                    .commit();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activityexample, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragmentexample, container, false);

            // Get the image URL for the current position.

            String url = "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_0.jpg";
            String url2 = "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_1.jpg";
            String url3 = "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_2.jpg";

            // Trigger the download of the URL asynchronously into the image view.
            Picasso.with(getActivity()) //
                    .load(url) //
                    .error(R.drawable.error)
                    .resize(200, 200)
                    .centerCrop()// Keep proportion
                    .into((ImageView) rootView.findViewById(R.id.imageView));

            Picasso.with(getActivity()) //
                    .load(url2) //
                    .error(R.drawable.error)
                    .resize(200, 200)
                    .centerCrop()// Keep proportion
                    .into((ImageView) rootView.findViewById(R.id.imageView2));

            Picasso.with(getActivity()) //
                    .load(url3) //
                    .error(R.drawable.error)
                    .resize(200, 200)
                    .centerCrop()// Keep proportion
                    .into((ImageView) rootView.findViewById(R.id.imageView3));

            // Now we make the same request without resize() and centerCrop()
            Picasso.with(getActivity()) //
                    .load(url) //
                    .error(R.drawable.error)
                    .into((ImageView) rootView.findViewById(R.id.imageView4));

            Picasso.with(getActivity()) //
                    .load(url2) //
                    .error(R.drawable.error)
                    .into((ImageView) rootView.findViewById(R.id.imageView5));

            Picasso.with(getActivity()) //
                    .load(url3) //
                    .error(R.drawable.error)
                    .into((ImageView) rootView.findViewById(R.id.imageView6));
            return rootView;
        }
    }
}

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".ActivityexampleActivity$PlaceholderFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Image1"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Image2"
        android:id="@+id/textView2"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Image3"
        android:id="@+id/textView3"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="105dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:layout_alignTop="@+id/imageView"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        android:layout_alignTop="@+id/imageView2"
        android:layout_alignLeft="@+id/textView3"
        android:layout_alignStart="@+id/textView3" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Image4"
        android:id="@+id/textView4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/imageView"
        android:layout_alignRight="@+id/textView"
        android:layout_alignEnd="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Image5"
        android:id="@+id/textView5"
        android:layout_below="@+id/imageView2"
        android:layout_alignRight="@+id/textView2"
        android:layout_alignEnd="@+id/textView2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Image6"
        android:id="@+id/textView6"
        android:layout_below="@+id/imageView3"
        android:layout_alignLeft="@+id/imageView3"
        android:layout_alignStart="@+id/imageView3" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView4"
        android:layout_below="@+id/textView4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView5"
        android:layout_below="@+id/textView5"
        android:layout_alignLeft="@+id/imageView2"
        android:layout_alignStart="@+id/imageView2" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView6"
        android:layout_below="@+id/textView6"
        android:layout_alignLeft="@+id/textView6"
        android:layout_alignStart="@+id/textView6" />

</RelativeLayout>

[dnkoutso]

I'll look now.

[dnkoutso]

This is the MARKER problem in NetworkBitmapHunter#MARKER. Unfortunately you can't customize this. Can you fork the project and use 131072 or something higher?

[dnkoutso]

See #487

Closing.