Eucar Eucar - 6 months ago 20
Android Question

ListView with Image Loader not loading efficienty

As you can see in the video the ListView is not scrolling smoothly.

https://youtu.be/pNnyNDTc9Cg

It's like it always reload the image from URL.

What I want to have is it should look smooth, so professional.

When the image is not valid then the ImageView should be invisible and null.

I am using Universal-Image-Loader library.

Here's my code.

String url = MainActivity.IMAGE_URL + "postid=" + model.get(position).getId();
loader.loadImage(url, new SimpleImageLoadingListener() {
@Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
holder.image.setVisibility(View.VISIBLE);
holder.image.setImageBitmap(loadedImage);
}

@Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
holder.image.setVisibility(View.GONE);
holder.image.setImageBitmap(null);
}

@Override
public void onLoadingCancelled(String imageUri, View view) {
holder.image.setVisibility(View.GONE);
holder.image.setImageBitmap(null);
}
});


And here the complete code.

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
View view;
if(convertView == null) {
LayoutInflater inflater = LayoutInflater.from(context);
view = inflater.inflate(R.layout.post_adapter, null);

ViewHolder viewHolder = new ViewHolder();

viewHolder.avatar = (ImageView) view.findViewById(R.id.post_avatar);
viewHolder.title = (TextView) view.findViewById(R.id.post_title);
viewHolder.time = (TextView) view.findViewById(R.id.post_time);
viewHolder.text = (TextView) view.findViewById(R.id.post_text);
viewHolder.image = (ImageView) view.findViewById(R.id.post_image);
viewHolder.likes = (TextView) view.findViewById(R.id.post_likes);
viewHolder.comments = (TextView) view.findViewById(R.id.post_comments);
viewHolder.likeImage = (ImageView) view.findViewById(R.id.like_image);
viewHolder.likeText = (TextView) view.findViewById(R.id.like_text);
viewHolder.shareBtn = view.findViewById(R.id.share_btn);
viewHolder.commentBtn = view.findViewById(R.id.comment_btn);
viewHolder.likeBtn = view.findViewById(R.id.like_btn);

view.setTag(viewHolder);
} else {
view = convertView;
}
final ViewHolder holder = (ViewHolder) view.getTag();

final boolean hasLiked = model.get(position).isHasLiked();

if(hasLiked) {
holder.likeImage.setImageResource(R.drawable.ic_action_like_clicked);
holder.likeText.setText(context.getString(R.string.dislike));
holder.likeText.setTextColor(context.getResources().getColor(R.color.color_clicked));
} else {
ColorStateList textColor = holder.title.getTextColors();
holder.likeImage.setImageResource(R.drawable.ic_action_like);
holder.likeText.setText(context.getString(R.string.like));
holder.likeText.setTextColor(textColor);
}

holder.title.setText(model.get(position).getTitle());

ImageLoader loader = ImageLoader.getInstance();
DisplayImageOptions options = new DisplayImageOptions.Builder()
.showImageForEmptyUri(R.drawable.avatar)
.showImageOnFail(R.drawable.avatar).build();

loader.displayImage(model.get(position).getAvatar(), holder.avatar, options);

String time = MainActivity.getTimeAgo(new Date(model.get(position).getTime() * 1000), context);
holder.time.setText(time);

if(model.get(position).getText().isEmpty()) {
holder.text.setVisibility(View.GONE);
} else {
holder.text.setVisibility(View.VISIBLE);
holder.text.setText(model.get(position).getText());
}

// HERE
String url = MainActivity.IMAGE_URL + "postid=" + model.get(position).getId();
loader.loadImage(url, new SimpleImageLoadingListener() {
@Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
holder.image.setVisibility(View.VISIBLE);
holder.image.setImageBitmap(loadedImage);
}

@Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
holder.image.setVisibility(View.GONE);
holder.image.setImageBitmap(null);
}

@Override
public void onLoadingCancelled(String imageUri, View view) {
holder.image.setVisibility(View.GONE);
holder.image.setImageBitmap(null);
}
});

holder.likes.setText(String.valueOf(model.get(position).getLikes()));
String comments = model.get(position).getComments() + " " + context.getString(R.string.comments);
holder.comments.setText(comments);
return view;
}

Answer

I am using this code after trying Universal ImageLoader, Picasso and Glide library, And it is fastest for me using RecyclerView.

Uri uri = Uri.fromFile(new File(path));

Picasso.with(mContext)
.load(URL_OF_IMAGE)
.error(R.drawable.blank)
.config(Bitmap.Config.RGB_565)
.resizeDimen(R.dimen.d50dp, R.dimen.d50dp)
.centerCrop()
.into(holder.imageview);

Check this owesome link that shows difference with respect to load time and memory in detail, https://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en