Flip Animation in Android Listview item

Question

I'm trying to show front and back face of each of my listview item with Flip animation. Animation works well, but the result of anim is being applied to other items also. And furthermore, the position of my items change when I scroll up and down. My code is as below:

public View getView(final int position, final View convertView, ViewGroup parent) {
    ArtItemHolder holder;
    View view = convertView;

    if (view == null) {
        LayoutInflater inflater = ((Activity) this.context).getLayoutInflater();
        holder = new ArtItemHolder();
        view = inflater.inflate(R.layout.feed_list_item, parent, false);

        holder.image = (ImageView) view.findViewById(R.id.img_Image);
        holder.pubDate = (TextView) view.findViewById(R.id.txt_puslishDate);
        holder.arTitle = (TextView) view.findViewById(R.id.txt_arTitle);
        holder.commentCount = (TextView) view.findViewById(R.id.txt_commentCount);
        holder.rotator  = (ImageView) view.findViewById(R.id.card_roretor);
        holder.cardFace = view.findViewById(R.id.card_face);// first of 2 child parent layout of feed_list_item.xml
        holder.cardBack = view.findViewById(R.id.card_back);// second of 2 child parent layout of feed_list_item.xml
        view.setTag(holder);
    } else {
        holder = (AdvItemHolder) view.getTag();
    }

    holder.rotator.setOnClickListener(new MyFlipperListener(view, holder.cardFace, holder.cardBack));

    return view;
}


private class MyFlipperListener implements OnClickListener{
    View parent, frontFace, backFace;

    public MyFlipperListener(View parent, View frontFace, View backFace) {
        this.parent = parent;
        this.frontFace = frontFace;
        this.backFace = backFace;
    }

    public void onClick(View v) {
        FlipAnimation flipAnimation = new FlipAnimation(frontFace, backFace);
        if (frontFace.getVisibility() == View.GONE)
        {
            flipAnimation.reverse();
        }

        parent.startAnimation(flipAnimation);
    }

}

private static class ArtItemHolder{
    ImageView image;
    TextView pubDate;
    TextView arTitle;
    TextView commentCount;
    ImageView rotator;
    View cardFace, cardBack;
}

My layout xml for items in listview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center">

    <LinearLayout
        android:id="@+id/card_face"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:background="@drawable/feed_item_selector"
        android:layout_margin="8dip"
        android:padding="2dip">

     ########## MAIN CONTENT HERE ###########

    </LinearLayout>
    <LinearLayout
        android:id="@+id/card_back"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:background="@drawable/feed_item_selector"
        android:layout_margin="8dip"
        android:padding="2dip"
        android:visibility="gone">

     ########## SOME INFO ABOUT MAIN CONTENT HERE ###########

    </LinearLayout>
</LinearLayout>

UPDATE

FlipAnimation flipAnimation = new FlipAnimation(holder.cardFace, holder.cardBack);
holder.rotator.setOnClickListener(new MyFlipperListener(view, holder.cardFace, flipAnimation));

private class MyFlipperListener implements OnClickListener{
        View parent, frontFace;
        FlipAnimation flipAnimation;
        public MyFlipperListener(View parent, View frontFace, FlipAnimation flip) {
            this.parent = parent;
            this.frontFace = frontFace;
            this.flipAnimation = flip;
        }

        public void onClick(View v) {
            if (frontFace.getVisibility() == View.GONE){
                flipAnimation.reverse();
            }
            parent.startAnimation(flipAnimation);
        }
    }

Paulita

try this change your constructor to public MyFlipperListener(View parent, View frontFace,FlipAnimation flipAnimation) so you know what to do or how to go about it if that's how your constructor looks.. and instatiate your flipanimation in the if view is null clause.. meaning put flipanimation in artitemholder.. my suggestion might be great or shit.. just try it..and let me know – Passional

@Passional result is same. updated my question just to show you what i did. – Paulita

okay let me ask you a few questions before i post an answer, are you flipping the whole item view? or just the holder.rotator which is the imageview? and secondly i pressume you are catching the onclicklistener for the imageview right? – Passional

I inserted my layout xml. please take a look. – Paulita

@Paulita : Hi , did you find any solution?, i am trying the same and having the same problem, but couldn't find any solution. please help. – Sher

@Paulita I'm facing same problem. Let me know you got the correct answer. – Analiese

Answer 1

Your problems are these lines:

FlipAnimation flipAnimation = new 
FlipAnimation(holder.cardFace, holder.cardBack);
holder.rotator.setOnClickListener(new MyFlipperListener(view, holder.cardFace, flipAnimation ));

Your animation is also applied to other items because the adapter reuses views! You could also get problems by setting the onClickListener in the getView. Better approach is to set it outside for example with yourListView.setOnItemClickListener. Hope it helps :)

Holifield

How can I hande button click in each item on myListView.setOnItemClickListener? – Paulita

Answer 2

ayt check my solution...

public View getView(final int position, final View convertView, ViewGroup parent) {
ArtItemHolder holder;
View view = convertView;

if (view == null) {
    LayoutInflater inflater = ((Activity)context).getLayoutInflater();
    holder = new ArtItemHolder();
    view = inflater.inflate(R.layout.feed_list_item, parent, false);

    holder.image = (ImageView) view.findViewById(R.id.img_Image);
    holder.pubDate = (TextView) view.findViewById(R.id.txt_puslishDate);
    holder.arTitle = (TextView) view.findViewById(R.id.txt_arTitle);
    holder.commentCount = (TextView) view.findViewById(R.id.txt_commentCount);
    holder.rotator  = (ImageView) view.findViewById(R.id.card_roretor);
    holder.rotator.setTag(false); // put a boolean here..
    holder.cardFace = view.findViewById(R.id.card_face);// first of 2 child parent layout of feed_list_item.xml
    holder.cardBack = view.findViewById(R.id.card_back);// second of 2 child parent layout of feed_list_item.xml
    holder.flipAnimation = new FlipAnimation(holder.cardFace, holder.cardBack);
    view.setTag(holder);
} else {
    holder = (AdvItemHolder) view.getTag();
}

holder.rotator.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
     // TODO Auto-generated method stub
     if (!((Boolean) v.getTag()).booleanValue()){
     v.setTag(true); // switch boolean
     // you can either call notifydatasetchanged to show changes by the change function or put the change function here
     }else{v.setTag(false); // switch boolean again if it has already been clicked}
      }
 }));
 // i am putting the changes here-(change function) so intend i call notifydatasetchanged in the onclick
 // but it depends on your preference
 // check the boolean instead of view being visible..
        if (((Boolean) view.findViewById(R.id.card_roretor).getTag()).booleanValue()){ 
            flipAnimation.reverse();
            view.findViewById(R.id.card_roretor).startAnimation(holder.flipAnimation);
        }
 // end of the change function
return view;
}

...............................

private static class ArtItemHolder{
 ImageView image;
 TextView pubDate;
 TextView arTitle;
 TextView commentCount;
 ImageView rotator;
 View cardFace, cardBack;
 FlipAnimation flipAnimation;
}

Passional

I have just seen your answer. It does not help. And I could not find the reason why you apply the animation to the rotator imageview itself. what you did juts gives the result as the rotator imageview in listview item start animation and cardback is show while cardFace is hidden without animation – Paulita

it does not help in what sense? the same error like the first? well i asked if you were trying to flip the whole item view or just the imageview? but u didnt give a valid answer..if i can not help you hopefully someone might, but i just editted the code to fix the last part of the issue @Paulita – Passional

i meant it did not work. Ok lets forget about flip animation. Because my problem is about the click event in child element in item affects other items. Forexample I just tried to change background color of item whose child imageview(rotator) is clicked, and I saw some of other itesm background is changed also – Paulita

i have editted the answer copy and paste it, it should work..lol.. correct the formatting or code names.. – Passional

When looking to your answer, it really looks good approach. However it is not working really. The animation is still being applied to other items which is completely not related the one I clicked. jus a question; why do you apply animation to the view.findViewById(R.id.card_roretor)? – Paulita