Android – How to you use a loading placeholder that is an animated spinner with image loaders like Glide, Picasso etc

androidandroid-glideanimationdrawablespinner

I am trying to insert a generic loading circle as placeholder while an image is being loaded with an image loader library like Glide or Picasso.

I cannot for the life of me find out how you are supposed to create a rotating drawable from xml.

I tried using an AnimationDrawable in XML by creating an animation-list, but it doesn't even show up (not even static).

I just want to have a simple circle that spins all by itself, all in an xml drawable, so I can pass the id as placeholder to my image loader. If that is not possible please tell me now, so I can save a lot of research 🙂

EDIT: Some code to make it more clear, I need a spinning drawable for this Glide command:

Glide.with(context)
.load(imageUrl)
.into(imageView)
.placeHolder(R.drawable.spinning_loading_placeholder);

While the image is being loaded a placeholder drawable will be shown where the image will later be. I need a drawable that spins itself.

Best Answer

You can add a ProgressBar element to your layout XML, and then display/hide this element as needed. The ProgressBar View is built in and already animated, no custom AnimationDrawable required.

Related Solutions

Android – Is it possible to have an animated drawable

Yes! The (undocumented) key, which I discovered by reading the ProgressBar code is that you have to call Drawable.setLevel() in onDraw() in order for the <rotate> thing to have any effect. The ProgressBar works something like this (extra unimportant code omitted):

The drawable XML:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
             android:drawable="@drawable/spinner_48_outer_holo"
             android:pivotX="50%"
             android:pivotY="50%"
             android:fromDegrees="0"
             android:toDegrees="1080" />
    </item>
    <item>
        <rotate
             android:drawable="@drawable/spinner_48_inner_holo"
             android:pivotX="50%"
             android:pivotY="50%"
             android:fromDegrees="720"
             android:toDegrees="0" />
    </item>
</layer-list>

In onDraw():

    Drawable d = getDrawable();
    if (d != null)
    {
        // Translate canvas so a indeterminate circular progress bar with
        // padding rotates properly in its animation
        canvas.save();
        canvas.translate(getPaddingLeft(), getPaddingTop());

        long time = getDrawingTime();

        // I'm not sure about the +1.
        float prog = (float)(time % ANIM_PERIOD+1) / (float)ANIM_PERIOD; 
        int level = (int)(MAX_LEVEL * prog);
        d.setLevel(level);
        d.draw(canvas);

        canvas.restore();

        ViewCompat.postInvalidateOnAnimation(this);
    }

MAX_LEVEL is a constant, and is always 10000 (according to the docs). ANIM_PERIOD is the period of your animation in milliseconds.

Unfortunately since you need to modify onDraw() you can't just put this drawable in an ImageView since ImageView never changes the drawable level. However you may be able to change the drawable level from outside the ImageView's. ProgressBar (ab)uses an AlphaAnimation to set the level. So you'd do something like this:

mMyImageView.setImageDrawable(myDrawable);

ObjectAnimator anim = ObjectAnimator.ofInt(myDrawable, "level", 0, MAX_LEVEL);
anim.setRepeatCount(ObjectAnimator.INFINITE);
anim.start();

It might work but I haven't tested it.

Edit

There is actually an ImageView.setImageLevel() method so it might be as simple as:

ObjectAnimator anim = ObjectAnimator.ofInt(myImageVew, "ImageLevel", 0, MAX_LEVEL);
anim.setRepeatCount(ObjectAnimator.INFINITE);
anim.start();

Android – Animated loading image in picasso

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 );

Best Answer

Related Solutions

Android – Is it possible to have an animated drawable

Edit

Android – Animated loading image in picasso

Related Topic