Recyclerview image loading weird behaviour

Question

I get my data from a http request using okhttp and use that to fill a RecyclerView,the data is just one image that i load with Picasso and a some text that i put in a CardView.

• the first problem is that sometimes when i open the app the images only start do be donwloaded/appear when i scroll the rows out of my visible area and scroll back, sometimes it jumps some rows and leave the space blank until i scroll down and back again, if i dont do that i just see white spaces

• the second problem is that while scrolling it seems that the images are being replaced, when i scroll to a new item i can see an old image from a different row there for a second then it gets replaced by the right image.

I tried looking for solutions everywhere and nothing fixed it, heres the entire Activity code:

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 = 2; 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.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();
        }
    }
}

Answer 1

It seems like you are a victim of the pitfalls of asynchronous image loading.

For issue #1:

You can see that your image worker only fires when onBindViewHolder fires. This means that the actual downloading/fetching of the image happens when the view is drawn. Without more information about what's happening in your GalleryItem, I'd guess that image byte data is being cleared/garbage collected while your app is in the background - and since the binding happens during scroll, this is why you don't see any image.

Perhaps look into image caching: http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html

For issue #2:

If you don't want to see the old image, set your image view bitmap to null as the first item in onBindViewHolder.

In pseudocode:

...
@Override
public void onBindViewHolder(GalleryHolder holder, int position) {
    holder.imageView.setBitmap(null);
}
...