I'm loading smaller quality version of image with Picasso, and if user clicks on that image in a list, then new Activity opens where I'm showing full quality version of image also with Picasso.
Problem is that full quality version of image is large so it takes some time to load it.
I would like that during that period previously loaded smaller quality version of image is shown. Picasso would show it instantly because it was already loaded on previous Activity.
I tried to implement it by call Picasso method twice like this:
Picasso.get().load(url_small_quality).into(imageView)
Picasso.get().load(url_full_quality).into(imageView)
but I think it skips load(url_small_quality) because imageView is empty for some time until url_full_quality is loaded.
I tried to run only load(url_small_quality) and then image is loaded instantly as it should, because it was previously loaded and stored.
Is there a way to somehow set previously loaded smaller quality image as a placeholder until full quality image is loaded?
Most probably picasso is cancelling your previous request , you can try this
Picasso.get().load(url_small_quality).into(imageView,object:Callback{
override fun onSuccess() {
Picasso.get().load(url_full_quality).into(imageView)
}
override fun onError(e: Exception?) {
}
})
You can use a drawable as placeholder but that would be a default image
Picasso.get().load("http://i.imgur.com/DvpvklR.png").into(imageView);
You can load your high quality image after successfully loading your low quality image like below(Since there's no direct way to achieve this or other can be to use disk caching but that would require more efforts) :-
Picasso.with(context)
.load(thumb) // small quality url goes here
.into(imageView, new Callback() {
#Override
public void onSuccess() {
Picasso.with(context)
.load(url) // full quality url goes here
.placeholder(imageView.getDrawable())
.into(imageView);
}
#Override
public void onError() {
}
});
As Astha Garg said in comments this can't be done:
Picasso.get().load(url_small_quality).into(imageView)
Picasso.get().load(url_full_quality).into(imageView)
Simply create one more imageview and place it above previous one with thumb and load your high resolution there.
Java:
Picasso.get().load(url_small_quality).into(IVThumb, new Callback() {
#Override
public void onSuccess() {
Picasso.get().load(url_full_quality).into(IVFull, new Callback() {
#Override
public void onSuccess() {
}
#Override
public void onError(Exception e) {
}
});
}
#Override
public void onError(Exception e) {
}
});
xml:
inside LinearLayout create:
<ImageView
android:id="#+id/IVThumb"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/IVFull"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Related
I am using Picasso for loading images in image view, and in some condition i load different image but if Picasso failed ti load the new image,it use the error image but i want it to leave the previous image
Example code for your case, if you only need to load an image if the load fails you only need to do the .placeholder part
Picasso.get()
.load(yoururl)
.placeholder(R.drawable.YOURPLACEHOLDER)
.into(yourimgview, new com.squareup.picasso.Callback() {
#Override
public void onSuccess() {
// show img if success
yourimg.setVisibility(View.VISIBLE);
}
#Override
public void onError(Exception e) {
// hide or do nothing on error
imgProducto.setVisibility(View.GONE);
}
});
I'm using Picasso library in my project to load images. As working with picasso, i thought to show blur image before showing original image. I tried to do it using third party library called "wasabeef transformation" suggested on stackoverflow but couldn't succeed to show blur image before showing original image. This is how i did it.
Picasso.with(context).load(message.body)
.transform(BlurTransformation(context))
.into(photo,object:Callback{
override fun onSuccess() {
Picasso.with(context).load(message.body)
.networkPolicy(NetworkPolicy.OFFLINE)
.into(photo)
}
override fun onError() {
}
})
Edited:
I didn't get any blur image here. It just shows original image after few sec.Also I'm using Recyclerview in my activity and am loading images in my Adapter of Recyclerview. Images are loaded once i get the downloaded image URL. How can i show blur image here with or without any library by Picasso or by any other loading image library. Please tell me .
Create ImageView where you want to load image and blur it. inside your Activity write following code.
Target target = new Target() {
#Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
imageViewBackground.setImageBitmap(BlurImage.fastblur(bitmap, 1f,
BLUR_PRECENTAGE));
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
imageViewBackground.setImageResource(R.mipmap.ic_launcher);
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
}
};
I am using Picasso library for image download and displaying it in imageView. This library also store images in cache and memory. When my internet is turn on, i am able to view images on imageView. So i think, it should also be store in cache or file memory. Now my internet is turnOFF, but it doest not display to images. kindly have a look.
Picasso.with(context)
.load(url) .placeholder(R.drawable.defaultimg)
.networkPolicy(NetworkPolicy.OFFLINE)
.into(holder.imageview2, new ImageLoadedCallback(holder.loadingBar) {
#Override
public void onSuccess() {
if (holder.loadingBar != null) {
holder.loadingBar.setVisibility(View.GONE);
}
}
#Override
public void onError(){
holder.loadingBar.setVisibility(View.VISIBLE);
Picasso.with(context)
.load(url) .placeholder(R.drawable.defaultimg)
.into(holder.imageview2, new ImageLoadedCallback(holder.loadingBar) {
#Override
public void onSuccess() {
if (holder.loadingBar != null) {
holder.loadingBar.setVisibility(View.GONE);
}
}
#Override
public void onError() {
if (holder.loadingBar != null) {
holder.loadingBar.setVisibility(View.GONE);
}
}
});
}
});
Finally I resolved that issue. Thanks #dev.bmax
image url was not correct. There is bug in Picasso. If we have url like as
https://i.ytimg.com/vi/DMVEcfQmPOs/maxresdefault.jpg?500|700
Picasso is able to displaying image when internet TURN ON
but if we TURN OFF to internet, it does not decode the url. and not display the image also.
We have to remove ?500|700 then i was able to view image in OFFLine mode also.
//url.substring(0,url.indexOf("?"))
https://i.ytimg.com/vi/DMVEcfQmPOs/maxresdefault.jpg
Thanks!
I'm working on an application in which i use Picasso library for image loading in my ViewPager and other ImageViews. So i want to know what happens if network connectivity is off. Does the library handle itself or do i have to check the network connectivity before loading image to views?
My code:
Picasso picasso = Picasso.with(getActivity());
picasso.setDebugging(true);
picasso.load(downloadPath+imgDetailPhoto)
.placeholder(R.drawable.no_image)
.error(android.R.drawable.stat_notify_error)
.into(eventImage, new Callback() {
#Override
public void onSuccess() {
Log.d("Success...", "picasso loaded successfully");
}
#Override
public void onError() {
Log.d("Error...", "picasso load error");
}
});
Using below code Picasso caches images for offline use.
Picasso.with(this)
.load(downloadPath+imgDetailPhoto)
.placeholder(R.drawable.no_image)
.error(android.R.drawable.stat_notify_error)
.networkPolicy(NetworkPolicy.OFFLINE)//use this for offline support
.into(eventImage);
Above code is not worke while removing cache.so Picasso can't find image from cache.If not get image from cache we handle to get image online and display it. We achieve that using below code:
Picasso.with(getActivity())
.load(downloadPath+imgDetailPhoto)
.placeholder(R.drawable.no_image)
.error(android.R.drawable.stat_notify_error)
.networkPolicy(NetworkPolicy.OFFLINE)//user this for offline support
.into(eventImage, new Callback() {
#Override
public void onSuccess() {
}
#Override
public void onError() {
Picasso.with(getActivity())
.load(downloadPath+imgDetailPhoto)
.placeholder(R.drawable.no_image)
.error(android.R.drawable.stat_notify_error)
.networkPolicy(NetworkPolicy.OFFLINE)//user this for offline support
.into(eventImage, new Callback() {
#Override
public void onSuccess() {
}
#Override
public void onError() {
//get error if image not loaded
}
});
}
});
Picasso caches images for offline use.
I'm using it in a simple movie app where I display a bunch of movie posters. I can turn on airplane mode and my images are still there. Likewise, if I force close the application while in airplane mode, then open the app again, my images will still load.
Hope this helps.
P.S. check out Glide https://github.com/bumptech/glide. It's faster and has smoother loading than Picasso
From the UX point of view, it will be great to show the user a thumbnail first until the real image completes loading, then showing it to him, but Picasso uses only a resource file as the place holder like:
Picasso.with(context)
.load(url)
.placeholder(R.drawable.user_placeholder)
.into(imageView);
So, how can I use a thumbnail URL as the placeholder? , and if I should use Picasso twice, then how?
An issue is already opened on Picasso's github page with this request, but seems it won't be added to Picasso as per JakeWharton. So how could we do it with what's available in hand?
Thanks to raveN here & the comments on the original request on github, finally I've got a working solution:
Picasso.with(context)
.load(thumb) // thumbnail url goes here
.into(imageView, new Callback() {
#Override
public void onSuccess() {
Picasso.with(context)
.load(url) // image url goes here
.placeholder(imageView.getDrawable())
.into(imageView);
}
#Override
public void onError() {
}
});
The trick here is to get the drawable from the imageView (which is the thumbnail) after the first call & pass it as a placeholder to the second call
-- update --
I've made a blog post describing the whole scenario
You could write a simple helper which calls Picasso twice (as you mentioned).
I've not tested it, but it should go like
Picasso.with(context)
.load(thumbnailUrl)
.error(errorPlaceholderId)
.into(imageView, new Callback() {
#Override
public void onSuccess() {
// TODO Call Picasso once again here
}
#Override
public void onError() {
}
);
There are a couple of different ways to get your Picasso called twice. One method I could think of (again, not tested) is
public static void loadImageWithCallback(String url, Callback callback) {
Picasso.with(context)
.load(url)
.error(errorPlaceholderId)
.into(imageView, callback);
}
public static void loadImage(String url) {
Picasso.with(context)
.load(url)
.error(errorPlaceholderId)
.into(imageView);
}
loadImageWithCallback("http://example.com/mythumbnail.jpg", new Callback() {
#Override
public void onSuccess() {
loadImage("http://example.com/myRealImage.jpg");
}
#Override
public void onError() {
}
}
Edit: All I know is that Picasso provides this callback mechanism. I'm using it in my app to hide a ProgressBar that is displayed until the image is loaded. I'll hide it in success or error callbacks - so you'll have the option to get notified when image loading is done. Then you can simply call it again. I hope the above approach works.
I originally used AbdelHady's solution but found that the larger image is only loaded after the thumbnail is done loading so I came up with this instead.
Assuming you have a utility class in your project;
public final class U {
public static void picassoCombo(final RequestCreator thumbnail,
final RequestCreator large,
final ImageView imageView) {
Target target = new Target() {
#Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
imageView.setImageBitmap(bitmap);
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
imageView.setImageDrawable(errorDrawable);
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
thumbnail.into(imageView);
}
};
imageView.setTag(target); // To prevent target from being garbage collected
large.into(target);
}
}
Usage:
U.picassoCombo(
Picasso.with(context)
.load("http://lorempixel.com/200/100/sports/1/")
.placeholder(R.drawable.ic_image_placeholder),
Picasso.with(context)
.load("http://lorempixel.com/800/400/sports/1/")
.error(R.drawable.ic_image_broken),
imageView
);
In the above example the placeholder is set first, the thumbnail url is set next, and regardless of whether the thumbnail request is done, successful, or failed, the large image request is set once it is done. If the large image request failed, then the error drawable is set.
The only issue is that if you use setIndicatorsEnabled(true) the debug indicators don't show for the large request. As far as I can tell this seems to be by design according to this issue convo