Develop Reference

Android fresco lib , apply custom filter

i'm using fresco to display images to my app. Right now i'm trying to apply some filters to my images but the problem is that the filter library only results Bitmap. But the draweeView.setImageBitmap is deprecated.
I also tried with a post processor like this
MeshPostprocessor meshPostprocessor = new MeshPostprocessor();
meshPostprocessor.setFilter(filters.get(0));
draweeView = (SimpleDraweeView) view.findViewById(R.id.filter_image);
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(image)
.setPostprocessor(meshPostprocessor)
.setResizeOptions(new ResizeOptions(100, 100))
.build();
PipelineDraweeController controller = (PipelineDraweeController)
Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(draweeView.getController())
.build();
draweeView.setController(controller);
and here is the PostProcessor
public static class MeshPostprocessor extends BaseRepeatedPostProcessor {
private AbstractConfig.ImageFilterInterface filter;
public void setFilter(AbstractConfig.ImageFilterInterface filter) {
this.filter = filter;
update();
}
#Override
public String getName() {
return "meshPostprocessor";
}
#Override
public void process(Bitmap bitmap) {
bitmap = filter.renderImage(bitmap);
}
}
so when I click on a filter i just run this
meshPostprocessor.setFilter(colorFilterConfig.get(position));
I tried with the debugger, the code goes through all the methods (setFilter , process etc..) but the image is not changing at all...
What am i missing?

I think you don't need a BaseRepeatedPostProcessor in your case.
A normal BasePostProcessor should be sufficient here.
However, the issue seems to be your custom filter:
#Override
public void process(Bitmap bitmap) {
bitmap = filter.renderImage(bitmap);
}
I suppose it returns a different Bitmap? This does not work in Java / for Fresco.
If your filter can do the processing in place, you can use process(Bitmap bitmap) and directly modify the given bitmap (e.g. bitmap.setPixel(...)).
If you cannot do it in place, you can override process(Bitmap destBitmap, Bitmap sourceBitmap) instead and modify destBitmap.
If your bitmap changes it's size, you can override CloseableReference<Bitmap> process(Bitmap sourceBitmap, PlatformBitmapFactory bitmapFactory). However, in this case make sure to actually use the provided bitmapFactory to create the new bitmap to be efficient.
For more information, take a look at http://frescolib.org/docs/modifying-image.html for more information or check out the JavaDoc for BasePostprocessor.

ok so the way I solved this is by adding a super call on the process like this
#Override
public void process(Bitmap dest, Bitmap source) {
Bitmap filtered = filter.renderImage(source, intensity);
super.process(dest, filtered);
}
i didn't noticed that you have to call super in order for the changes to have effect.

Android + Volley: how to get image bitmap using ImageLoader?

I'm trying to get images for list view using Volley Library. I created simple HTTP helper with the following method.
/**
* Processing Image request and gets the image with given URL
*/
public Bitmap makeImageRequest(String url) {
ImageLoader il = new ImageLoader(queue, new BitmapLruCache());
il.get(url, new ImageLoader.ImageListener() {
#Override
public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {
mBitmap = processImageResponse(response);
}
#Override
public void onErrorResponse(VolleyError error) {
VolleyLog.d(Constants.Global.ERROR, "Error: " + error.getMessage());
mBitmap = null;
}
});
return mBitmap;
}
But problem is that:
new BitmapLruCache()
Method is not recognized.
So i tried to create ImageLoader using the following code which i found on the URL:
http://www.androidhive.info/2014/05/android-working-with-volley-library-1/
ImageLoader imageLoader = AppController.getInstance().getImageLoader();
But in thos code i cannot find out where to get
AppController
Because the method code is triggered from the custom
public class HttpHelperClass
And called from the activity using the:
// Try to load remote image from URL
Bitmap bm = http.makeImageRequest("http://camranger.com/wp-content/uploads/2014/10/Android-Icon.png");
ImageView iv = (ImageView) findViewById(R.id.imageView);
iv.setImageBitmap(bm);
Is it the right approach how to load images and how can i repair my code to make succcessfull request?
Many thanks for any advice.

I think your makeImageRequest method will always return null because it takes some time for the onResponse or onErrorResponse listeners to get called but you return the mBitmap immidately!
If you want to use Volley's ImageLoader you'd better get image inside your activity or ... not from another class like your HttpHelperClass.
Also AppController is a class that extends Application and you should create it yourself. (It's in your AndroidHive link. Section 3. Creating Volley Singleton class)
And also for caching images you should not create a new ImageLoader everytime because in this way the caching gets meaningless. You should get that from your AppController class.
Furthermore I suggest you using Picasso because it's way better that Volley in image loading and a lot easier!
With Picasso you only need to call the following line to load an image from web into an ImageView:
Picasso.with(context).load(urlString).to(imageView);

How to make Volley NetworkImageView worke offline

I use Volley NetworkImageView to download images from internet and show in my listview. Now I want to make Volley NetworkImageView show saved images when there is no network available. Volley has already cached images by URL as a key because when I use
Entry entry = SingletonRequestQueue.getInstance(context).getRequestQueue().getCache().get(imageURL);
the entry.data is not null. But my problem is that image resolutions are high and I can not use
Bitmap b = BitmapFactory.decodeByteArray(entry.data, 0, entry.data.length);
because it creates a lot of lag and I have to reinvent the wheel because again I must create asynctask see when listview has scrolled to cancel decoding, recycling the bitmap, creating in memory cache, finding best insample value and ...
so better Idea is just do some tricks that make Volley NetworkImageView use its own DiskLRUCache to show them when there is no network.
Any idea?
My code:
public class SingletonRequestQueue {
private static SingletonRequestQueue mInstance;
private RequestQueue mRequestQueue;
private ImageLoader mImageLoader;
private static Context mCtx;
private LruBitmapCache mLruBitmapCache;
private SingletonRequestQueue(Context context) {
mCtx = context;
mRequestQueue = getRequestQueue();
mLruBitmapCache = new LruBitmapCache(LruBitmapCache.getCacheSize(context));
mImageLoader = new ImageLoader(mRequestQueue,mLruBitmapCache);
}
public static synchronized SingletonRequestQueue getInstance(Context context) {
if (mInstance == null) {
mInstance = new SingletonRequestQueue(context);
}
return mInstance;
}
public RequestQueue getRequestQueue() {
if (mRequestQueue == null) {
// getApplicationContext() is key, it keeps you from leaking the
// Activity or BroadcastReceiver if someone passes one in.
mRequestQueue = Volley.newRequestQueue(mCtx.getApplicationContext(),new OkHttpStack());
// mRequestQueue = Volley.newRequestQueue(mCtx.getApplicationContext());
}
return mRequestQueue;
}
public <T> void addToRequestQueue(Request<T> req) {
getRequestQueue().add(req);
}
public ImageLoader getImageLoader() {
return mImageLoader;
}
public LruBitmapCache getLruBitmapCache() {
return mLruBitmapCache;
}
public void setLruBitmapCache(LruBitmapCache lruBitmapCache) {
mLruBitmapCache = lruBitmapCache;
}
}
and in my adapter:
public IssueListAdapter(Context context, int resource, List<Issue> objects) {
super(context, resource, objects);
this.context = context;
this.mIssueList = objects;
mImageLoader = SingletonRequestQueue.getInstance(context).getImageLoader();
}
public static class ViewHolder{
public NetworkImageView mNetworkImageView;
public TextView mFee;
public TextView mName;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if(convertView == null){
holder = new ViewHolder();
LayoutInflater inflater =
(LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.gridview_issuelist_item, parent, false);
holder.mNetworkImageView = (NetworkImageView)convertView.findViewById(R.id.NetworkImageView_MainActivity_issue_image);
holder.mName = (TextView)convertView.findViewById(R.id.TextView_MainActivity_name);
holder.mFee = (TextView)convertView.findViewById(R.id.TextView_MainActivity_fee);
Utility.settingTypfaceFont(context, holder.mName);
Utility.settingTypfaceFont(context, holder.mFee);
convertView.setTag(holder);
}else{
holder = (ViewHolder)(convertView.getTag());
}
final Issue issue = mIssueList.get(position);
holder.mName.setText(issue.getTitle());
holder.mFee.setText(String.valueOf(issue.getFee()));
String imageURL = issue.getPublicCover();
holder.mNetworkImageView.setImageUrl(imageURL, mImageLoader);
holder.mNetworkImageView.setDefaultImageResId(R.drawable.placeholder2);;
/*
Entry entry = SingletonRequestQueue.getInstance(context).getRequestQueue().getCache().get(imageURL);
if(entry != null && entry.data != null){
byte[] imageByte = entry.data;
loadBitmap(imageByte, holder.mNetworkImageView,imageURL);
}else{
holder.mNetworkImageView.setImageUrl(imageURL, mImageLoader);
}*/
return convertView;
}
#Override
public int getCount() {
if(mIssueList != null){
return mIssueList.size();
}
else{
return 0;
}
}
public List<Issue> getIssueList() {
return mIssueList;
}
}

I prefer to use Volley/retrofit with Android-Universal-Image-Loader
/Picasso, picture loader libs have done a great job in loading and caching images indeed.
They handle everything with a single line of code by default:
Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);
Also you can animate, resize your images and add placeholder while they loading.

Just add this line in BasicNetwork class
if (!ConnectivityUtils.isNetworkEnabled(CardApplication.getContext()) && request instanceof ImageRequest) {
VolleyLog.e("Cached response", "No Network Connectivity for Url=", request.getUrl());
return new NetworkResponse(HttpStatus.SC_NOT_MODIFIED,
request.getCacheEntry().data, responseHeaders, true);
}
and for data request expiry you can change the Cached.Entry using using own HttpHeaderParser
Here is Link which explain thing in detail

When you restart your app in offline, the last thing you can rely on just the Disk Cache(i.e. DiskBasedCache). Volley's local cache consist of network data and the response headers. But in this situation, we just need to focusing on the Cache-Control header. For instance, if the server-side return that header is "Cache-Control: max-age=604800", that's tell Volley to cache the response resource for 604800 seconds( source at HttpHeaderParser.parseCacheHeaders() ). Then next time we retrieving the same url's data would checking if exceeded the cache expire time, finally decide retrieve from network or local.
Follow your describe, I suppose your server-side deliver you a value like Cache-Control:must-revalidate|proxy-revalidate|no-cache|no-store, that's why you can't reuse the last retrieved data when you were in offline.
Right now there is question came : once we can manipulate the cache expire time, we'll be capable of increase that time to a large enough value so we can ensure us use that data in offline.
Unfortunately, Volley does not support us to do this. So if you can make the server-side to delivering a viable max-age for this?
If not, I'd suggest you to change to another library which fulfill this desired. and there actually have one can be your friend, is Netroid. It's based on Volley and offered a few improvements, that won't make you change your current code very much. With it, control the expire time would be far easier, and more features would be come with.
mImageLoader = new SelfImageLoader(mRequestQueue, mLruBitmapCache) {
#Override
public void makeRequest(ImageRequest request) {
// you can manipulate the cache expire time with one line code.
request.setCacheExpireTime(TimeUnit.DAYS, 10);
// you can even according to the different request to
// set up the corresponding expire time.
if (request.getUrl().contains("/for_one_day/")) {
request.setCacheExpireTime(TimeUnit.DAYS, 1);
} else {
request.setCacheExpireTime(TimeUnit.DAYS, 10);
}
}
};
the full code was on the project's sample module, i hope this can be helpful.

Hello #mmlooloo I have created a project which use DiskLRUCache and Volley. Here's the link of my repository DiskLRUCache using Volley. Hope it will helps you to show saved image. Thanks.

Search internet for "android how to check internet connectivity"
implement that and check it in your cache implementation (like LruCache).
if(networkAvailable()){ getFromNetwork()} else { getFromCache()}
logic is ok? then just try.
It seems your cache impl class is LruBitmapCache.
then how about check connectivity in that class?
public Bitmap getBitmap(String url) {
if(networkAvailable()/* this is your impl */){
// dont use cache
return null;
}
return getFromCache(); // or something like that;
}

If I understand you correctly, you would benefit if the memory cache provided to the ImageLoader class that's used by your NetworkImageView will be persisted between app runs, without losing the fact that it's a memory cache.
That memory cache keeps the correctly sized bitmap in normal operation - which you would like available even if the network goes down.
So here's an idea: every time you're app is closed, persist on file the images from the cache. The next time you load your app, when you create the memory cache - check for a persisted version on the disk, and if it's available - populate the memory cache from the disk.
There are several approaches you can take to decide when to persist an image and when to delete it.
Here's one approach: create a hybrid memory / disk cache. It would work exactly the same as your memory cache works now with the following differences:
Every time putBitmap() is called, along with your normal operation, save an encoded version of the bitmap to the disk in a background thread / AsyncTask.
Every time a bitmap is removed from the cache (I'm assuming you have some sort of space constraint on the cache), delete that file from the disk on a background thread / AsyncTask.
Create a "loadFromDisk" task, to be performed in the background every time a memory cache is created (once per app run) to populate your memory cache with the available images from the disk.
You can't avoid decoding the bitmaps, however you can cut the size and having to deal with resizing large bitmaps.
Does this help you?

Parsing URI stored in local storage on device to ImageView

I'm creating the app where i have to display multiple URI's the user has chosen from their own images, currently i'm just trying to display one:
Current code:
(TouchImageView is just a library i'm used that works exactly like imageview)
TouchImageView img = (TouchImageView) findViewById(R.id.img);
img.setImageURI(Uri.parse("file://storage/emulated/0/DCIM/Camera/1411724483755.jpg"));
I have also tried parsing the URI to a bitmap but i can't get it to work.

You may not want to use setImageURI - as the documentation points out, this will decode the image on the UI thread, which is usually not a good idea.
Depending on the rest of the context, I'd suggest using an AsyncTask to load the file into a Bitmap on a separate thread, then after that is done, you can use ImageView.setImageBitmap on the UI thread.
So for example, something like this:
private class ImageLoadTask extends AsyncTask<Uri, Void, Bitmap> {
#Override
protected Bitmap doInBackground(Uri... uris) {
return BitmapFactory.decodeFile(uris[0].getPath());
}
#Override
protected void onPostExecute(Bitmap bmp) {
mImageView.setImageBitmap(bmp);
}
}
...
mImageView = (TouchImageView)findViewById(R.id.img);
new ImageLoadTask.execute(uri);

okay the answer was to parse it as a file and do a .toString()
This is the code that works:
TouchImageView img = (TouchImageView) findViewById(R.id.img);
img.setImageURI(Uri.parse((new File("file://storage/emulated/0/DCIM/Camer/1411724483755.jpg").toString())));

Caching Images - Bitmap not collected after different bitmap was loaded or ImageView's activity closed

I am trying to implement something that is very similar to UrlImageViewHelper (https://github.com/koush/UrlImageViewHelper) where you can easily using a simple one line of code, load images from a url, and if the image was already downloaded it is loaded from the cache instead. The major difference is that I want the same effect but instead of downloading it from a url, I want to receive the images from my own server using my own client-server communication. Every image on my server can be uniquely identified by a string, and I use this as the id for the image.
My main idea was this: Use an LRU Cache to hold the images, but instead of holding the Bitmaps (that are very large) I want to hold the raw image data binary, so I can use the same image to build bitmaps of different sizes and qualities on demand depending on the specific situation.
This is my implementation so far:
public class ImageHandler {
private static class BitmapCache extends LruCache<String, byte[]>
{
public WigoBitmapCache(int maxSize) {
super(maxSize);
}
#Override
protected int sizeOf(String key, byte[] value) {
return value.length;
}
}
private static class ImageHandlerThread extends Thread
{
/* THIS THREAD WILL DECODE THE IMAGE AND SET THE BITMAP TO THE IMAGEVIEW IN THE BACKGROUND */
Activity activity;
ImageView imageView;
byte[] imageBytes;
public ImageHandlerThread(Activity activity, ImageView imageView, byte[] imageBytes)
{
this.activity=activity;
this.imageView=imageView;
this.imageBytes=imageBytes;
}
public void run() {
BitmapFactory.Options o = new BitmapFactory.Options();
o.inJustDecodeBounds = true;
BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length, o);
int factor1=o.outHeight/height;
int factor2=o.outWidth/width;
/* height and width are for now constant */
o = null;
o = new BitmapFactory.Options();
if (factor1>factor2)
o.inSampleSize=factor1;
else
o.inSampleSize=factor2;
Bitmap bit = BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length,o);
setBitmap(bit);
bit = null;
}
private void setBitmap(final Bitmap bit) {
activity.runOnUiThread(new Runnable() {
#Override
public void run() {
imageView.setImageBitmap(bit);
}
});
}
}
private static class QueueItem
{ /*USED TO HOLD INFO ABOUT THE IMAGE REQUEST UNTIL THE IMAGE GETS FROM THE SERVER */
String imageName;
Activity activity;
ImageView imageView;
public QueueItem(String imageName, Activity activity, ImageView imageView)
{
this.imageName=imageName;
this.activity = activity;
this.imageView = imageView;
}
}
private BitmapCache cache; // this cache holds the image binaries
private ArrayList<QueueItem> queue; // this queue holds the info about the request, until the server sends the image
public ImageHandler(int maxSize)
{
cache=new BitmapCache(maxSize);
queue = new ArrayList<QueueItem>();
}
public synchronized void setBitmap(Activity activity, ImageView imageView, String imageName)
{
byte[] imageBytes = cache.get(imageName);
if (imageBytes==null)
{
QueueItem item = new QueueItem(imageName, activity, imageView);
queue.add(item);
/* HERE IS THE CODE TO RETRIEVE THE IMAGE BINARY FROM MY SERVER, THIS CODE WORKS FINE, SO THERE IS NO REASON TO BOHER YOU WITH IT */
}
else
{
ImageHandlerThread thread = new ImageHandlerThread(activity, imageView, imageBytes);
thread.start();
}
}
public synchronized void insert (String imageName, byte[] imageBytes)
{
/* THIS METHOD IS THE CALLBACK THAT IS CALLED WHEN THE IMAGE BINARY IS RECEIVED FROM THE SERVER */
cache.put(imageName, imageBytes);
for (QueueItem item: queue)
{
if (item.imageName.equals(imageName))
{
ImageHandlerThread thread = new ImageHandlerThread(item.activity, item.imageView, imageBytes);
thread.start();
queue.remove(item);
}
}
}
}
Basically, the main method here is setBitmap(), it gets the activity, the imageView that needs the bitmap, and the name of the image name. If the image is already in the cache, a new thread is started to decode the bytes into the proper size bitmap and set the bitmap to the imageView. If the image is not present in the cache, the request is put in a queue until the image is received, the image is retrieved from the server and then the same thread as before is started.
All this works absolutely fine, the problem is that when the imageView is set another bitmap for the image or even when the activity is destroyed, the bitmap is still resident in memory and is not collected by the GC.
At first I though that it is because I was keeping a reference to the activity, and that reference keeps the activity alive, but it seems not to be the case, my reference to an activity is very short lived, and once the image arrives from the server this reference is cleared.
I am running out of memory fast with this implementation, and I have no idea why or what to do to fix it. The bitmaps I create are not collected although I keep no references to them. Could this be an artifact of the way I decode the images? or do the threads keep references that are not collected properly? Anyone has any ideas?

Ok, so I misunderstood the problem, what was happening is that the GC was not collecting the finished thread objects because I was running this in debug mode, and not in run mode. When I ran this in run mode, the memory usage of my app did not go above 8MB at all, while when it was in debug mode I got to the 25MB+ area.
Conclusion: Do not trust the GC and memory usage info in debug mode, especially if you have many short term threads running.