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 spin

Answer 1

I made it working in following way:

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

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

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