Load customize bitmap image using picasso in android listview

Question

I need to create and set customize bitmap image on each row of listview. I am doing that using picasso. My code inside getView of adapter is like below,

 @Override
public View getView(final int position, View convertView, ViewGroup parent) {


    ViewHolder viewHolder = null;
    View rowView = convertView;


    if (rowView == null){

        LayoutInflater inflater = context.getLayoutInflater();
        rowView = inflater.inflate(R.layout.horizontal_listview_list_sample, parent, false);

        viewHolder = new ViewHolder();

        viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
        viewHolder.rowIconBackround = (ImageView) rowView.findViewById(R.id.rowIconBackground);


        rowView.setTag(viewHolder);

    }else {

        viewHolder = (ViewHolder) rowView.getTag();

    }


    //Start Custom Image View///////

    String photoUrl1 = arrayList.get(position).getPhotoUrl();

    if (photoUrl1.length()<8){
        photoUrl1 = "SOME_URL";
    }

    final String photoUrl = photoUrl1;

    final ImageView imgDot = viewHolder.imgDot;

//        final viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);


    final View finalRowView = rowView;
    final ViewHolder finalViewHolder = viewHolder;
    final Target target = new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap2, Picasso.LoadedFrom from) {

            Log.d("PICASO", " called: " + "onBitmapLoaded called");

            Bitmap original;


            original = new MyProfile().getResizedBitmap(bitmap2, (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63), (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63));

            BitmapDrawable bitmap = (BitmapDrawable) finalRowView.getResources().getDrawable(R.drawable.drawer_pro_pic_placeholder);
            int bitmapHeight= bitmap .getBitmap().getHeight();
            int bitmapWidth = bitmap .getBitmap().getWidth();


            Bitmap mask = BitmapFactory.decodeResource(finalRowView.getResources(), R.drawable.drawer_pro_pic_placeholder);
            Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas mCanvas = new Canvas(result);
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));


            int width = mask.getWidth();
            int height = mask.getHeight();
            float centerX = (width  - original.getWidth()) * 0.5f;
            float centerY = (height- original.getHeight()) * 0.5f;


            mCanvas.drawBitmap(original, centerX, centerY, null);
            mCanvas.drawBitmap(mask, 0, 0, paint);
            paint.setXfermode(null);

            imgDot.getLayoutParams().height = bitmapHeight;
            imgDot.getLayoutParams().width = bitmapWidth;

            imgDot.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imgDot.setImageBitmap(result);

            imgDot.setAdjustViewBounds(true);


            Picasso.with(context).cancelRequest(finalViewHolder.imgDot);
            targets.remove(this);


        }

        @Override
        public void onBitmapFailed(Drawable errorDrawable) {
            Log.d("PICASO", " called: " + "onBitmapFailed called");
            Picasso.with(context).cancelRequest(finalViewHolder.imgDot);
            targets.remove(this);

        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {
            Log.d("PICASO", "responseForRegistration called: " + "onPrepareLoad called");

        }
    };

    targets.add(target);

//        imgDot.setTag(target);
    Picasso.with(context).load(photoUrl).into(target);

//End Custom Image View////////////



    return rowView;
}

Suppose, there is two row so two customize bitmap will be created. When first one is created its showing nice but when second one created then this last image is showing in both row's imageview. What I need to change in my code?

Any help will be appreciated.

Answer 1

You could try something by creating handler as subclass of your adapter and passing specific reference of your view holder and position which will help us to avoid overriding issue of target listener

  // construct the handler inside your adapter's constructor so you know it is on the UI thread
Handler myHandler = new Handler(); 

 class LoadImage implements Runnable {
    ImageView iv;
    int position;

public LoadImage(ImageView iv, int position) {
    this.iv = iv;
    this.position = position;
}

@Override
public void run() {

   // keep your target listener stuffs here
    Target target = new Target() {
    @Override
    public void onBitmapLoaded(Bitmap bitmap2, Picasso.LoadedFrom from) {

        Log.d("PICASO", " called: " + "onBitmapLoaded called");

        Bitmap original;


        original = new MyProfile().getResizedBitmap(bitmap2, (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63), (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63));

        BitmapDrawable bitmap = (BitmapDrawable) finalRowView.getResources().getDrawable(R.drawable.drawer_pro_pic_placeholder);
        int bitmapHeight= bitmap .getBitmap().getHeight();
        int bitmapWidth = bitmap .getBitmap().getWidth();


        Bitmap mask = BitmapFactory.decodeResource(finalRowView.getResources(), R.drawable.drawer_pro_pic_placeholder);
        Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas mCanvas = new Canvas(result);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));


        int width = mask.getWidth();
        int height = mask.getHeight();
        float centerX = (width  - original.getWidth()) * 0.5f;
        float centerY = (height- original.getHeight()) * 0.5f;


        mCanvas.drawBitmap(original, centerX, centerY, null);
        mCanvas.drawBitmap(mask, 0, 0, paint);
        paint.setXfermode(null);

        iv.getLayoutParams().height = bitmapHeight;
        iv.getLayoutParams().width = bitmapWidth;

        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iv.setImageBitmap(result);

        iv.setAdjustViewBounds(true);

        Picasso.with(context).cancelRequest(iv);


    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        Log.d("PICASO", " called: " + "onBitmapFailed called");
        Picasso.with(context).cancelRequest(iv);

    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
        Log.d("PICASO", "responseForRegistration called: " + "onPrepareLoad called");

    }
};

    Picasso.with(context).load(photoList.get(position)).into(target);
}
}

And you will call it from your getView by :

@Override
public View getView(final int position, View convertView, ViewGroup parent) {


ViewHolder viewHolder = null;
View rowView = convertView;


if (rowView == null){

    LayoutInflater inflater = context.getLayoutInflater();
    rowView = inflater.inflate(R.layout.horizontal_listview_list_sample, parent, false);

    viewHolder = new ViewHolder();

    viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
    viewHolder.rowIconBackround = (ImageView) rowView.findViewById(R.id.rowIconBackground);

    rowView.setTag(viewHolder);

  //Change is here
  viewHolder.mRunnable = new LoadImage(viewHolder.imgDot, position);

}else {

    viewHolder = (ViewHolder) rowView.getTag();

   //Change is here
   myHandler.removeCallbacks(viewHolder.mRunnable);

}

//Start Custom Image View///////

String photoUrl1 = arrayList.get(position).getPhotoUrl();

if (photoUrl1.length()<8){
    photoUrl1 = "SOME_URL";
}

final String photoUrl = photoUrl1;

final ImageView imgDot = viewHolder.imgDot;

  //        final viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);

 final View finalRowView = rowView;
 final ViewHolder finalViewHolder = viewHolder;

 //Change is here
 myHandler.postDelayed(viewHolder.mRunnable, 3000);

 return rowView;
}