Develop Reference

RecyclerView and async Loading

I have a slight problem. Need a nudge in the right direction.
I am doing a video editor like Vine and/or instagram. Where they show a timeline with screencaps from the video
It just adds more pictures depending on the videos duration. What i did for my app is that i added a recyclerView. This recyclerview has an adapter that calls the following function every time onBindViewHolder
public Bitmap getFrameFromCurrentVideo(int seconds) {
Bitmap bitmap = null;
if(mMediaMetadataRetriever != null) {
bitmap = mMediaMetadataRetriever.getFrameAtTime(seconds * 1000000, MediaMetadataRetriever.OPTION_CLOSEST);
}
return bitmap;
}
This works and it adds the proper amount of images that i want. But the problem is that it is too heavy on the UI thread. Since the recyclerView is recycling everything. It then lags up every time it has to get a frame.
So i thought that i have to do some async task and then cache the images. But what i read is that AsyncTask is not recommended for recycler views since it recycles.
So what should i do to enchance the performance? Any good idea?

This is what i did to solve my problem.
I created async task and memory cache my result.
My adapter checks if the image already exist. If it does. Then we skip doing the background work. Otherwise i do the async task and try to load the image. We also tag the view just in case the user scrolls while the task is not finished.
This helps us check if the Tag is different from what the task have. If it is the same. Then we can safely put the right image in the imageview.
Snippet from my adapter
#Override
public void onBindViewHolder(PostVideoRecyclerViewHolder holder, int position) {
holder.mImageView.getLayoutParams().width = mScreenWidth / mMaxItemsOnScreen;
holder.mImageView.setImageDrawable(null);
int second = position * 3 - 3;
String TAG = String.valueOf(second);
holder.mImageView.setTag(TAG);
Bitmap bitmap = mFragment.getBitmapFromMemCache(TAG);
if(bitmap == null) {
PostVideoBitmapWorkerTask task = new PostVideoBitmapWorkerTask(holder.mImageView, TAG, mFragment);
task.execute(second);
}
else {
holder.mImageView.setImageBitmap(bitmap);
}
}
My AsyncTask class
public class PostVideoBitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> {
private ImageView mImageView;
private String TAG;
private PostVideoFeedFragment mFragment;
public PostVideoBitmapWorkerTask(ImageView imageView, String TAG, PostVideoFeedFragment fragment) {
mImageView = imageView;
this.TAG = TAG;
mFragment = fragment;
}
#Override
protected Bitmap doInBackground(Integer... params) {
Bitmap bitmap = mFragment.getFrameFromCurrentVideo(params[0]);
mFragment.addBitmapToCache(TAG,bitmap);
return bitmap;
}
#Override
protected void onPostExecute(Bitmap bitmap) {
if(mImageView.getTag().toString().equals(TAG)) {
mImageView.setImageBitmap(bitmap);
}
}
}
Snippet from my fragment class
public void addBitmapToCache(String key, Bitmap bitmap) {
if (getBitmapFromMemCache(key) == null) {
mMemoryCache.put(key, bitmap);
}
}
public Bitmap getBitmapFromMemCache(String key) {
return mMemoryCache.get(key);
}
I can recommend https://developer.android.com/training/displaying-bitmaps/cache-bitmap.html if you want to read up on caching
And also https://developer.android.com/reference/android/os/AsyncTask.html for reading up on asyncTask's

Picasso Target has been garbage collected

Good day.I have an google map with cluster manager.Simple one,where i use the cluster to draw markers grouped or not.Anyway i got an method callback from cluster manager which is the Cluster item render one.Inside that callback i am applying custom image to the marker:The user image inside marker.I found Picasso to be the best to handle bitmap loading and at the same time got me lots of headache.I am using Target class from Picasso to initiate the bitmap callbacks:OnPreLoad,OnFail,OnBitmapLoaded.The issue is that on first cluster item render the onBitmapLoaded not called and generally it is never gets called unless it has been touched second time.On first time nothing happens,no callback is triggered except OnPreLoad and by googling i found that the great Picasso holds weak reference to the class.I tried all the examples of the google:Making Target reference strong(getting the initialazation of class out of method and init the class inside my class like the follows)
#Override
protected void onClusterItemRendered(MarkerItem clusterItem, Marker marker) {
mMarker = marker;
mMarkerItem = clusterItem;
Picasso.with(mContext).load(clusterItem.getImageUrl()).transform(new CircleTransformation()).into(target);
}
private Target target = new Target() {
#Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
Log.d(TAG, "onBitmapLoaded: ");
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
Log.d(TAG, "onBitmapFailed: ");
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
Log.d(TAG, "onPrepareLoad: ");
}
};
#Override
protected void onBeforeClusterItemRendered(MarkerItem item, MarkerOptions markerOptions) {
markerOptions.title(item.getTitle());
markerOptions.icon(item.getIcon());
}
At this point i get the same result....Sometimes the bitmap loaded and sometimes not.Mostly not...
Anyway i have tried to implement the interface class to my own class as follows:
public class PicassoMarkerView implements com.squareup.picasso.Target {
private static final String TAG = "MarkerRender";
private Bitmap mMarkerBitmap;
private ClusterManager<MarkerItem> mClusterManager;
private MarkerItem mMarkerItem;
private Marker mMarker;
public PicassoMarkerView() {
}
#Override
public int hashCode() {
return mMarker.hashCode();
}
#Override
public boolean equals(Object o) {
if (o instanceof PicassoMarkerView) {
Marker marker = ((PicassoMarkerView) o).mMarker;
return mMarker.equals(marker);
} else {
return false;
}
}
#Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap,
mMarkerBitmap.getWidth() - 15, (int) (mMarkerBitmap.getHeight() / 1.5 - 15),
false);
mMarker.setIcon(BitmapDescriptorFactory.fromBitmap(overlay(mMarkerBitmap, scaledBitmap, 8, 7)));
Log.d(TAG, "onBitmapLoaded: ");
}
#Override
public void onBitmapFailed(Drawable errorDrawable) {
Log.d(TAG, "onBitmapFailed: ");
}
#Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
Log.d(TAG, "onPrepareLoad: ");
}
private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2, int left, int top) {
Bitmap res = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(),
bitmap1.getConfig());
Canvas canvas = new Canvas(res);
canvas.drawBitmap(bitmap1, new Matrix(), null);
canvas.drawBitmap(bitmap2, left, top, null);
return res;
}
public void setMarkerBitmap(Bitmap markerBitmap) {
this.mMarkerBitmap = markerBitmap;
}
public void setClusterManager(ClusterManager<MarkerItem> clusterManager) {
this.mClusterManager = clusterManager;
}
public void setMarkerItem(MarkerItem markerItem) {
this.mMarkerItem = markerItem;
}
public void setMarker(Marker marker) {
this.mMarker = marker;
}
}
Unfortunatally this is not working either...Same result...So please dear friends can you give me an working example of this?As far as i could google,the issue mostly happens to the user which try to do this inside loop and my onClusterItemRender some sort of loop lets say as it is triggered every time marker is visible to user,so yeah it is triggered several times and as fast as loop so give me some idea please and help me out...
Important to mention that i do not need to use methods from picasso like fetch(),get() as they are not necessary and not fitting the purpose of the app.

I encountered similar issue and holding reference to the target didn't help at all.
The purpose of my project was to use 2 different image downloading api's to show an images gallery and to give the user the ability to choose which api to use.
Beside Picasso I used Glide, and I was amazed by the results, Glide's api worked flawlessly in every aspect wile Picasso gave me hell (that was my first time using Glide, I usually used Picasso so far, seems like today it's gonna change ^^ ).
So my suggestion to you is:
Use glide over Picasso (no such weak reference on their target).
Since I had to use both libraries I ended up using get() in an handler, not sure if it will help you but it solved my problem:
handlerThread = new HandlerThread(HANDLER_THREAD_NAME);
handlerThread.start();
Handler handler = new Handler(handlerThread.getLooper());
handler.post(new Runnable() {
#Override
public void run() {
Bitmap bitmap = null;
try {
bitmap = picasso.with(appContext).load(url).get();
} catch (IOException e) {
e.printStackTrace();
}finally {
if (bitmap != null) {
//do whatever you wanna do with the picture.
//for me it was using my own cache
imageCaching.cacheImage(imageId, bitmap);
}
}
}
});

Images are not stored in the cache

I have this method, everything is worked perfectly but images always got from server and not load from cache! what happened ?
public static void makeImageRequest(String Unique_ID, final View parentView, final int id) {
String url = FILE_UPLOAD_FOLDER + Unique_ID + ".png";
final int defaultImageResId = R.drawable.user;
// Retrieves an image specified by the URL, displays it in the UI.
ImageCacheManager.getInstance().getImage(url, new ImageListener() {
#Override
public void onErrorResponse(VolleyError error) {
ImageView imageView = (ImageView) parentView.findViewById(id);
imageView.setImageResource(defaultImageResId);
}
#Override
public void onResponse(ImageContainer response, boolean isImmediate) {
if (response.getBitmap() != null) {
ImageView imageView = (ImageView) parentView.findViewById(id);
imageView.setImageBitmap(response.getBitmap());
} else if (defaultImageResId != 0) {
ImageView imageView = (ImageView) parentView.findViewById(id);
imageView.setImageResource(defaultImageResId);
}
}
});
}

Just use Picasso instead ImageCacheManager. Picasso is a powerful image downloading and caching library for Android. Images add much-needed context and visual flair to Android applications. Picasso allows for hassle-free image loading in your application—often in one line of code!
Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);
Here also can manage whether the image is successfully downloaded or it fails:
Picasso.with(context)
.load("http://i.imgur.com/DvpvklR.png")
.into(imageView, new Callback() {
#Override
public void onSuccess() {
// your code
}
#Override
public void onError() {
// your code
}
});
You should only add this line in your gradle:
compile 'com.squareup.picasso:picasso:2.5.2'
Hope it helps!

Android download and persist a lot of images in background

In my Android application I would like to download a certain number of photos which are linked to points on a map. For example, I have ten points on a map and I have 5 or 6 photos for each point.
At the begining I get 5 or 6 URL (http://theimageurls.com/image.jpg) per point, and for each photo,
I want to download them
I want to save them in the device.
Of course, everything's done in background.
The problem is that sometimes my images are not persisted... but the problem is very irregular and can be encountered on whatever image...
here is my code :
For each point, loadPictures() is called :
private void loadPictures(final KickstartrGeolocPoint point) {
//Photos : get directory path
final File pointDir = FileUtils.getPointPhotoDir(getActivity(), point);
//set boolean to true if the point has photos not downloaded.
ArrayList<String> photosNotDownloaded = getPhotosNotDownloaded(point, pointDir);
if(photosNotDownloaded.size()!=0){
point.setPhoto(true);
kickstartrGeolocService.updatePoint(currentPoint);
}else{
fillPointData(point);
return;
}
//for each urls, download and save photo
for(final String url : photosNotDownloaded){
if (!Utils.isValidUrl(url)) continue;
BitmapUtils.getBitmapFromUrl(url, new OnBitmapRetrievedListener() {
#Override
public void bitmapRetrieved(Bitmap bitmap) {
LogWrapper.debug(getClass(), "Ready to be saved");
persistImageforPoint(point, pointDir, bitmap, FileUtils.getFileNameFromUrl(url));
}
#Override
public void onLoadingStarted(String imageUri, View view) {
LogWrapper.debug(getClass(), "Image downloading... " + imageUri);
//YOU CAN NOTIFY THE VIEW HERE
}
#Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
LogWrapper.debug(getClass(), "Loading failed : " + imageUri);
}
});
}
}
getBitmapFromUrl() is a static method which use an external library called https://github.com/nostra13/Android-Universal-Image-Loader.
getBitmapFromUrl() :
public static void getBitmapFromUrl(String url, final OnBitmapRetrievedListener listener) {
//final int maxSize = context.getResources().getDimensionPixelSize(R.dimen.icon_max_size);
ImageLoader.getInstance().loadImage(url, new ImageLoadingListener() {
#Override
public void onLoadingStarted(String imageUri, View view) {
listener.onLoadingStarted(imageUri,view);
}
#Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
listener.onLoadingFailed(imageUri,view,failReason);
}
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
listener.bitmapRetrieved(loadedImage);
}
#Override
public void onLoadingCancelled(String imageUri, View view) {
//do nothing for the moment...
// TODO notify the UI
}
});
}
persistImageforPoint() is called to save the photo :
private void persistImageforPoint(KickstartrGeolocPoint point, File pointDir, Bitmap bitmap, String imageName) {
// Create a subfolder for each point with its id
if (!pointDir.exists()) {
if (!pointDir.mkdirs()) {
LogWrapper.debug(FileUtils.class, "Failed to create directory");
return;
}
}
final String fullPath = pointDir.getPath()+File.separator+FileUtils.getPointPhotoPrefix(point)+FileUtils.getFileNameFromUrl(imageName);
//save the file. Asynchronous task --> do not block the UI
new BitmapPersist(bitmap,fullPath, new OnBitmapPersistedListener() {
#Override
public void persistedSuccessfully() {
addPhotoView(fullPath);
}
#Override
public void errorInPersistance() {
LogWrapper.error(getClass(),"Error persisting image with path "+fullPath);
}
}).execute();
}
Here is my BitmapPersist class :
public class BitmapPersist extends AsyncTask<String, Void, Boolean> {
private String path;
private Bitmap bitmap;
private OnBitmapPersistedListener onBitmapPersistedListener;
public BitmapPersist(Bitmap bitmap, String path, OnBitmapPersistedListener onBitmapPersistedListener) {
this.bitmap=bitmap;
this.path=path;
this.onBitmapPersistedListener=onBitmapPersistedListener;
}
#Override
protected Boolean doInBackground(String... params) {
FileOutputStream out = null;
try {
out = new FileOutputStream(path);
bitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
return true;
} catch (Exception e) {
e.printStackTrace();
} finally {
try{
out.close();
} catch(Throwable ignore) {}
}
return false;
}
#Override
protected void onPostExecute(Boolean success) {
if (success)
onBitmapPersistedListener.persistedSuccessfully();
onBitmapPersistedListener.errorInPersistance();
}
}
Problem : Sometimes my pictures are not saved, sometimes the application crashes... although everything's done in background threads...
Thanks for your help.
EDIT : Maybe I can add precisions on the library I'm using to download images : It's Android-Universal-Image-Loader (link above). This library works with memory cache and... disk cache. Maybe I can look at this cache. Maybe I can change the path of disk cache and save my pictures with that. I'm also looking for someone who knows this library (developped by NOSTRA)... The documentation is quite succinct...
SOLUTION : Don't need to create 2 Asynctasks : Download the picture synchronously and then persist it in the same asynctask.

Universal Image Loader: Can I use cache but also refresh it?

I'm loading dynamically generated images so I always want them to be up to date. But they take time to load so I also want to display a cached version while the updated one doesn't come.
How can I do this with Universal Image Loader?
More specifically, when I call "displayImage" I want it to do the following:
If a cached image exists display it right away.
Start downloading from the given url anyways.
When the image loading finishes, display it in the view replacing the cached image.
Update the cache.

So in the end I used an ImageLoadingListener as follows:
onLoadingStarted:
Check for cache when loading starts.
onLoadingComplete:
If no cache was found then do nothing. The request will be sent to network and cache will be updated naturally.
Otherwise clear cache and call displayImage again (no listener needed this time). The cached image will be shown in the view normally. Moreover, when the 2nd loading finishes, view and cache will be updated.
ImageLoader.getInstance().displayImage(imageUri, view, new SimpleImageLoadingListener() {
boolean cacheFound;
#Override
public void onLoadingStarted(String url, View view) {
List<String> memCache = MemoryCacheUtils.findCacheKeysForImageUri(url, ImageLoader.getInstance().getMemoryCache());
cacheFound = !memCache.isEmpty();
if (!cacheFound) {
File discCache = DiscCacheUtils.findInCache(url, ImageLoader.getInstance().getDiscCache());
if (discCache != null) {
cacheFound = discCache.exists();
}
}
}
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
if (cacheFound) {
MemoryCacheUtils.removeFromCache(imageUri, ImageLoader.getInstance().getMemoryCache());
DiscCacheUtils.removeFromCache(imageUri, ImageLoader.getInstance().getDiscCache());
ImageLoader.getInstance().displayImage(imageUri, (ImageView) view);
}
}
});
}

You can use the ImageLoadingListener. This interface has 4 methods to override:
onLoadingStarted,onLoadingFailed,onLoadingComplete,onLoadingCancelled. In onLoadingStarted you can make the image the cached one, then on completed you change it.
So the call would look like this:
imgLoader.displayImage(url, myImageView,new ImageLoadingListener()
{
#Override
public void onLoadingStarted(String arg0, View arg1) {
//Display cached image if it exists
}
#Override
public void onLoadingFailed(String arg0, View arg1, FailReason arg2) {
// TODO Auto-generated method stub
}
#Override
public void onLoadingComplete(String arg0, View arg1, Bitmap arg2)
{
((ImageView)arg1).setBitmapImage(arg2);
}
#Override
public void onLoadingCancelled(String arg0, View arg1) {
// TODO Auto-generated method stub
}
});

private lateinit var options: DisplayImageOptions
options = DisplayImageOptions.Builder()
.considerExifParams(true)
.bitmapConfig(Bitmap.Config.RGB_565)
.cacheOnDisk(true)
.cacheInMemory(true)
.build()
ImageLoader.getInstance().displayImage(Model.img_url, itemView.ivPlayer, options)