Picasso Animated Boot Image

Question

I have the following code to upload an image to Picasso, using drawable for the replacement that is displayed during image loading. However, I want an animated rotating stylist that animates around and around while the image is loading, as I see in most professional applications. Picasso does not seem to support this, but only static images. Is there a way to make it work with Picasso or do I need to do something else?

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

Answer 1

How to get an animated image of the download process using Picasso placeholder:

I solved this easily with an animated rotation of the 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> 

Loading Picasso:

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

Answer 2

I implemented a progress dialog before loading the image and its very simple. Take the ImageView in a relative layout and place the motion loader on the same image. Apply the code below and view only the visibility of the dialog box.

 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, unfortunately, does not support animated placeholders.

One way you could get around this is to put your ImageView in a FrameLayout with an animated raise under it. Thus, when Picasso uploads an image, it will load on top of the animated placeholder, which will give the user the intended effect.

Alternatively, you can upload the image to Target . Then you will see the default progress bar, and when the onBitmapLoaded method is called, you can hide it and display the image. You can see the basic implementation of this here

Answer 4

I did it as follows:

• Created drawable (found somewhere on the Internet) and put it in 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> 

• In my element for the GridView element, the ProgressBar element is added:

   <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"/> 

• A target object has been added to the Adapter with the following parameters, where the poster and spinner are links to ImageView and ProgressBar:

  // Purpose 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); } }; 

• The results will be the same as when loading - the circle rotates (sorry for this screenshot, but the images appear too quickly): ScreenShot

Answer 5

For those trying to use the DBragion technique: make sure you have the latest version of Picasso, otherwise it will not spin. My work did not work until I used version 2.5.2.

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

Answer 6

In this link, Jake Wharton said:

No. We use Android BitmapFactory to decode all images, and it does not have animated GIF support (unfortunately).

Then you can't

Answer 7

Just add the shape attribute to the DBragion response as shown below and it will work like a charm. Good 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 also use Glide:

 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) 

Answer 9

I found the answer to this question!

See: https://github.com/square/picasso/issues/427#issuecomment-266276253

In addition to @DBragion's answer, try below.

Now we can fix the height and width!

 image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE 

 picasso.load(your_path) .fit() .centerCrop() .noFade() .placeholder(R.drawable. progress_animation) .into(image_view) 

I think there are two key points.

1. use noFade ()

2. set image_view scaleType to "CENTER_INSIDE"