DevBytes: Animating ListView Deletion

Android Developers · 56K views · 2013 · 15:26

Open on YouTube

Software (other)UX & UI designtutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when asking how to animate deletion or swipe-to-delete in an Android ListView without flicker or recycling bugs.

Recommended by 8 people across 8 different months, 2013 to 2018.

What it is

A short Android DevBytes episode by Chet Haase that shows how to animate swiping a ListView item away and then animate the neighboring rows to close the gap. It deals with view recycling, stable adapter ids and a ViewTreeObserver pre-draw listener, and comes with downloadable sample code.

What people said

Recommends Raghunandan · 2013-07 · Stack Overflow · on “Android listview row delete animation”

Here's the sourcee code (for android 4.1 i guess). [LINK] Here's the link to the video [this video] Here's a blog Google Engineer [LINK] . You have the videos to get to know what's happening. You also get to know how to port back to previous versions. Example: ListViewRemovalAnimation.java public class ListViewRemovalAnimation extends Activity { StableArrayAdapter mAdapter; ListView mListView; BackgroundContainer mBackgroundContainer; boolean mSwiping = false; boolean mItemPressed = false; HashMap<Long, Integer> mItemIdTopMap = new HashMap<Long, Integer>(); private static final int SWIPE_DURATION = 250; private static final int MOVE_DURATION = 150; @Override protected void onCreate(Bundle savedIn

Recommends devunwired · 2013-07 · Stack Overflow · on “Why ListView doesn't animate the right item?”

Animating changes with a ListView is a bit trickier than just setting the layout changes flag because of the view recycling that goes on with the Adapter. There is a series of DevBytes articles that Chet Haase has done explaining the issues and how to do this type of thing correctly here. Here is, I think, probably the most relevant one to your predicament. DevBytes: ListView Animations [LINK] EDIT I added a second video in that series that may be more helpful, the focus is on delete but the concept is still the same. The key to the trick is adding a ViewTreeObserver.OnPreDrawListener as soon as you add/remove an element in the adapter and trigger notifyDataSetChanged() . The listener will t

Recommends Tamás · 2013-11 · Stack Overflow · on “CursorAdapter backed ListView delete animation "flickers" on delete”

Hey I had a similar problem and solved like this, hope it helps you: I used what Chet Haase showed in this devbyte: [this video] It's very similar to Roman's code, but here he uses a ViewTreeObserver, so after you deleted the item from the adapter, but before the list is redrawn, you have time to animate closing the gap, and it won't flicker. Another difference is, that he sets the Listener to each view(item) of the list in the adapter, and not on the ListView itself. So a sample of my code: This is the ListActivity's onCreate, here I pass the listener to the adapter nothing special: ListAdapterTouchListener listAdapterTouchListener = new ListAdapterTouchListener(getListView()); listAdapter = new

Recommends Piyush Agarwal · 2014-03 · Stack Overflow · on “Swipe to delete for a custom view not for list item”

I want to develop a layout with a very simple ImageView and a Listview binded in a Relativelayout . Now for a better user experience I want to delete the Image view by swiping it left or right same like what is implemented in android Gmail app to delete emails. Implementing it on a listview item is very simple and there are many tuts and sample codes are available over the internet including the official Google I/O talk on animation and explained in a very good way by Chet Hasse here [this video] but I don't require to implement it on the listview items insted I want to implement it in more generic way. In my case I want the same behaviour for my ImageView item as one view and ListView another .

Recommends nitzanj · 2014-05 · Stack Overflow · on “Android listView wrong child position when slide right”

A ListView does not have as many child views as your array - It recycles views. If you see 5 items on screen the list will have around 10 views total, and they will be reused as you scroll. Basically as soon as you start scrolling you lose the relation between the index of array and the ListView's child view index. Chet hasse has a great piece about swipe-to-delete and deletetion animation on ListViews. I suggest you start there, it's pretty much exactly what you need (He also provides working code examples to download). [this video]

Recommends dimetil · 2014-07 · Stack Overflow · on “How to Animate Addition or Removal of Android ListView Rows”

Take a look at the Google solution. Here is a deletion method only. ListViewRemovalAnimation [LINK] project code and Video [this video] demonstration It needs Android 4.1+ (API 16). But we have 2014 outside.

Recommends iZBasit · 2014-09 · Stack Overflow · on “Click on individual component in a row of listview”

Not exactly a solution to your problem, but check out this video by Chet Hasse you should get an idea how to do it. [this video]

Recommends Peter · 2015-03 · Stack Overflow · on “Android animate all listview items simultaneously”

Check out this DevBytes video [LINK] about animating ListViews . The solution is to use a StableArrayAdapter [LINK] (direct link to code). This prevents the View objects from being recycled out from under you while you perform your animations. private class StableArrayAdapter extends ArrayAdapter<String> { HashMap<String, Integer> mIdMap = new HashMap<String, Integer>(); public StableArrayAdapter(Context context, int textViewResourceId, List<String> objects) { super(context, textViewResourceId, objects); for (int i = 0; i < objects.size(); ++i) { mIdMap.put(objects.get(i), i); } } @Override public long getItemId(int position) { String item = getItem(position); return mIdMap.get(item); } @Ove

Recommends Peter · 2015-04 · Stack Overflow · on “Android LiistView item update”

The views are being recycled. This DevBytes video on ListView animation [LINK] explains exactly what your problem is. It describes how to notify the framework that you don't want a particular view recycled. This is accomplished by calling setHasTransientState() [LINK] on the View in question. For a better solution, check out the StableArrayAdapter from this DevBytes video on animating ListView deletion [this video] (particularly the first three minutes). The StableArrayAdapter overrides hasStableIds() [LINK] to return true, which has the same effect as setHasTransientState() [LINK] . /* * Copyright (C) 2013 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "L

Cites Samantha · 2014-05 · Stack Overflow · on “Remove element from android listview”

I am trying to create a list view that can support side swipe. I want the user to be able to drag a listview element to the right and off screen reveling a delete button below. The user should be able to click the delete button to remove that element from the listview. I have been following [this video] but just need help on adding the delete button to the background. Any help?