RecyclerView keeping elements and views even after scroll

Question

I'm trying to create a list of apps installed with RecyclerView. But not all the apps in the device but just some.

I have set the packages of those apps in a string-array, and the code checks if user has the app installed. Each app has a colorful drawable/icon to recognize it, and if users don't have the app installed, drawable/icon turns black and white.

It works, but after scrolling down and then up again, the items that were coloured and supposed to be installed, get black and white, and even after some scrolls it doesn't get the original color again.

May someone tell me how to prevent or fix this issue? Thanks in advance.

This is my adapter code:

package jahirfiquitiva.project.adapters;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.ColorFilter;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.drawable.Drawable;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import jahirfiquitiva.project.activities.AppsListActivity;

import java.util.List;

import jahirfiquitiva.project.R;
import jahirfiquitiva.project.views.SquareImageView;

public class AppsAdapter extends RecyclerView.Adapter<AppsAdapter.AppHolder> implements View.OnClickListener {

    public interface ClickListener {
        void onClick(int index);
    }

    private final Context mContext;
    private final List<AppsListActivity.App> apps;
    private final ClickListener mCallback;

    public AppsAdapter(Context context, List<AppsListActivity.App> apps, ClickListener callback) {
        this.mContext = context;
        this.apps = apps;
        this.mCallback = callback;
    }

    @Override
    public AppHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        return new AppHolder(inflater.inflate(R.layout.app_item, parent, false));
    }

    @Override
    public void onBindViewHolder(AppHolder holder, int position) {

        // Turns App name "Something Pro" to "l_something_pro"
        int iconResource = mContext.getResources().getIdentifier(
                "ic_" + apps.get(position).name.toLowerCase().replace(" ", "_"),
                "drawable",
                mContext.getPackageName()
        );

        holder.icon.setImageResource(R.drawable.placeholder);

        if (apps.get(position).isInstalled(mContext)) {
            holder.icon.setImageResource(iconResource);
        } else {
            holder.icon.setImageResource(iconResource);
            makeBlackAndWhite(holder.icon);
        }

        holder.appname.setText(apps.get(position).name);

        holder.view.setTag(position);
        holder.view.setOnClickListener(this);
    }

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

    @Override
    public void onClick(View v) {
        if (v.getTag() != null) {
            int index = (Integer) v.getTag();
            if (mCallback != null)
                mCallback.onClick(index);
        }
    }

    class AppHolder extends RecyclerView.ViewHolder {

        final View view;
        ImageView icon;
        final TextView appname;
        final CardView contentBg;
        LinearLayout textsBg;

        AppHolder(View v) {
            super(v);
            view = v;
            icon = (ImageView) v.findViewById(R.id.appicon);
            contentBg = (CardView) v.findViewById(R.id.app_item_card);
            appname = (TextView) v.findViewById(R.id.appname);
            textsBg = (LinearLayout) v.findViewById(R.id.texts_bg);
        }
    }

    private void makeBlackAndWhite(ImageView iv) {

        float[] colorMatrix = {
                0.33f, 0.33f, 0.33f, 0, 30, //red
                0.33f, 0.33f, 0.33f, 0, 30, //green
                0.33f, 0.33f, 0.33f, 0, 30, //blue
                0, 0, 0, 1, 0    //alpha
        };

        ColorFilter colorFilter = new ColorMatrixColorFilter(colorMatrix);
        iv.setColorFilter(colorFilter);

    }

}

Answer 1

You're making the icons black and white when they aren't installed, but the views got recicled, so you need to make them colored again removing the colorFilter if they are installed (do this inside your isInstalled conditional).