Animate the removal of a ListView item

Question

I'm attempting to animate the removal of a ListView item using this:

    mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, final View view, final int i, long l) {
            view.animate().setDuration(500).x(-view.getWidth()).alpha(0f);
            adapter.remove(tasks.get(i));
            adapter.notifyDataSetChanged();
        }
    });

It does not work. I basically followed the advice of the 4th answer from the top of this post:

How to Animate Addition or Removal of Android ListView Rows

However, there's some funny drawing stuff going on, or recycling, or something because while the animation occurs, the item below the one that slides off screen also gets deleted for some reason. The answer that the question asker eventually marked as correct is unfortunately an RTFM towards the whole of Android's source. I've looked through there, and I can't find the notifications pull-down in JellyBean which I'm trying to emulate.

TIA. John

Take @Alexey 's answer, which explains why *the item below the one that slides off screen also gets deleted*. You should delete the item after the animation completes, not at the moment you start the animation. — neevek, Dec 17 '12 at 12:57
Take a look at the Google [solution][1]. Here is a deletion method only. [1]: http://stackoverflow.com/questions/3928193/how-to-animate-addition-or-removal-of-android-listview-rows/25065458#25065458 — dimetil, Jul 31 '14 at 17:39

score 39 · Answer 1 · answered Nov 12 '12 at 15:05

Idea: I start animation when the user selects the row. When the animation is complete i remove the row from the adapter.The following code animates the selected row:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ListView listView = (ListView) findViewById(R.id.listView1);
    final ArrayList<String> values = new ArrayList<String>();
    values.add("Android");
    values.add("iPhone");
    values.add("WindowsMobile");
    values.add("Blackberry");
    values.add("Windows7");

    final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, android.R.id.text1, values);
    listView.setAdapter(adapter);

    final Animation animation = AnimationUtils.loadAnimation(this,
            R.anim.slide_out);
    animation.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            adapter.remove(adapter.getItem(selectedRow));
            adapter.notifyDataSetChanged();
        }
    });

    listView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            Toast.makeText(getApplicationContext(),
                    " " + values.get(position), Toast.LENGTH_LONG).show();
            view.startAnimation(animation);
            selectedRow = position;

        }

    });
}

slide_out.xml file:

<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android" >  
    <translate 
        android:fromYDelta="0%" 
        android:toYDelta="100%"  
        android:duration="@android:integer/config_mediumAnimTime"/>  
</set>

this slides a `ListView` item down on top of another `ListView` item, looked wierd. but if you change `android:fromYDelta="0%"` to `android:fromXDelta="0%"` and `android:toYDelta="100%"` to `android:toXDelta="-100%"` the `ListView` item will slide off the screen to the left — shoe, Nov 23 '16 at 04:43

Michal Vician · Accepted Answer · 2017-10-06T14:36:17.323

34

I just found a beautiful solution: https://github.com/paraches/ListViewCellDeleteAnimation

Here is video: http://www.youtube.com/watch?v=bOl5MIti7n0

Many thanks to 'paraches' ;)

Edit

As of Android version 22.0.0 the new android.support.v7.widget.RecyclerView is available as a successor of ListView. Standard add/remove/update animations are available out of the box. The widget animations are also easy to customize (few custom animations).

I strongly recommend switching from ListView to RecyclerView if you need custom item animations.

edited Oct 06 '17 at 14:36

answered Mar 31 '13 at 15:32

Michal Vician

2,486
2
28
47

1

nice example, but can I have a similar thing but with add capability? – Hamzeh Soboh Oct 16 '14 at 08:19
This [java source code](https://github.com/paraches/ListViewCellDeleteAnimation/blob/master/src/com/example/myanimtest/MainActivity.java) helped me alot. – Muhammad Saqib Jul 21 '17 at 20:11

score 4 · Answer 3 · edited Jul 02 '13 at 16:32

As Chet Haase points out in DevBytes, https://www.youtube.com/watch?v=8MIfSxgsHIs, all of this will work but don't forget to add transientState flags.

From his code:

// Here's where the problem starts - this animation will animate a View object.
                    // But that View may get recycled if it is animated out of the container,
                    // and the animation will continue to fade a view that now contains unrelated
                    // content.
                    ObjectAnimator anim = ObjectAnimator.ofFloat(view, View.ALPHA, 0);
                    anim.setDuration(1000);
                    if (setTransientStateCB.isChecked()) {
                        // Here's the correct way to do this: if you tell a view that it has
                        // transientState, then ListView ill avoid recycling it until the
                        // transientState flag is reset.
                        // A different approach is to use ViewPropertyAnimator, which sets the
                        // transientState flag internally.
                        view.setHasTransientState(true);
                    }
                    anim.addListener(new AnimatorListenerAdapter() {
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            cheeseList.remove(item);
                            adapter.notifyDataSetChanged();
                            view.setAlpha(1);
                            if (setTransientStateCB.isChecked()) {
                                view.setHasTransientState(false);
                            }
                        }
                    });
                    anim.start();

Why do we have to use view.setAlpha(1); I noticed that the view is not removed after the animation without this. — dazza5000, Jun 06 '16 at 23:17
Possibly because of the transient state, but I am unsure. In reality, we should now be using RecyclerViews for this sort of solution which has much better support for animations right out of the box. — AllDayAmazing, Jun 07 '16 at 22:06

Nishant · Answer 4 · 2012-09-26T07:11:43.853

I have used the Top to bottom slide animation on refreshing the ListView. Here is the code I used:

 adapter.notifyDataSetChanged();
 Animation animation = AnimationUtils.loadAnimation(
                    getApplication(), R.anim.slide_top_to_bottom);
 getListView().startAnimation(animation);
 getListView().setSelection(0);

and slide_top_to_bottom.xml (save it inside res/anim folder)

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"   android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromYDelta="-100%" android:toXDelta="0" android:duration="100" />
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="50" />
</set>

EDIT: Try this out:

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, final View view, final int i, long l) {

    ValueAnimator fader = ObjectAnimator.ofFloat(view, "alpha", 1, 0);
    AnimatorSet animation = new AnimatorSet();
    animation.addListener(new AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }
        @Override
        public void onAnimationRepeat(Animator animation) {
        }
        @Override
        public void onAnimationEnd(Animator animation) {

        }
        @Override
        public void onAnimationCancel(Animator animation) {
        }
    });
    ((AnimatorSet) animation).play(fader);
    animation.setDuration(500);
    animation.start();
    adapter.remove(tasks.get(i));
    adapter.notifyDataSetChanged();
}
});

Animate the removal of a ListView item

4 Answers4

Linked