Agfdhyk

I am loading images from the server in a recyclerView and in parallel I am downloading that image too. what I actually want to do is that until image downloads till then show a blur or dark opaque preview of the image with progress bar on that.to load the image I am using glide and to download I am using Okhttp

To load the image into view:-

Glide.with(cont).load(modal.get(position).getMassege()).apply(requestOptions).listener(new RequestListener<Drawable>() {

                    @Override

                    public boolean onLoadFailed(@Nullable GlideException e, Object model, com.bumptech.glide.request.target.Target<Drawable> target, boolean isFirstResource) {

                        return false;

                    }



                    @Override

                    public boolean onResourceReady(Drawable resource, Object model, com.bumptech.glide.request.target.Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {



                        if(modal.get(position).getProgressPercentage()==0) {

                            new Thread(new Runnable() {

                                @Override

                                public void run() {



                                    downloadFile(modal.get(position).getMassege(), position, modal.get(position).getMsgid(),modal.get(position).getTimeSent());





                                }

                            }).start();

                        }

                        return false;

                    }

                }).into(holder.image);

To download image

    public void downloadFile(String src, int position, String messageId,String timeStamp) {

    try {

        java.net.URL url = new java.net.URL(src);

        HttpURLConnection connection = (HttpURLConnection) url

                .openConnection();

        connection.setDoInput(true);

        connection.connect();

        int lenghtOfFile = connection.getContentLength();

        InputStream input = connection.getInputStream();

        String fileNam = src.split("/");

        OutputStream output = new FileOutputStream(cont.getFilesDir() + fileNam[fileNam.length - 1]);

        byte data = new byte[1024];



        long total = 0;

        int count = 0;

        int progressPercentage = 0;

        Intent intent = new Intent();

        intent.setAction(Constants.INTENT_FILTER);

        intent.putExtra(Constants.MESSAGE_POSITION_IN_CHAT_LIST, position);

        intent.putExtra(Constants.DOWNLOADING_FILE, true);



        while ((count = input.read(data)) != -1) {

            total += count;

            // publishing the progress....

            // After this onProgressUpdate will be called

            progressPercentage = (int) ((total * 100) / lenghtOfFile);

            if(progressPercentage==30||progressPercentage==60||progressPercentage==100) {

                intent.putExtra(Constants.PROGRESS, progressPercentage);

                intent.putExtra(Constants.FILE_PATH, cont.getFilesDir() + fileNam[fileNam.length - 1]);

                intent.putExtra(Constants.MESSAGE_ID, messageId);

                cont.sendBroadcast(intent);

            }



            // writing data to file

            output.write(data, 0, count);

            Log.d("Downloding" + progressPercentage, "Count" + count);

            if (progressPercentage > 99) {

                DatabaseHelperChattingToUsers databaseHelperChattingToUsers = new DatabaseHelperChattingToUsers(cont);

                String userId = databaseHelperChattingToUsers.getUserExists(sendTo);

                String splits = userId.split("/");

                databaseHelperChattingToUsers.updateContact(new ChattingToUsers(splits[0], sendTo, timeStamp, cont.getFilesDir() + fileNam[fileNam.length - 1],"0"));



                DatabaseHelper1 db = new DatabaseHelper1(cont);

                db.updateContact(messageId, "", "", "", 100);

                String filePath = intent.getStringExtra(Constants.FILE_PATH);

                db.updateChatMessage(messageId, filePath);

            }

        }



    } catch (IOException e) {

        e.printStackTrace();



    }

}

Where i have reached:

i am able to download the image in parallel while loading image in recyclerView along with progress bar showing image download with blur preview of image.

Problem i am facing:

Image takes small time while loading in recyclerView for the blur preview of image but item view is added in the recyclerView and image loads in that after sometime

Glide would download image for you, why are you taking extra efforts by downloading it via okHttp ?

There will be always delay in downloading a complete image. It depends on your network speed and image size.

To reduce a delay you can have different sizes of images stored on server. On client side download small size image first and display it in recyclerview. ( Smaller image size == less time to download.)

Upon clicking row in recyclerview download the complete image by hitting another urls.

e.g.

https://www.example.com/images/small/image1.png ( 250x250 px = 100kb )

https://www.example.com/images/medium/image1.png ( 1000x1000 px = 400kb )

https://www.example.com/images/large/image1.png (3000x3000 ox = 1200kb)