How to download image from url in background and load it in onPostExecute in ImageView

Issue

I'm programming an app like Tinder. In my activity I initialize an arraylist which contains all possible matches. And then in my adapter I used to load the profile image from the user in the ImageView with glide.with(context).load(url).into(ImageView), this also works perfectly however my onClickListener in my adapter does not work. Apparently the problem is that the main thread is "frozen" because he has too much work to do with loading the images in the image view. Because of that, I implemented an AsyncTask where I download the image in the background and in onPostExecute I load it in the ImageView. This also works, however when I swiped 4/5 users, suddenly an image from another user is displayed for the wrong user and if I wait some seconds, the ImageView is somehow "updated" and the correct ImageView appears.

I have no idea why I have this behaviour and I thought that Maybe loading images with bitmap is too slow and if I could download the image from the web in the background and load it with glide in onPostExecute it would work? If anyone has an idea I would really appreciate it!

    private List<cards> listItems;
    private Context context;


    public arrayAdapter(List<cards> listItems ,Context context){
        this.listItems = listItems;
        this.context = context;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
        return new ViewHolder(v);
    }

    @SuppressLint("SetTextI18n")
    @Override
    public void onBindViewHolder(@NonNull final ViewHolder viewHolder, int i) {
        final cards currentItem = listItems.get(i);

        viewHolder.name.setText(currentItem.getName());
        viewHolder.comment.setText(currentItem.getComment());

        Picasso.get().load(currentItem.getProfileImageUrl()).into(viewHolder.image);

        viewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(!currentItem.getProfileImageUrl2().equals("default")){
                    Picasso.get().load(currentItem.getProfileImageUrl2()).into(viewHolder.image);
                }
            }
        });

    }

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

    public class ViewHolder extends RecyclerView.ViewHolder{

        TextView name, comment;
        public ImageView image;
        private CardView card;
        private String imageUrl;


        ViewHolder(@NonNull View itemView) {
            super(itemView);
            name = (TextView) itemView.findViewById(R.id.name);
            image = (ImageView) itemView.findViewById(R.id.image);
            comment = (TextView) itemView.findViewById(R.id.commentText);
            card = (CardView) itemView.findViewById(R.id.card);
            }
    }



}

Solution

Instead of dealing with AsyncTasks you can just use Picasso library, give the image url and the imageView you want and it will do the magic.

Picasso.get().load("https://i.stack.imgur.com/jEIKP.jpg").into(imageView);

For details check here:

https://square.github.io/picasso/

Answered By - Batuhan Coşkun