How can you use a loading placeholder that is an animated spinner with image loaders like Glide, Picasso etc?

Question

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.

Answer 1

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.

Answer 2

You can use something like this:

Glide.with(mContext).load(imageUrl).asBitmap().centerCrop().into(new BitmapImageViewTarget(vh.avatarImageView) {

        @Override
        public void onLoadStarted(Drawable placeholder) {
                vh.avatarImageView.setImageDrawable(mContext.getResources().getDrawable(R.drawable.ic_placeholder));
        }

        @Override
        public void onLoadFailed(Exception e, Drawable errorDrawable) {
            vh.avatarImageView.setImageDrawable(mContext.getResources().getDrawable(R.drawable.ic_failed_download));
        }

        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(mContext.getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            vh.avatarImageView.setImageDrawable(circularBitmapDrawable);
        }
    });