How to load images fast like instagram

Admin 1
Viewed 312

I'm trying to load images from firebase into a recycler view but the problem is it is slow, I'm wondering how can I achieve the speed that Instagram load the images please can anyone help me with that

here is my code of how I load images from firebase into recycler view

Java Files

public class Search_Fragment extends Fragment {
    public List<Upload> mUploads;
    PostAdapter postsAdapter;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        RecyclerView postRecyclerView = view.findViewById(R.id.postRecyclerView);
        DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference("uploads");
        postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );
        mUploads = new ArrayList<>();
        postsAdapter = new PostAdapter(getContext(), mUploads);
        postRecyclerView.setAdapter(postsAdapter);

        //This are images that i tried manual ly and it worked fine
//        List<PostItem> postItems = new ArrayList<>();
//        postItems.add(new PostItem(R.drawable.image1));
//        postItems.add(new PostItem(R.drawable.image2));
//        postItems.add(new PostItem(R.drawable.image3));
//        postItems.add(new PostItem(R.drawable.image4));
//        postItems.add(new PostItem(R.drawable.image5));
//        postItems.add(new PostItem(R.drawable.image7));
        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {

                    for (DataSnapshot dataSnapshot : snapshot.getChildren()) {
                        Upload upload = dataSnapshot.getValue(Upload.class);
                        mUploads.add(upload);

                }
                //notify the adapter
                postsAdapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {
            }
        });
        return view;
    }
}

**PostAdapter.java -:**apapter class

public class PostAdapter extends RecyclerView.Adapter<PostAdapter.PostViewHolder> {
    public static List<Upload> mUploads;
    Context mcontext;


    public PostAdapter(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


    @NonNull
    @Override
    public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container, parent, false);
        return new PostViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Upload uploadCurrent = mUploads.get(position);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                .preload();
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                .into(holder.imageView);


    }

    @Override
    public int getItemCount() {
        return mUploads.size();
    }

    public static class PostViewHolder extends RecyclerView.ViewHolder {
        ShapeableImageView imageView;

        PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imagePost);
        }

    }
}

Upload.java -: model class where I store image URLs

public class Upload {
    private String mImageUrl;


    public Upload() {

    }

    public Upload(String imageUrl) {
        mImageUrl = imageUrl;
    }

    public String getmImageUrl() {
        return mImageUrl;
    }

    public void setmImageUrl(String mImageUrl) {
        this.mImageUrl = mImageUrl;
    }
}
firebase-realtime-database firebase android-recyclerview android java
2 Answers

Images take time to load because of their sizes. There are 2 options to load images fast.

  1. Resize the image.
  2. Create a thumbnail image.

for Resizing, you can use Glide override method:

GlideApp  
    .with(context)
    .load(url)
    .placeholder(new ColorDrawable(Color.GREY))
    .override(400, 400) // resizes the image to these dimensions (in pixel). resize does not respect aspect ratio
    .into(imageViewResize);

for thumbnail, you have to create images with smaller size and then use it in your app.

user_87611200

simple answer, to load data faster to RV use pagination concept. a wrong mistake is to load all images(data) at once to RV. Example loading 15 data chunks at a time makes it faster loading. another concept use some loading indicators (eg. shimmer effect layout, spinners, loading text etc) to let user know that data is loading so he keeps waiting for it.

Pagination is so important when loading data from the internet

user_160177400
Related