How to refresh the content of an ImageView - android

I have a screen with an ImageView containing the actual profile picture. I can edit that profile picture either by taking a picture with the camera or by picking a picture from the sd card. I store the new chosen profile picture under the same path as the old (i overwrite it) which is logical i guess.
However when i set a new profile picture to my ImageView it does not get refreshed. I have to restart the App to see the change.
this.imageView.invalidate();
is what all people are telling me to do when i brows google but no, this is not working! So how can i force my imageview to load the new profile picture?
I load the image into the ImageView with help of Picasso:
Picasso picasso = Picasso.with(context);
if(reload) {
picasso.invalidate(new File(fileName));
}
RequestCreator requestCreator = picasso.load(new File(fileName));
requestCreator.into(imageView);

Picasso caches loaded images to speed up the loading process. This means that if you are trying to reload the same exact picture it loads the cached version and it does not read the changed File from the disk.
You need to tell Picasso that the picture has changed and that it needs to reload the picture from the disk by invalidating the cache. The way you do this is like this:
File file = new File(fileName);
Picasso picasso = Picasso.with(context);
picasso.invalidate(file);
picasso.load(file).into(imageView);

To skip Picasso's cache, you can use .memoryPolicy(MemoryPolicy.NO_CACHE) static method:
Picasso
.with(context)
.load(file)
.memoryPolicy(MemoryPolicy.NO_CACHE)
.into(imageView);

Related

Efficient and faster way of loading images from url

I am developing A App which requires loading multiple images from their urls. I save all the images in firebase storage. I am currently using a compressor to reduce the size.
newImageFile=new File(uri1.getPath());
try {
compressedImageFile = new Compressor(ProductAdd.this)
.compressToBitmap(newImageFile);
} catch (IOException e) {
e.printStackTrace();
}
baos = new ByteArrayOutputStream();
compressedImageFile.compress(Bitmap.CompressFormat.JPEG, 100, baos);
thumbData1 = baos.toByteArray();
and I using Glide to load the image from the url
Glide.with(context).load(imgUrl).into(holder.cutImg);
I wanted to know if there is any way I could improve to load images much faster. Maybe store them in a specific format.
You can load a thumbnail of the original image into the ImageView before the original image loads.
Glide.with(fragment)
.load(url)
.thumbnail(0.05f)
.into(imageView);
This will load the 5% quality of the original image into the view and when the complete image loads it will be replaced.
And if you're having a separate URL for thumbnail then
Glide.with(fragment)
.load(url)
.thumbnail(
Glide.with(fragment)
.load(thumbnailUrl))
.into(imageView);
Now when image loads it will be immediately loaded into the view, here you can use the transition for a smooth effect.
Glide.with(fragment)
.load(url)
.thumbnail(0.05f)
.transition(DrawableTransitionOptions.withCrossFade())
.into(view);
You can checkout my project in which I'm also first compressing the Image and storing a thumnail image to Firebase Storage and then loading it.
You can also try different DiskCacheStrategies but I would suggest to go with the default one, it works just fine!
Here are various DiskCacheStrategies:
.diskCacheStrategy(DiskCacheStrategy.ALL)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.diskCacheStrategy(DiskCacheStrategy.DATA)
.diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
.diskCacheStrategy(DiskCacheStrategy.RESOURCE)
You can use the disc strategy which will be used to store the image on the disc. So it may take time for loading at first but later it does not take time at all.
For Glide 4.x
Glide
.with(context)
.load(imgUrl)
.diskCacheStrategy(DiskCacheStrategy.DATA)
.into(holder.cutImg);
For Glide 3.x
Glide
.with(context)
.load(imgUrl)
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.into(holder.cutImg);
Please note: This will not refresh the image if you just update the image without updating URL. SO if you want to see the updated image you must update URL and Glide will automatically download an image for you.
if you are using firebase storage for host your images : Using FirebaseUI you can quickly and easily download, cache, and display images from Storage with Glide. source
Glide.with(context).load(model.imageUrl).thumbnail(0.05f).into(holder.imageView)

Image not updating which is uploaded using volley and glide

I am using Volley library in my app to upload image and Glide for setting image to textview. I have button to update image which opens gallery and let user select the image. The file is then uploaded in the specific folder successfully, but the image remains same. I also tried logout and login user which erases the values in ShredPreferences, all data updates, but image remains same. The older image is replaced by new in server folder, but still shows in app. It only updates after clearing app data from Settings. Why is this happening? does glide stores the cache data? how to get rid of this?
Glide caches the image from server by default. So if your URL is not changing, it will show you the image from the cache. To work around this, you can use RequestOptions:
RequestOptions requestOptions = new RequestOptions()
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true);
Glide.with(this)
.load(YOUR_IMAGE_URL)
.apply(requestOptions)
.into(YOUR_IMAGEVIEW);
EDIT (Picasso)
If you are using Picasso, the same case applies. In this case you should use:
Picasso.with(this)
.load(YOUR_IMG_URL)
.memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
.networkPolicy(NetworkPolicy.NO_CACHE)
.into(YOUR_IMAGEVIEW);

how to cache image with a new one which have the same url?

i have listview to load images for alot of users and this listview item has an imageview for profile picture of user, the problem here if the user changed his the new image will not be shown as last profile picture is cached and the old one will be displayed because the new and old image have the same url:
URL EX:
"https://xyz.s3.amazonaws.com/users/" + friend_id + "/photos/profile.jpg"
i used Glide but i have the same problem
This issue is because of the cache of images, Glide checks if image is available in cache, if it does glide loads it else it would load the new image.
To solve this issue you need to change its cache strategy like this
Glide.with(mContext)
.load((Integer) mDataset.get(position))
.fitCenter()
.diskCacheStrategy(DiskCacheStrategy.NONE) // this will prevent image to be cached and each time glide will load it from server
.into(imageView);

Profile Image Uploader and Load it with Picasso

I have an android app which has profile image.
The user can edit his/her profile image.
I'm using Picasso to load images, but every time I load profile image, Picasso loads old image.
When I upload profile image I don't change it's url, so profile image url for every user is constant.
First question: should I change profile image url every time user change profile image?
Second question: When user change his/her profile image I invalidate Picasso to load new image using this code:
picassoInstance.load(url)
.networkPolicy(NetworkPolicy.NO_CACHE)
.transform(new CircleTransform())
.placeholder(dr)
.into(imageView);
But Picasso show me the old one.
And one more thing:
I load image url into imageView without calling networkPolicy method at first.
How should I handle this problem?
Every Image has different name, whenever new image uploaded you have to update your image Url
Eg. current url : https://photographylife.com/nikon-d810-high-resolution-image-samples
where Image name is : nikon-d810-high-resolution-image-samples
and after uploaded new image, name will be different for example : image-sample
so you need to update that image Url : https://photographylife.com/image-sample with new name
try this, i telling you cause im doing the same hope this will help you!
So lets just discuss one by one:
Should I change profile image url every time user change profile
image?
No. You might think of other ways around. In my case, I download the picture each time the url changes with a specific name of the user (as we're considering profile picture). So when I loaded the image with Picasso I passed the file path instead of the URL so that, it won't fetch from the URL each time. Picasso doesn't do that either actually. It maintains a cache. If the file doesn't exist, just put a placeholder.
When user change his/her profile image I invalidate Picasso to load
new image using this code:
I don't see any invalidate code here in your code. I would refer to this link to see how they've solved the cache problem.
I load image url into imageView without calling networkPolicy method
at first.
So if you fetch the image from the external storage, I don't think there's a necessity to do so.
And another suggestion is to use Glide in these cases. This is almost the same thing as Picasso, but personally I like to use Glide instead of Picasso.
Hope that helps.
Using Glide instead of Picasso because Glide recommended by google
http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en
Preventing for caching in Glide
Glide.with(DemoActivity.this)
.load(Uri.parse("file://" + imagePath))
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(mImage);
Add this class to the com.squareup.picasso package.
package com.squareup.picasso;
public class PicassoTools {
public static void clearCache (Picasso p) {
p.cache.clear();
}
}
Because cache has package visibility, this util class can clear the cache for you. You just have to call it:
PicassoTools.clearCache(Picasso.with(context));
I find where problem is:
I turned down disk cache but not memory cache. I should use this code:
picassoInstance.load(url)
.networkPolicy(NetworkPolicy.NO_CACHE)
.memoryPolicy(MemoryPolicy.NO_CACHE)
.transform(new CircleTransform())
.placeholder(dr)
.into(imageView);
I use this link to:
picasso-influencing-image-caching
Thanks everybody
You need to invalidate the file before loading use the code given below:
Picasso.with(getActivity()).invalidate(file);
To know more details kindly study the Picasso documentation from their website.

Save image to sdcard from imageview

I have listview having customized some textview and one imageview. When I long click on item I have store that item information to the database but the question is how to store image in sdcard and store the relevant path to the database. The image alread download as cache now I don't want to re-download that image.
Is there way to store that Image to the sdcard.
I am using this example to download the images for listview https://github.com/thest1/LazyList
Edit
I got solution
no need to extra process when using this example. Just store the web path of image into the database and pass that imageview into the ImageLoader object with path it'll use the cache images if the image was exist for same URL
No Need to extra process, Using this example it'll will care for future usage also for same URL of image. This will get from the cache directory if the image found that use that image otherwise download it and then use it.
If you use Prime the caching will be transparent, when you request the image again it will grab it from a memory cache if available or a disk cache automatically. It also is really easy to get images with.
You can save your bitmap which you get via Bitmap bitmap=memoryCache.get(url); using save-file-to-sd-card.
You can also get the bitmap from the ImageView(if you want) like:
//say your ImageView object is i;
i = (ImageView) findViewById(R.id.img);
Drawable d = i.getBackground();
Bitmap bitmap = ((BitmapDrawable)d).getBitmap();

Categories

Resources