Animation on View in ListView

Question

I have a ListView with a list of items. Every item has a little ImageButton with a star to mark it as a favorite. When the star ImageButton is clicked, I want it to do a little rotation. Works fine in Android 4.3, but on 2.3 not only the clicked star rotates, but also the star in the item above it.

I already tried to not use a ViewHolder for the star because I thought that might cause it, but that didn't help.

By the way, I do other stuff in the onClickListener, and that works fine and only for the clicked item.

What could be my problem?

This is part of my getView method in the list's adapter:

    CheckableImageButton favBtn = (CheckableImageButton) convertView
            .findViewById(R.id.favbtn);

    favBtn.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {

            v.startAnimation(AnimationUtils.loadAnimation(ctx,
                    R.anim.spinanim));

        }
    });

This is my whole getView method:

public View getView(final int position, View convertView, ViewGroup parent) {
    ViewHolder holder;

    checkLoadMore(position);

    final Item item = combinedResult.getItems().get(position);

    if (convertView == null) {
        convertView = myInflater.inflate(R.layout.item_fewo_v7, null);

        holder = new ViewHolder();

        holder.Iv = (RecyclingImageView) convertView
                .findViewById(R.id.imageView1);
        holder.Tv1 = (TextView) convertView.findViewById(R.id.textView1);
        holder.Tv2 = (TextView) convertView.findViewById(R.id.textView2);
        holder.Tv3 = (TextView) convertView.findViewById(R.id.textView3);
        holder.Tv4 = (TextView) convertView.findViewById(R.id.textView4);
        holder.Root = (RelativeLayout) convertView.findViewById(R.id.root);
        holder.Starbg = (RelativeLayout) convertView
                .findViewById(R.id.starbg);

        convertView.setTag(holder);
    }

    else {
        holder = (ViewHolder) convertView.getTag();
    }

    CheckableImageButton favBtn = (CheckableImageButton) convertView
            .findViewById(R.id.favbtn);

    favBtn.setChecked(FavItems.contains(item.getGuid()));

    favBtn.setOnClickListener(new OnClickListener() {

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

            if (FavItems.contains(item.getGuid())) {
                FavItems.removeFav(item.getGuid());
            }

            else {
                FavItems.addFav(item);
            }

            v.startAnimation(AnimationUtils.loadAnimation(ctx,
                    R.anim.spinanim));

        }
    });

    holder.Tv1.setText(item.getTitle());
    holder.Tv2.setText(item.getLocation().getDescription());
    holder.Tv3.setText(item.getPrice().getPriceText() + " "
            + item.getPrice().getPaymentIntervalShort());
    holder.Tv4.setText("bis " + item.getPersonsMax() + " Personen");

    displayImage(Tools.convertImageUrl(item.getThumbnailUrl()), holder.Iv,
            holder.Root);


    return convertView;
}

Answer 1

Contrary to what Gopal Rao says, you should use the convertView and the ViewHolder pattern. Also, you can move the FavBtn into the ViewHolder. You do need to clear the animation when the view is reused though, which is done in the else clause. The following should work:

public View getView(final int position, View convertView, ViewGroup parent) {
    final ViewHolder holder;

    checkLoadMore(position);

    final Item item = combinedResult.getItems().get(position);

    if (convertView == null) {
        convertView = myInflater.inflate(R.layout.item_fewo_v7, null);

        holder = new ViewHolder();
        holder.Iv = (RecyclingImageView) convertView.findViewById(R.id.imageView1);
        holder.Tv1 = (TextView) convertView.findViewById(R.id.textView1);
        holder.Tv2 = (TextView) convertView.findViewById(R.id.textView2);
        holder.Tv3 = (TextView) convertView.findViewById(R.id.textView3);
        holder.Tv4 = (TextView) convertView.findViewById(R.id.textView4);
        holder.Root = (RelativeLayout) convertView.findViewById(R.id.root);
        holder.Starbg = (RelativeLayout) convertView.findViewById(R.id.starbg);
        holder.FavBtn = (CheckableImageButton) convertView.findViewById(R.id.favbtn);

        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
        holder.FavBtn.setAnimation(AnimationUtils.loadAnimation(ctx, R.anim.spinanim));
    }

    holder.FavBtn.setChecked(FavItems.contains(item.getGuid()));
    holder.FavBtn.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            if (FavItems.contains(item.getGuid())) {
                FavItems.removeFav(item.getGuid());
            } else {
                FavItems.addFav(item);
            }

            holder.FavBtn.getAnimation().startNow();
        }
    });

    holder.Tv1.setText(item.getTitle());
    holder.Tv2.setText(item.getLocation().getDescription());
    holder.Tv3.setText(item.getPrice().getPriceText() + " " + item.getPrice().getPaymentIntervalShort());
    holder.Tv4.setText("bis " + item.getPersonsMax() + " Personen");

    displayImage(Tools.convertImageUrl(item.getThumbnailUrl()), holder.Iv, holder.Root);

    return convertView;
}

Answer 2

try this...

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

        checkLoadMore(position);

        final Item item = combinedResult.getItems().get(position);

        convertView = myInflater.inflate(R.layout.item_fewo_v7, null);

        RecyclingImageView Iv = (RecyclingImageView) convertView
                .findViewById(R.id.imageView1);

        TextView Tv1 = (TextView) convertView.findViewById(R.id.textView1);
        TextView Tv2 = (TextView) convertView.findViewById(R.id.textView2);
        TextView Tv3 = (TextView) convertView.findViewById(R.id.textView3);
        TextView Tv4 = (TextView) convertView.findViewById(R.id.textView4);
        RelativeLayout Root = (RelativeLayout) convertView.findViewById(R.id.root);
        RelativeLayout Starbg = (RelativeLayout) convertView
                .findViewById(R.id.starbg);



        CheckableImageButton favBtn = (CheckableImageButton) convertView
                .findViewById(R.id.favbtn);

        favBtn.setChecked(FavItems.contains(item.getGuid()));

        favBtn.setOnClickListener(new OnClickListener() {

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

                if (FavItems.contains(item.getGuid())) {
                    FavItems.removeFav(item.getGuid());
                }

                else {
                    FavItems.addFav(item);
                }

                v.startAnimation(AnimationUtils.loadAnimation(ctx,
                        R.anim.spinanim));

            }
        });

        Tv1.setText(item.getTitle());
        Tv2.setText(item.getLocation().getDescription());
        Tv3.setText(item.getPrice().getPriceText() + " "
                + item.getPrice().getPaymentIntervalShort());
        Tv4.setText("bis " + item.getPersonsMax() + " Personen");

        displayImage(Tools.convertImageUrl(item.getThumbnailUrl()), Iv,
                Root);


        return convertView;
    }

stop null checking with convertview, because when convertview is not null, you are returning the same instance of view. so views which have same instance will have same animation