ListView images changing During Scroll

Question

im try to make listview with dynamic images, using asyntask its download image and set into listview. my problem is while scroll down images get randomly changed..

class ps1 extends ArrayAdapter<String> {
    Context context;
    String[] images1;
    List mList;
    String[] namearray;
    String[] rating;

    static class ViewHolder {
        ImageView localImageView1;
        ImageView localImageView2;
        ImageView localImageView3;
    }

    ps1(Context paramContext, String[] paramArrayOfString1, String[] paramArrayOfString2, String[] paramArrayOfString3) {
        super(paramContext, R.layout.list2, R.id.imageView1, paramArrayOfString1);
        this.context = paramContext;
        this.images1 = paramArrayOfString3;
        this.namearray = paramArrayOfString1;
        this.rating = paramArrayOfString2;
    }

    public View getView(int paramInt, View paramView, ViewGroup paramViewGroup) {
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(context.LAYOUT_INFLATER_SERVICE);

    ViewHolder viewHolder = new ViewHolder();
    if (paramView == null) {
        paramView = inflater.inflate(R.layout.list2, paramViewGroup, false);

    }


    viewHolder.localImageView1 = (ImageView) paramView
            .findViewById(R.id.imageView1);
    viewHolder.localImageView2 = (ImageView) paramView
            .findViewById(R.id.imageView2);
    viewHolder.localImageView3 = (ImageView) paramView
            .findViewById(R.id.imageView3);


    viewHolder.localImageView1.setScaleType(ImageView.ScaleType.FIT_XY);
    viewHolder.localImageView2.setScaleType(ImageView.ScaleType.FIT_XY);
    viewHolder.localImageView3.setScaleType(ImageView.ScaleType.FIT_XY);

    viewHolder.localImageView1.setTag(this.namearray[paramInt]);
    new LoadImage().execute(viewHolder.localImageView1);
    viewHolder.localImageView2.setTag(this.rating[paramInt]);
    new LoadImage().execute(viewHolder.localImageView2);
    viewHolder.localImageView3.setTag(this.images1[paramInt]);
    new LoadImage().execute(viewHolder.localImageView3);


    return paramView;
    }
    }

    class LoadImage extends AsyncTask<Object, Void, Bitmap> {
    private ImageView imv;

    private Bitmap download_Image(String paramString) {
    Bitmap localBitmap = null;
    try {
        Object localObject = null;
        localBitmap = BitmapFactory
                .decodeStream(((HttpURLConnection) new URL(paramString)
                        .openConnection()).getInputStream());
        localObject = localBitmap;
        if (localObject != null) {
            return localBitmap;
        }
    } catch (Exception e) {

    }
    return localBitmap;
    }

    protected Bitmap doInBackground(Object... paramVarArgs) {
    this.imv = ((ImageView) paramVarArgs[0]);
    Log.d("fsdf", (String) this.imv.getTag());
    return download_Image((String) this.imv.getTag());
    }

    protected void onPostExecute(Bitmap paramBitmap) {
    this.imv.setImageBitmap(paramBitmap);
    }
}

Answer 1

I have also experienced the same . I am also searching for a right solution . As far as i have searched , i came to know that ListView clears the previous view while scrolling down and re-loads it when you scroll back . So while scrolling up and down, your images may get re-cycled and mis-aligned . ( I am also waiting for the correct solution ) .

But i have tackled it using SmartImageView , which is a library that directly downloads the image and sets it to the ImageView . It will maintain the images in cache and so you could get the right images .

Comparatively this was faster too .

Answer 2

Try this snippet code which i have used in application and it's working fine in my application and i am sure it will work at your end. In my condition i am retrieving images and some data from server and maintain all images on list scrolling fine.

class OfferCustomListAdapter extends ArrayAdapter<String>
    {    
       private Context context;
       Boolean OddNumber;
       ArrayList<String>  getDealID = new ArrayList<String>();
       ArrayList<String>  getInAdpterUNamedlist = new ArrayList<String>();
       ArrayList<String>  getShopNData = new ArrayList<String>();
       ArrayList<String>  getUserFav = new ArrayList<String>();
       ArrayList<String>  getTotalAmt = new ArrayList<String>();
       ArrayList<String>  getDealImage = new ArrayList<String>();
       ArrayList<Boolean> getBoolnState = new ArrayList<Boolean>();
       //String Oflist[] ;
       int favCount=0;
      public OfferCustomListAdapter(Context context,ArrayList<String> dealIdlist, ArrayList<Boolean> AddBoolnList, ArrayList<String> dealNamelist,ArrayList<String> ShopNList,ArrayList<String> UserFave,ArrayList<String> TotalAmt,ArrayList<String> ImageList) {
        super(context, android.R.layout.simple_list_item_1,dealNamelist);
        this.context=context;
        //Oflist = getFolwerUNamelis;
        getDealID = dealIdlist;
        getInAdpterUNamedlist = dealNamelist;
        getShopNData = ShopNList;
        getUserFav = UserFave;
        getTotalAmt = TotalAmt;
        getDealImage = ImageList;
        getBoolnState = AddBoolnList;


    }

    @Override
    public View getView(final int pos, View view, ViewGroup parent) {

        final ViewHolder holder;
        if (view == null) {
            LayoutInflater inflater = LayoutInflater.from(this.context);
            //view = inflater.inflate(R.layout.offer_custom_list, parent,false);
            view = inflater.inflate(R.layout.reservatin_row, parent,false);
            holder = new ViewHolder();
            //holder.FollowrName = (TextView) view.findViewById(R.id.OfferNameTxt);
            holder.DealName = (TextView) view.findViewById(R.id.tv_name);
            holder.ShopName = (TextView) view.findViewById(R.id.tv_address);
            holder.FavBtn = (ImageView) view.findViewById(R.id.Ofr_FavBtn);
            holder.listLayout = (LinearLayout) view.findViewById(R.id.OfferListLayout);
            holder.profile_image = (ImageView)view.findViewById(R.id.profile_img);
            holder.OfferAmtBtn =(Button)view.findViewById(R.id.TotalOfrBtn);
            //holder.FavBtn = (ImageView) view.findViewById(R.id.offerFavBtn);
            holder.FavBtn.setTag(pos);
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }

         if ( pos % 2 == 0 ){
             System.out.println("You entered an even number.  "+pos % 2);
             holder.listLayout.setBackgroundResource(R.drawable.offer_list_bg);
         }else{
             System.out.println("You entered an odd number.");
             holder.listLayout.setBackgroundResource(R.drawable.special_offer_bg);
         }
          /*if(getUserFav.get(pos).equals("0")){
            //BolArraylist.add(false);
            holder.FavBtn.setBackgroundResource(R.drawable.fav_btn);
          }else{
            //BolArraylist.add(true);
            holder.FavBtn.setBackgroundResource(R.drawable.fav_active_btn);
          }*/
            holder.DealName.setText(getInAdpterUNamedlist.get(pos));
            holder.ShopName.setText(getShopNData.get(pos));
            holder.OfferAmtBtn.setText("$"+getTotalAmt.get(pos));
            imgLoader.DisplayImage(getDealImage.get(pos), holder.profile_image);

         holder.FavBtn.setOnClickListener(new View.OnClickListener() {

                @Override       
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    if (isNetworkAvailable()) {

                    if(!userid.equals("")){
                        Offer_ID = getDealID.get(pos);
                        GUsrFavState = getUserFav.get(pos);
                        if(GUsrFavState.equals("0")){
                            GUsrFavState="1";
                            getUserFav.remove(pos);
                            getUserFav.add(pos, "1");
                            holder.FavBtn.setBackgroundResource(R.drawable.fav_active_btn);
                            getBoolnState.set(pos, true);
                            new Call_OfferFavWS().execute();
                        }else{
                            GUsrFavState="0";
                            holder.FavBtn.setBackgroundResource(R.drawable.fav_btn);
                            getUserFav.remove(pos);
                            getUserFav.add(pos, "0");
                            getBoolnState.set(pos, false);
                            new Call_OfferFavWS().execute();
                        }  
                     }else{
                         Intent CallSignIn = new Intent(DollarMainActivity.this,SingInActivity.class);
                         startActivity(CallSignIn);
                       }
                    } else {
                        Toast alrtMsg = Toast.makeText(DollarMainActivity.this, "No network connection available !!!", Toast.LENGTH_LONG);
                        alrtMsg.setGravity(Gravity.CENTER, 0, 0);
                        alrtMsg.show();
                    }

                }
            });

          if(getBoolnState.get(pos)){
                holder.FavBtn.setBackgroundResource(R.drawable.fav_active_btn);
            }else{
                holder.FavBtn.setBackgroundResource(R.drawable.fav_btn);  
            }
            return view;
      }

      class ViewHolder {
             public TextView DealName,ShopName;
            public ImageView FavBtn, profile_image;
            public LinearLayout listLayout;
            public Button OfferAmtBtn;
      }
  }

Hope it will help you.

if you need any help pls let me know.