Glide image only shows after I have scrolled down GridView?

Question

I have been messing with tmdb and movies and I have run into an issue where when my fragment loads and populates my gridview adapter the loading of images takes place without any error, but physically I can't see it until I scroll the GridView down a few lines and the back-up again.

The image shows what it's like before scrolling. Then after scrolling all the other images appear.???

Here is my adapter code for my GridView.

package com.rwsw.livesofa.tv.gridviews;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.Nullable;

import com.bumptech.glide.Glide;
import com.bumptech.glide.Priority;
import com.bumptech.glide.load.DataSource;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.bumptech.glide.load.engine.GlideException;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.target.Target;
import com.rwsw.livesofa.R;
import com.rwsw.livesofa.models.MovieModel;
import com.rwsw.livesofa.tv.fragments.FragmentRecommended;

import java.util.ArrayList;
import java.util.HashMap;

public class Grid_View_Recommended extends BaseAdapter {

    Context context;
    LayoutInflater inflater;
    private static ArrayList<MovieModel> movieModelList;
    MovieModel resultp;

    public Grid_View_Recommended(Context context, ArrayList<MovieModel> arraylist) {
        this.context = context;
        movieModelList = arraylist;
    }

    public class ViewHolder {
        public ImageView poster;
    }

    @Override
    public int getCount() {
        return movieModelList.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    public View getView(final int position, View convertView, ViewGroup parent) {
        View itemView = convertView;

        Grid_View_Recommended.ViewHolder holder;

        if (convertView == null) {
            inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            itemView = inflater.inflate(R.layout.item_movie, parent, false);

            holder = new ViewHolder();
            holder.poster = (ImageView) itemView.findViewById(R.id.poster);

            itemView.setTag(holder);
        } else {
            holder = (Grid_View_Recommended.ViewHolder) itemView.getTag();
            resultp = movieModelList.get(position);


            Glide.with(context)
                    .asBitmap()
                    .load("https://image.tmdb.org/t/p/w342" + resultp.getPosterPath())
                    
                    .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .into(holder.poster);

        }

        return itemView;
    }

}

I have done many searches and tried loading as bitmap and using different cache strategy's, but cant get it to work.

Answer 1

The first time the listview loads the null condition is true. If you see the null condition does not have the Glide code in it. Hence the picture loads only when the convertView is not null.

So you can keep the Glide code in both sections. If that does not work. Here are a few things you can try

1. Load it directly with

Glide.with(this)
       .load("https://image.tmdb.org/t/p/w342" + resultp.getPosterPath())
..into(holder.poster);
   ```

If that does not solve it. Change the DiskCacheStrategy to NONE