Develop Reference

Why images loaded by Glide get downsampled to low resolution in a RecyclerView?

I'm switching from Picasso to Glide in my app. I have a RecyclerView, each of whose items is a CustomView. This CustomView adds TextView or ImageView dynamically based on different data sources.
A FillWidthImageView is used to display these images, it fill the screen width automatically. When I use Picasso, it works well. However, when I use Glide to load images, the image displayed in the FillWidthImageView looks like a mosaic with extremely low resolution, because it's heavily downsampled.
And if I use a normal ImageView instead, size of loaded image is the same as the placeholder, and images still look like a mosaic. If there is no placeholder, the images look tiny on the screen. And if I display the images in an empty Activity, they will be loaded with full resolution and correct size.
Code of adding ImageView in my CustomView(extends LinearLayout), called in RecyclerView.onCreateViewHolder()
public void addImageView() {
ImageView imageView = new FillWidthImageView(getContext());
imageView.setPadding(0, 0, 0, 10);
imageView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
addView(imageView);
}
Code of FillWidthImageView
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable drawable = getDrawable();
if (drawable != null) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int diw = drawable.getIntrinsicWidth();
if (diw > 0) {
int height = width * drawable.getIntrinsicHeight() / diw;
setMeasuredDimension(width, height);
} else
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} else
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
Code of loading images, called in RecyclerView.onBindItemViewHolder()
Glide.with(getContext()).load(url).into(imageView);

Thanks #Hitesh Kr Sahu, but I have solved of the bug by myself. It's because the Glide didn't get the right dimensions of my CustomView wrapper. I solved this bug by applying the dimensions by calling .override(int,int) and .fitCenter(). I passed the width and height of screen to it, so it will be scaled fitting the screen size.

Image loaded by Glide has the worse quality compared to Picasso because Glide's default Bitmap Format is set to RGB_565 & it consumed just 50% memory footprint compared to ARGB_8888.
That make Glide faster than Picasso as you can see in this video.
Good news is you can switch Bitmap Format to ARGB_8888 by creating a new class which extended from GlideModule like this :-
public class GlideConfiguration implements GlideModule {
#Override
public void applyOptions(Context context, GlideBuilder builder) {
// Apply options to the builder here.
builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
}
#Override
public void registerComponents(Context context, Glide glide) {
// register ModelLoaders here.
}
}
and adding metadata field in manifest
<meta-data android:name="com.inthecheesefactory.lab.glidepicasso.GlideConfiguration"
android:value="GlideModule"/>
You can read more about it here glide Configuration page of Glide's wiki and as you have switched from Picasso you will find this an interesting read

PhotoViewAttacher clears imageView bounds and zoom level

I'm using PhotoView library for the implementation of a zooming Android ImageView. The zooming works fine.
I'm setting an image with low-quality in ImageView and then start to download the new image with hight-quality which will replace the low-quality image.
If the user zooms in the low-quality image - the high-quality image replaces the existing image and the zoom level clears :(
How can I save the zoom level after loading the high-quality image?
I've tried to get the image Matrix from PhotoViewAttacher in low-quality and set it to the high-quality image, but it doesn't work - the image zoom level and bounds aren't the same as they were before. The high-quality image replaced the low-quality image in ImageView.
Matrix matrix;
imageView.setImageBitmap(imageBitmap);
...
PhotoViewAttacher mAttacher = new PhotoViewAttacher(imageView);
// save the matrix before any modifications
matrix = mAttacher.getDisplayMatrix();
mAttacher.setOnMatrixChangeListener(new OnMatrixChangedListener() {
#Override
public void onMatrixChanged(RectF rect) {
// update the matrix
matrix = mAttacher.getDisplayMatrix();
}
});
imageProvider.load(getActivity(), imageView, imageUrl, progressBarView, imageConfig, new ImageCallback() {
#Override
public void onSuccess(ImageView imageView) {
// update image in ImageView
// probably the problem is in this .update() call
// but I don't get what's the exact problem
mAttacher.update();
// restore high-quality image matrix
mAttacher.setDisplayMatrix(matrix);
}
#Override
public void onError(ImageView imageView) {
}
});
Edit: Images have different dimensions.

After looking at the code of PhotoViewAttacher.java - it seems that calling update() does two things:
Ensure the scale type for ImageView is set to ScaleType.MATRIX.
Invalidate the current matrix and recalculate it according to the dimensions of the new Drawable.
So, assuming your first and second image both have exactly the same dimensions, you can just skip the update() call, which should retain the current zoom and pan values.

Universal Image Loader cache images

I have trouble finding the right workflow to load images into cache.
What I want to do:
Show Progress bar
Get data from REST service and load it into SQLite database
Some objects contain urls in JSON > load these images in cache so
they are quickly loaded when needed
Dismiss Progress bar
I have all the data loaded from rest and stored in a DB,
but I'm new to caching images.
What I go so far:
- Inserted Universal Image Loader into my project
(https://github.com/nostra13/Android-Universal-Image-Loader)
- I tried
imageLoader.loadImage(url of an image, new SimpleImageLoadingListener() {
#Override
public void onLoadingStarted(String imageUri, View view) {
super.onLoadingStarted(imageUri, view);
//notify me the image started loading
}
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
super.onLoadingComplete(imageUri, view, loadedImage);
//notify me the image is loaded
}
}
But when I check:
int size = MemoryCacheUtils.findCachedBitmapsForImageUri(url from that image, ImageLoader.getInstance().getMemoryCache()).size();
//show me the size
it's always zero.
My question is the following: am I going in the right direction or do I need to fix this someother way?

I found a better solution: ShutterBug (Android alternative for SDWebImage for iOs). It's easy to add urls to the ShutterbugManager and when I want to fill an ImageView (FetchableImageView in Shutterbug) with an image, it grabs the image from cache.

Unable to set image view background image using universal image loader?

I am trying to set background for the image view. But not got luck to set background using universal image loader.
I am using following code.
DisplayImageOptions options = new DisplayImageOptions.Builder()
.showStubImage(R.drawable.mo_no_image)
.showImageForEmptyUri(R.drawable.mo_no_image)
.cacheInMemory().cacheOnDisc()
.displayer(new RoundedBitmapDisplayer(0))
.imageScaleType(ImageScaleType.EXACTLY).build();
ImageLoader.getInstance().displayImage("url_to_load_image", imgView, options);
By using above code I am able to set image resource which check aspect ratio and using that modifying image size.
I want to set downloaded image to the background of image view.

I can recommend a different way that works like a charm: Android Query.
You can download that jar file from http://code.google.com/p/android-query/downloads/list
AQuery androidAQuery=new AQuery(this);
As an example:
androidAQuery.id(YOUR IMAGEVIEW).image(YOUR IMAGE TO LOAD, true, true, getDeviceWidth(), ANY DEFAULT IMAGE YOU WANT TO SHOW);
It's very fast and accurate, and using this you can find many more features like Animation when loading; getting a bitmap, if needed; etc.
In your case you need to fetch Bitmap, so for it, use below code
androidAQuery.ajax(YOUR IMAGE URL,Bitmap.class,0,new AjaxCallback<Bitmap>(){
#Override
public void callback(String url, Bitmap object, AjaxStatus status) {
super.callback(url, object, status);
//You will get Bitmap from object.
}
});
Use this bitmap to set your background resource of ImageView using method.

Universal Image Loader also provide to use the Background functionality.Please check the below coed for it:-
Here Uri is the path of the folder image OR the url of the image.
imageLoader.loadImage(YOUR_URL, new SimpleImageLoadingListener() {
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
super.onLoadingComplete(imageUri, view, loadedImage);
layout.setBackgroundDrawable(new BitmapDrawable(loadedImage));
}
});

Universal Image Loader get original image size

I am using the Android-Universal-Image-Loader library to loading/caching remote images, and have been digging through the source for quite a while trying to find a way to retrieve the original image size (width and height) for my ImageLoadingListener.
The sample code below is just give you an idea of what I'm trying to do.
protected class ViaImageLoadingListener implements ImageLoadingListener {
final SelectableImageView selectableImageView ;
protected ViaImageLoadingListener(SelectableImageView selectableImageView) {
this.selectableImageView = selectableImageView;
}
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
selectableImageView.setImageBitmap(loadedImage);
// loadedImage.getWeight() will not return the original
// dimensions of the image if it has been scaled down
selectableImageView.setOriginalImageSize(width, height);
selectableImageView.invalidate();
}
I have tried extending the ImageDecoder class and the ImageLoader class to find a round-about way to linking the decoder (from which I can get the original image size in the #prepareDecodingOptions method) to my custom ImageLoadingListener. But the configuration object is private and the fields (including the decoder) are inaccessible from subclasses (and feels like an overly hacky way of solving the problem anyways).
Have I overlooked a simple "built-in" way of getting the original image size without losing the benefit of the UIL's scaling/memory management?

There is no way to pass original image size from ImageDecoder to listener through params.
I think the solution for you is following.
Extend BaseImageDecoder and create map in it for keeping image sizes:
Map<String, ImageSize> urlToSizeMap = new ConcurrentHashMap<String, ImageSize>();
Then override defineImageSizeAndRotation(...):
protected ImageFileInfo defineImageSizeAndRotation(InputStream imageStream, String imageUri) throws IOException {
ImageFileInfo info = super.defineImageSizeAndRotation(imageStream, imageUri);
urlToSizeMap.put(imageUri, info.imageSize); // Remember original image size for image URI
return info;
}
Note: info.imageSize won't compile because imageSize isn't visible. I'll fix it in next version (1.8.5) but you can use reflection for now.
Set this decoder into configuration and keep reference to this decoder anywhere (or you can make urlToSizeMap static to access from listener).
Then in your listener:
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
selectableImageView.setImageBitmap(loadedImage);
ImageSize imageSize = decoder.urlToSizeMap.get(imageUri);
selectableImageView.setOriginalImageSize(imageSize.getWidth(), imageSize.getHeight());
selectableImageView.invalidate();
}

It seems that you do not have to implement own ImageLoadingListener if you want to get original size of loaded image. I use loadImage method and it seems recieved bitmap has origin sizes.
UIL v1.8.6
loader.loadImage(pin_url, option, new SimpleImageLoadingListener() {
#Override
public void onLoadingFailed(String imageUri, View view,
FailReason failReason) {
showErrorLayout();
}
#Override
public void onLoadingComplete(String imageUri, View view,
Bitmap loadedImage) {
// width - device width
// height - OpenGl maxTextureSize
if (width < loadedImage.getWidth() || height < loadedImage.getHeight()) {
// handle scaling
}
iv.setImageBitmap(loadedImage);
}
});