Blur thumbnail image before loading actual image in picasso

Question

i am using picasso to display the image from URL, i am displaying thumbnail image first before loading actual image, i want to blur that thumbnail image , how i can achieve in picasso ?

here is my source code

pb.setVisibility(View.GONE);
        Picasso.with(getApplicationContext())
                .load(thumbUrl) // thumbnail url goes here
                //.placeholder(R.drawable.progress_animation)
                .resize(width, width)
                .transform(new BlurTransformation(getApplicationContext(), 25, 1))
                .into(imageview, new Callback()
                {
                    @Override
                    public void onSuccess()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnSuccess");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.GONE);
                    }

                    @Override
                    public void onError()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnError");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.VISIBLE);
                    }
                });

Answer 1

I have tested both Glide and Picasso for fast loading if you resize your image in Picasso the it will improve your loading speed, here is the code

 Glide.with(context)
           .load(sArr.get(position).getThumbnail())
           .thumbnail(0.01f)
           .override(100,100)
           .centerCrop()
           .placeholder(R.drawable.default_picture)
           .into(holder.imgItem);

Code for Piccaso

Picasso.with(context)
            .load(sArr.get(position).getThumbnail())
            .resize(100,100)
            .placeholder(R.drawable.default_picture)
            .into(holder.imgItem);

and Picasso win !!

Answer 2

finally, i solved my problem with the help of this Library named as picasso-transformations , i added the below dependencies in my project

compile 'jp.wasabeef:picasso-transformations:2.2.1'

not only it support Picasso but also it support Glide or Fresco too and i called the BlurTransformation class inside picasso.

here is complete example

pb.setVisibility(View.GONE);
        Picasso.with(getApplicationContext())
                .load(thumbUrl) // thumbnail url goes here
                //.placeholder(R.drawable.progress_animation)
                .resize(width, width)
                .transform(new BlurTransformation(getApplicationContext(), 25, 1))
                .into(imageview, new Callback()
                {
                    @Override
                    public void onSuccess()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnSuccess");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.GONE);
                    }

                    @Override
                    public void onError()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnError");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.VISIBLE);
                    }
                });

Answer 3

Blur Transformation in Picasso, Reference: https://futurestud.io/tutorials/picasso-image-rotation-and-transformation

 @Override
        public Bitmap transform(Bitmap bitmap) {
            // Create another bitmap that will hold the results of the filter.
            Bitmap blurredBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);

        // Allocate memory for Renderscript to work with
        Allocation input = Allocation.createFromBitmap(rs, blurredBitmap, Allocation.MipmapControl.MIPMAP_FULL, Allocation.USAGE_SHARED);
        Allocation output = Allocation.createTyped(rs, input.getType());

        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setInput(input);

        // Set the blur radius
        script.setRadius(10);

        // Start the ScriptIntrinisicBlur
        script.forEach(output);

        // Copy the output to the blurred bitmap
        output.copyTo(blurredBitmap);

        bitmap.recycle();

        return blurredBitmap;
    }

   

Answer 4

To my knowledge Picasso currently doesn't support this "feature". Glide library, which has very similar usage, does have a function that enables easy usage of "fast preview", that is low resolution thumbnail which is loaded faster than full size image.

Function is thumbnail(float) and accepts scale factor as argument, where for example 0.1f is one-tenth of original image size.

Case usage with Glide could be something like this.

Glide.with(mFragment)
            .load(wFile.getUriForThumb())                
            .override(length, length)
            .thumbnail(.05f)
            .placeholder(R.drawable.placeholder_image_128px)
            .into(holder.mImageThumb);

Where method override is an close equivalent to resize(int,int) in Picasso.

For complete comparison between two libraries you can check this nice guide: Glide vs. Picasso

Answer 5

Not sure if this will work but I have seen before that you can use:

.add(new ImageTransform(IMAGE_URL, new BlurTransformation(this)));