getView() position is repeating in BaseAdapter -Android

Question

In my Android Application I am showing a list of Cards. I am using BaseAdapter. All cards are visible to me on the ListView but I am getting an issue.

getView() is called with repeated positions due to the first card not showing the correct image. It is using the image from the 2nd to last card. I spent a day to fix it. I visited many stackoverflow answers, but no luck. Help me please.

 @Override
public View getView(final int position, View convertView, ViewGroup parent) {
    ViewHolder holder = null;
    LayoutInflater mInflater = (LayoutInflater)context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
    try {
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.wallet_list_item, null);
            holder = new ViewHolder();

            holder.cardIcon = (ImageView) convertView.findViewById(R.id.img_wallet_card);
            holder.cardName = (TextView) convertView.findViewById(R.id.tv_wallet_card_name);
            holder.cardPrice = (TextView) convertView.findViewById(R.id.tv_wallet_card_price);
            holder.cancel  =(ImageView)convertView.findViewById(R.id.cancel);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        WalletRowItem rowItem = (WalletRowItem) getItem(position);

        if(rowItem.getCard_name().equalsIgnoreCase("Kiss")){

           holder.cardIcon.setImageResource(R.drawable.logo);
            holder.cardName.setText("Kiss");
            holder.cardPrice.setText("");
            int bg_red=Integer.parseInt(rowItem.getBackground_red());
            int bg_green=Integer.parseInt(rowItem.getBackground_green());
            int bg_blue=Integer.parseInt(rowItem.getBackground_blue());
            holder.colorbg=Color.rgb(bg_red, bg_green, bg_blue);
            holder.cancel.setVisibility(View.VISIBLE);

            holder.cancel.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mViewClickListener.onImageClicked(position);
                }
            });
        }else{
                holder.cancel.setVisibility(View.INVISIBLE);
                Picasso.with(context).load(rowItem.getCardImage_url()).error(R.drawable.success_icon).placeholder(R.drawable.plus_icon_actionbar).into(holder.cardIcon);

            holder.cardName.setText(rowItem.getCard_name());

            if(!TextUtils.isEmpty(rowItem.getCard_price())) {
                holder.cardPrice.setText("$" + rowItem.getCard_price());
            }else{
                holder.cardPrice.setText("$" + "0.0");
            }

            int bg_red=Integer.parseInt(rowItem.getBackground_red());
            int bg_green=Integer.parseInt(rowItem.getBackground_green());
            int bg_blue=Integer.parseInt(rowItem.getBackground_blue());
            holder.colorbg=Color.rgb(bg_red, bg_green, bg_blue);
        }

        //Make a shape drawable to make list_item corner rounded .
        ShapeDrawable footerBackground = new ShapeDrawable();
        float[] radii = new float[8];
        radii[0] = 10 ;
        radii[1] = 10 ;
        radii[2] = 10 ;
        radii[3] = 10 ;
        footerBackground.setShape(new RoundRectShape(radii, null, null));
        footerBackground.getPaint().setColor(holder.colorbg);
        convertView.setBackgroundDrawable(footerBackground);

        int red=Integer.parseInt(rowItem.getTitle_red());
        int green=Integer.parseInt(rowItem.getTitle_green());
        int blue=Integer.parseInt(rowItem.getTitle_blue());
        holder.cardPrice.setTextColor(Color.rgb(red, green, blue));
        holder.cardName.setTextColor(Color.rgb(red, green, blue));

    } catch (Exception e) {
        e.getLocalizedMessage();
    }
    return convertView;
}

Answer 1

I'm not sure it will fix the issue, but I'd suggest to always use Picasso, including the case of the 'Kiss' cards, because it has its own way to handle cancellation of image download in case of view recycling (see https://square.github.io/picasso/ for more details)

That can be done by replacing

holder.cardIcon.setImageResource(R.drawable.logo);

by

Picasso.load(R.drawable.logo).into(holder.cardIcon);