How to implement Android 4.0 like swipe to dismiss functionality in ListView?

Question

I'm working on an app in which I would like to implement swipe-to-dismiss functionality in the ListView - similar to what we see in Android 4.0's notification bar, recent apps list or browser tabs. I want to run the app on the devices running Android 2.2+. See the following image. I also want to change the transparency of the item being swiped-away - just like in ICS.

I checked the source of the ICS web browser on http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android-apps/4.0.1_r1/com/android/browser/TabScrollView.java?av=f but couldn't figure out which class is particularly responsible for implementing this functionality.

Can anyone point me in the right direction here? Can we do this using Android Compatibility Library? Please let me know. Many thanks.

Lucrecialucretia

Answer 1

I know this is quite an old question, but for anyone still searching for this, you can have a look at Roman Nurik's library here: https://github.com/romannurik/Android-SwipeToDismiss

This shows how to create the required behavior for list-view as well as for normal views.

Gerhart

Answer 2

I've thought about implementing such a feature as well, but I haven't done it yet. So the only thing I can provide are some ideas on how I would approach that problem. If I've eventually written some code I will post it here.

1. The main class needed is a custom Adapter which extends a ListAdapter (ArrayAdapter, SimpleCursorAdapter etc.).
2. The adapter applies a View.OnTouchListener to all of its Views.
3. Whenever that listener detects a horizontal scroll dx, it calls concernedView.offsetLeftAndRight(dx) (which will make the view draggable). Of course the adapter has to save the current horizontal offset for the view. If the user was dragging a view and removes his/her finger from the screen, the touchListener will detect this as well and start a slide back animation. Using the current offset we can also calculate an alpha value, so the view will fade out when it approaches the screen borders.
4. If one list entry is eventually dismissed by the user, it becomes a bit tricky, and I'm still not sure how I would implement the following action: The list content has to be updated (or the adapter has to ignore the dismissed entries) and the views that were below the one that was dismissed must hover upwards in order to fill the gap. I think it might work to let the ListView load the new content, but that would fill the gap instantly. In order to avoid that, I would then start an animation that lets all the concerned views hover from their old position (where we still had the gap) back to their current position (where the gap is filled).

These are just some of my thoughts on the issue that might help some people getting started on working on the problem. Like I said, I'm probably going to implement that sometime in the future and of course I will post the code here.
I would appreciate any feedback in the comments, but I don't want to thorougly explain every single aspect of my idea, that would take me too much time ;)

Coulomb

Well, that's a start. I will try to create something based on this and will update here if I am successful. – Lucrecialucretia

Before you remove the view, animate it's height to 0. That'll make the list collapse nicely. Then a notify won't be a jarring snap. – Dorris