Out of memory error when using picasso with recycler view

Question

I want to load images asynchronously while scrolling the recycler view. For this I used picasso to load image from an url. Also I am using a rounded image view for the image.

Now when I scroll up and down first it takes 10 - 12 seconds to load the images. And when I scroll it gives out of memory error on rounded image view.

contactAdapter:

    public class ContactAdapter extends RecyclerView.Adapter<FeedListRowHolder> {


    private List<FeedItem> feedItemList;

    private Context mContext;

    public ContactAdapter(Context context, List<FeedItem> feedItemList) {
        this.feedItemList = feedItemList;
        this.mContext = context;
    }

    @Override
    public FeedListRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout,null);
        FeedListRowHolder mh = new FeedListRowHolder(v);

        return mh;
    }

    @Override
    public void onBindViewHolder(FeedListRowHolder feedListRowHolder, int i) {
        final FeedItem feedItem = feedItemList.get(i);
        Log.e("Imagename",""+"http://xesoftwares.co.in/contactsapi/profile_images/85368a5bbd6cffba8a3aa202a80563a2.jpg");//+feedItem.getThumbnail());
       /* Picasso.with(mContext).load("http://xesoftwares.co.in/contactsapi/profile_images/85368a5bbd6cffba8a3aa202a80563a2.jpg")
                .error(R.drawable.ic_account_circle_black_24dp)
                .placeholder(R.drawable.ic_account_circle_black_24dp)
                .into(feedListRowHolder.thumbnail)
                ;*/

       Picasso.with(mContext).load("http://xesoftwares.co.in/contactsapi/profile_images/85368a5bbd6cffba8a3aa202a80563a2.jpg")
                .error(R.drawable.ic_account_circle_black_24dp)
                .placeholder(R.drawable.ic_account_circle_black_24dp)
                .into(new Target() {

                    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                        try {
                            String root = Environment.getExternalStorageDirectory().getPath();
                            File myDir = new File(root +"/Contact");

                            if (!myDir.exists()) {
                                myDir.mkdirs();
                            }

                           // String name = new Date().toString();
                            String name = new Date().toString()+".jpg";
                          File  myDir1 = new File(myDir, name);

                            FileOutputStream out = new FileOutputStream(myDir1);
                            bitmap.compress(Bitmap.CompressFormat.JPEG, 100, out);

                            ImageFilePath imageFilePath1=new ImageFilePath(myDir1);
                            ComplexPreferences complexPreferences112 = ComplexPreferences.getComplexPreferences(mContext, "mypref112", Context.MODE_PRIVATE);
                            complexPreferences112.putObject("imageFilePath1", imageFilePath1);
                            Log.e("user2", "" + imageFilePath1);
                            complexPreferences112.commit();
                            out.flush();
                            out.close();
                        } catch(Exception e){
                            // some action
                        }
                    }


                    public void onBitmapFailed(Drawable errorDrawable) {
                    }


                    public void onPrepareLoad(Drawable placeHolderDrawable) {
                    }
                });


       ComplexPreferences complexPreferences112 = ComplexPreferences.getComplexPreferences(mContext, "mypref112", mContext.MODE_PRIVATE);
        ImageFilePath imageFilePath1= complexPreferences112.getObject("imageFilePath1", ImageFilePath.class);
        File myDir1=imageFilePath1.getprofile();

       Picasso.with(mContext).load(myDir1).into(feedListRowHolder.thumbnail);

        feedListRowHolder.title.setText(Html.fromHtml(feedItem.getTitle()));
        //feedListRowHolder.genre.setText(Html.fromHtml(feedItem.getGenre()));

    }

    @Override
    public int getItemCount() {
        return (null != feedItemList ? feedItemList.size() : 0);
    }
}

roundedImageView :

   public  class RoundedImageView extends ImageView {
    public RoundedImageView(Context ctx, AttributeSet attrs) {
            super(ctx, attrs);
        }


        @Override
        protected void onDraw(Canvas canvas) {

            Drawable drawable = getDrawable();

            if (drawable == null) {
                return;
            }

            if (getWidth() == 0 || getHeight() == 0) {
                return;
            }
            Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
           if(b!=null) {
            Bitmap bitmap = b.copy(Config.ARGB_4444, true); //error line 39                          

               int w = getWidth() / 2;


               Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
               canvas.drawBitmap(roundBitmap, 0, 0, null);
           }

        }

        public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
            Bitmap finalBitmap;
            if(bitmap.getWidth() != radius || bitmap.getHeight() != radius)
                finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius, false);
            else
                finalBitmap = bitmap;
            Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                    finalBitmap.getHeight(), Config.ARGB_4444);
            Canvas canvas = new Canvas(output);

            final Paint paint = new Paint();
            final Rect rect = new Rect(0, 0, finalBitmap.getWidth(), finalBitmap.getHeight());

            paint.setAntiAlias(true);
            paint.setFilterBitmap(true);
            paint.setDither(true);
            canvas.drawARGB(0, 0, 0, 0);
            paint.setColor(Color.parseColor("#BAB399"));
            canvas.drawCircle(finalBitmap.getWidth() / 2+0.7f, finalBitmap.getHeight() / 2+0.7f,
                    finalBitmap.getWidth() / 2+0.1f, paint);
            paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
            canvas.drawBitmap(finalBitmap, rect, rect, paint);


            return output;
        }

}

Error:

       java.lang.OutOfMemoryError
                                                               at android.graphics.Bitmap.nativeCopy(Native Method)
                                                               at android.graphics.Bitmap.copy(Bitmap.java:556)
                                                               at com.xesc.contacts.utils.RoundedImageView.onDraw(RoundedImageView.java:39)

How can I solve this out of memory error? I tried to use .fit() in picasso but it gives illegalSateException. Also it takes at least 10 seconds to load the image how can I reduce the time of loading the image?

Thank you..

EDIT : The code after .into() dose not work, it directly jumps on complexShared preferences. And as complex sharedPreferences remains null it is throwing an null pointer exception.

This happened when I uninstalled the app and run again. Before it was running well.

Answer 1

Your code may be going to download full image into memory, in memory you dont require to full image it may be closer to your image view,

in picaso fit() handler this, It uses inSampleSize on BitmapFactory.Options to downsample the image as it is being loaded into memory, But its depend on your image view size, It may be help you. You may be use like :

.fit().centerCrop()

Answer 2

First check ::if downloaded image has large stream it will cause outofmemory: so first do this

           Picasso.with(mContext).load("http://xesoftwares.co.in                                   /contactsapi/profile_images/85368a5bbd6cffba8a3aa202a80563a2.jpg")
            .error(R.drawable.ic_account_circle_black_24dp)
            .placeholder(R.drawable.ic_account_circle_black_24dp)
             .resize(width, height) //you height width

next check:: while compressing into bitmap :: put compression in try catch as risky code :Let me know if it helps :)

Edit: Do this solution for null pointer

  ImageFilePath imageFilePath1=new ImageFilePath(myDir1);

   ComplexPreferences complexPreferences112 = ComplexPreferences.getComplexPreferences(mContext, "mypref112", Context.MODE_PRIVATE);
           if(imageFilePath1!=null)
         complexPreferences112.putObject("imageFilePath1", imageFilePath1);

Answer 3

Looking at your code, you are not recycling the bitmaps, so an OutOfMemory error is expected, you need to recycle all your bitmaps once you don't use them, so you prolly have to keep references to them. Look here for more a deeper insight on recycle bitmaps:

Android: Bitmap recycle() how does it work?

In your case, the onDraw() function from your ImageView, you create 2 bitmaps, one with copy and one with cropped:

First, you don't need to create a bitmap, here you have how to read the image size without creating the actual bitmap, so if the image is big you will get a crash:

android: get image dimensions without opening it

public static Bitmap lessResolution (String filePath, int width, int height) {
    int reqHeight = height;
    int reqWidth = width;
    BitmapFactory.Options options = new BitmapFactory.Options();    

    // First decode with inJustDecodeBounds=true to check dimensions
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeFile(filePath, options);

    // Calculate inSampleSize
    options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

    // Decode bitmap with inSampleSize set
    options.inJustDecodeBounds = false;        

    return BitmapFactory.decodeFile(filePath, options); 
}

private static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {

    final int height = options.outHeight;
    final int width = options.outWidth;
    int inSampleSize = 1;

    if (height > reqHeight || width > reqWidth) {
        // Calculate ratios of height and width to requested height and width
        final int heightRatio = Math.round((float) height / (float) reqHeight);
        final int widthRatio = Math.round((float) width / (float) reqWidth);

        // Choose the smallest ratio as inSampleSize value, this will guarantee
        // a final image with both dimensions larger than or equal to the
        // requested height and width.
        inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio;
    }
    return inSampleSize;
}

And after you get your smaller bitmap to load, keep a reference to it and you have to recycle once it is not needed, so you need to overwrite the onDetacheFromWindow function and use bitmap.recycle() there