RecyclerView only loads the image on scrolling

Question

Heres my activity:

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List<GalleryItem> mGalleryItems;
    GalleryAdapter adapter;
    private boolean loading = true;
    int pastVisiblesItems, visibleItemCount, totalItemCount;
    LinearLayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.grid_view);
        mGalleryItems = new ArrayList<>();
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);
        getItems("http://www.reddit.com/r/aww.json");
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (dy > 0) {
                    visibleItemCount = mLayoutManager.getChildCount();
                    totalItemCount = mLayoutManager.getItemCount();
                    pastVisiblesItems = mLayoutManager.findFirstVisibleItemPosition();
                    if (loading) {
                        if ((visibleItemCount + pastVisiblesItems) >= totalItemCount) {
                            loading = false;
                            Log.v("...", "Last Item Wow !");
                            getItems("https://www.reddit.com/r/aww.json?after=t3_40x6ke");
                        }
                    }
                }
            }
        });

        adapter = new GalleryAdapter(mGalleryItems, this);
        mRecyclerView.setAdapter(adapter);

    }


    @Override
    public void onDestroy(){
        super.onDestroy();

    }
    public void getItems(String url){
        OkHttpClient client = new OkHttpClient();
        File cacheDirectory = new File(MainActivity.this.getCacheDir(), "http");
        int cacheSize = 10 * 1024 * 1024;
        Cache cache = new Cache(cacheDirectory, cacheSize);
        client.setCache(cache);
        Request request = new Request.Builder()
                .url(url)
                .build();
        Call call = client.newCall(request);
        call.enqueue(new Callback() {
            @Override
            public void onFailure(Request request, IOException e) {

            }

            @Override
            public void onResponse(Response response) throws IOException {
                final String json = response.body().string();
                if (response.isSuccessful()) {
                        try {
                            mGalleryItems.addAll(parseItems(json));
                        } catch (JSONException e) {
                            e.printStackTrace();
                            Log.i("BEHS", e.getMessage());
                        }
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                adapter.notifyDataSetChanged();

                            }
                        });
                }
            }
        });

    }

    private List<GalleryItem> parseItems(String json) throws JSONException {
        JSONObject jsonMovie = new JSONObject(json);
        JSONObject firstData = jsonMovie.getJSONObject("data");
        JSONArray children = firstData.getJSONArray("children");

        List<GalleryItem> items = new ArrayList();

        for(int i = 0; i < children.length(); i++ ){
            JSONObject jsonObject = children.getJSONObject(i);
            JSONObject childrenObject = jsonObject.getJSONObject("data");
            GalleryItem item = new GalleryItem();
            item.setTitle(childrenObject.getString("title"));
            item.setUrl(childrenObject.getString("url"));
            item.setThumbnail(childrenObject.getString("thumbnail"));
            //if(!childrenObject.getString("url").endsWith(".jpg")){
         //       continue;
       //     }else{
                items.add(item);
     //       }
        }


        return items;
    }



    private class GalleryHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
        private ImageView mImageView;
        private TextView mTextView;
        private String mUrl;

        public GalleryHolder(View itemView) {
            super(itemView);
            itemView.setOnClickListener(this);
            mImageView = (ImageView) itemView.findViewById(R.id.country_photo);
            mTextView = (TextView) itemView.findViewById(R.id.country_name);
        }


        public void bindImage(GalleryItem item ){
            Picasso.with(MainActivity.this).load(item.getThumbnail()).tag(MainActivity.this).into(new Target() {
                @Override
                public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                    Palette pallete = Palette.from(bitmap).generate();
                    int color = pallete.getMutedColor(MainActivity.this.getResources().getColor(android.R.color.black));
                    mTextView.setBackgroundColor(color);
                    mImageView.setImageBitmap(bitmap);
                }

                @Override
                public void onBitmapFailed(Drawable errorDrawable) {

                }

                @Override
                public void onPrepareLoad(Drawable placeHolderDrawable) {

                }
            });
        }

        public void bindUrl(String url){
            mUrl = url;
        }

        @Override
        public void onClick(View view) {
            Intent i = new Intent(MainActivity.this, ItemActivity.class);
            i.putExtra("url", mUrl);
            Log.i(mUrl, mUrl);
            startActivity(i);

        }
    }

    private class GalleryAdapter extends RecyclerView.Adapter<GalleryHolder>{
        private List<GalleryItem> mImages;
        private Context mContext;

        public GalleryAdapter(List<GalleryItem> images, Context context){
            mContext = context;
            mImages = images;
        }

        @Override
        public GalleryHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
            View view = inflater.inflate(R.layout.list_item, parent, false);
            return new GalleryHolder(view);

        }

        @Override
        public void onBindViewHolder(GalleryHolder holder, int position) {
            holder.mTextView.setText(mImages.get(position).getTitle());
            holder.mImageView.setImageBitmap(null);
            holder.bindImage(mImages.get(position));
            holder.bindUrl(mImages.get(position).getUrl());

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

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

I just have one recyclerview that loads images and text from a REST json based api, the list has only a CardView and one TextView, the text loads fine but the image only show when i scroll the Card out of screen, that also ONLY happens to the first 2 positions of the list, heres a video to explain better:

I dont know how to embbed videos here

As you can see the first 2 images only loads when i scroll them out of the screen

Answer 1

Your problem is with Target (Picasso only keeps a weak reference to the Target object)

What you can do:

• Make a strong reference to the Target object (keep it as a field of ViewHolder, for example):

   private class GalleryHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
          private ImageView mImageView;
          private TextView mTextView;
          ....
          com.squareup.picasso.Target target = new com.squareup.picasso.Target() {
              @Override
              public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                  mTextView.setBackgroundColor(Color.RED);
                  mImageView.setImageBitmap(bitmap);
              }
  
              @Override
              public void onBitmapFailed(Drawable errorDrawable) {}
  
              @Override
              public void onPrepareLoad(Drawable placeHolderDrawable) {}
          };
          ....
          public void bindImage(GalleryItem item ){
              Picasso.with(MainActivity.this).load(item.getThumbnail()).tag(MainActivity.this).into(target);
          }
      }
  

• avoid using Target and use .into(mImageView) instead

Also, check this post: https://stackoverflow.com/a/26918731/1658267 (here you can find explanation, why this is happening)