How to load Gridview images on scroll faster

Question

I am developing an social media app. Basically this is a photo sharing app. I am loading images in GridView and everything working fine except image loading speed. Speed is decreased because it is loading all images at same time. How can i load only few images first then it will load more on scroll?. What I want More likely is getting e.g, 10 images at first time and so on after scrolling each time and get more images untill all are loaded.

MyGridAdapter

public class MyGridAdapter extends BaseAdapter {
private Context context;
private ArrayList<ImageObject> imageObjects;

private LayoutInflater mLayoutInflate;


public MyGridAdapter(Context context, ArrayList<ImageObject> imageObjects) {
    this.context = context;
    this.imageObjects = imageObjects;

    this.mLayoutInflate = LayoutInflater.from(context);
}

public int getCount() {
    if (imageObjects != null) return imageObjects.size();
    return 0;
}

@Override
public Object getItem(int position) {
    if (imageObjects != null && imageObjects.size() > position)
        return imageObjects.get(position);

    return null;
}

@Override
public long getItemId(int position) {
    if (imageObjects != null && imageObjects.size() > position)
        return imageObjects.get(position).getId();

    return 0;
}
public String getImageId(int position){
    if (imageObjects != null && imageObjects.size() > position)
        return imageObjects.get(position).getImageid();
    return null;
}
public String getUsername(int position){
    if (imageObjects != null && imageObjects.size() > position)
        return imageObjects.get(position).getUsername();
    return null;
}
public String getCaption(int position){
    if (imageObjects != null && imageObjects.size() > position)
        return imageObjects.get(position).getCaption();
    return null;
}

public String getProfilePic(int position){
    if (imageObjects != null && imageObjects.size() > position)
        return imageObjects.get(position).getProfilepic();
    return null;
}



@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder = null;
    if (convertView == null) {

        viewHolder = new ViewHolder();

        convertView = mLayoutInflate.inflate(R.layout.imageitem, parent,
                false);
        viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image);
        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolder) convertView.getTag();
    }
    ImageObject imageObject = (ImageObject) getItem(position);
    if (imageObject != null) {
        Glide
                .with(context)
                .load(imageObject.getImageUrl())
                .priority(Priority.HIGH)
                .placeholder(R.drawable.image_load_anim)
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .listener(new RequestListener<String, GlideDrawable>() {
                    @Override
                    public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                        return false;
                    }
                })
                .crossFade()
                .centerCrop()
                .into(viewHolder.imageView);
    }

    return convertView;
}
}

Possible duplicate of [Lazy download images into gridView](https://stackoverflow.com/questions/13265457/lazy-download-images-into-gridview) — krishank Tripathi, Apr 07 '18 at 09:48

score 0 · Answer 1 · answered Apr 07 '18 at 10:16

0

Even I have suffered a lot from this problem, but here is a really Goode solution.

You can use this library which is called Glide.

This is how you have to use

Add this to your Gradel file

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.6.1'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
}

And this is how you load and set the Image to a GridView

GlideApp
    .with(myFragment)
    .load(path/url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

This is a really excellent library. Hope it helps you.

answered Apr 07 '18 at 10:16

Rahulrr2602

701
1
13
34

I am already using using it. My question is about load only 10-12 images first then load other images on scroll. – Apr 07 '18 at 10:24
@AjayGohel You can try using the newer version. I think it has a better management of all these issues. – Rahulrr2602 Apr 07 '18 at 10:28
@AjayGohel But in case you are upgrading to the newer version to keep the backup of the app's project files. – Rahulrr2602 Apr 07 '18 at 10:29

How to load Gridview images on scroll faster

1 Answers1