Animated loading image in picasso

Question

I have the following code to load an image in Picasso, using a drawable for the placeholder to display while the image is downloading. What I want though is an animated spinning progress bar style spinner that animates around and around while the image is loading, like I see in most professional apps. Picasso doesn't seem to support this, only static image drawables. Is there a way to get it working with Picasso or do I have to do something different?

Picasso.with(context).load(url)             
                    .placeholder(R.drawable.loading)
                    .error(R.drawable.image_download_error)
                    .into(view);

Answer 1

How to have a loading progress animation image using Picasso placeholder:

I solved this easily using a animated-rotate xml object.

Steps:

progress_image.png

/res/drawable/progress_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:gravity="center">
    <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/progress_image"
        android:pivotX="50%"
        android:pivotY="50%" />
    </item>
</layer-list>

Picasso loading:

Picasso.with( context )
        .load( your_path )
        .error( R.drawable.ic_error )
        .placeholder( R.drawable.progress_animation )
        .into( image_view );

Answer 2

I implemented the progress dialog till the image download and its very simple. Take your ImageView in relative layout and place progress loader on same image view. Apply the below code and handle progress dialog visibility only.

holder.loader.setVisibility(View.VISIBLE);
            holder.imageView.setVisibility(View.VISIBLE);
         final ProgressBar progressView = holder.loader;
            Picasso.with(context)
            .load(image_url)
            .transform(new RoundedTransformation(15, 0))
            .fit()
            .into(holder.imageView, new Callback() {
                @Override
                public void onSuccess() {
                    progressView.setVisibility(View.GONE);
                }

                @Override
                public void onError() {
                    // TODO Auto-generated method stub

                }
            });
        }

Enjoy. :)

Answer 3

Picasso doesn't support animated placeholders unfortunately.

One way you could work around this is to place your ImageView in a FrameLayout with the animated drawable underneath. This way when Picasso loads the image it will load over the top of the animated placeholder, giving the user the intended effect.

Alternatively, you could load the image into a Target. Then you'd have the progress bar showing by default, and when the onBitmapLoaded method is called you can hide it and display the image. You can see a basic implementation of this here

Answer 4

I made it working in following way:

1. Created a drawable (found somewhere on the Internet) and put it in the res/drawable:

   <?xml version="1.0" encoding="utf-8"?>
   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromDegrees="90"
   android:pivotX="50%"
   android:pivotY="50%"
   android:toDegrees="360">
   
   <shape
       android:innerRadiusRatio="3"
       android:shape="ring"
       android:thicknessRatio="7.0">
   
       <gradient
           android:angle="0"
           android:centerColor="#007DD6"
           android:endColor="#007DD6"
           android:startColor="#007DD6"
           android:type="sweep"
           android:useLevel="false" />
   </shape>
   

2. In my item for the GridView added ProgressBar element:

   <ProgressBar
       android:id="@+id/movie_item_spinner"
       android:layout_width="@dimen/poster_width"
       android:layout_height="@dimen/poster_height"
       android:progressDrawable="@drawable/circular_progress_bar"/>
   

3. In Adapter added Target Object with following parameters, where poster and spinner are references to ImageView and ProgressBar:

   // Target to show/hide ProgressBar on ImageView

   final Target target = new Target() {
   
           @Override
           public void onPrepareLoad(Drawable drawable) {
               poster.setBackgroundResource(R.color.white);
               spinner.setVisibility(View.VISIBLE);
           }
   
           @Override
           public void onBitmapLoaded(Bitmap photo, Picasso.LoadedFrom from) {
               poster.setBackgroundDrawable(new BitmapDrawable(photo));
               spinner.setVisibility(View.GONE);
           }
   
           @Override
           public void onBitmapFailed(Drawable drawable) {
               poster.setBackgroundResource(R.color.white);
           }
       };
   

4. Results will be like that on loading - circle is rotating (sorry for this screenshot, but images are appearing too fast): ScreenShot

Answer 5

For anyone trying to use DBragion's technique: Make sure you have the latest version of Picasso or else it wont spin. Mine didn't work until I used version 2.5.2.

compile 'com.squareup.picasso:picasso:2.5.2'

Answer 6

In this link, Jake Wharton said :

Nope. We use the Android BitmapFactory for all image decoding and it has no animated GIF support (sadly).

Then you can't

Answer 7

Just add shape attribute in DBragion's answer as like below and it will work like charm. Happy coding.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape
            android:shape="rectangle">

            <size
                android:width="200dp"
                android:height="200dp"/>

            <solid
                android:color="#00FFFFFF"/>
        </shape>
    </item>

    <item android:gravity="center">
        <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:drawable="@drawable/spinner"
            android:pivotX="50%"
            android:pivotY="50%" />
    </item>
</layer-list>

You can use Glide too:

Glide.with(activity).load(url)
                    .apply(RequestOptions.centerInsideTransform())
                    .placeholder(R.drawable.progress_animation)
                    .into(imageview);

Answer 8

Just use Picasso PlaceHolder

  Picasso.get()
        .load(datas[position].artist?.image)
        .placeholder(R.drawable.music_image)
        .error(R.drawable.music_image)
        .into(holder.cardViewImage)