How can I animate adding new item or moving item from one position to another in listview? I want to make animation effect, like in this app: any.do(youtube). I'm using adapter extended from ResourceCursorAdapter. How I should use newView and bindView functions to achieve this effect? Or is there another way to do it, like extending ListView class? I suspect that there is a ScrollView instead of Listview in any.do app. But I think this is wrong way, if you will have many items in list. Any ideas?
To do that effect, you need to:
1. "close" the slot where the item used to be.
2. "open" a slot in the list, where the item will "land".
3. Move the item between the slots.
To achieve the first animation, you need to animate the list item view itself. To make it disappear, you can animate the value of its bottom margin. I wrote a blog post about other Animation I did in Any.DO, where I animated this value - http://udinic.wordpress.com/2011/09/03/expanding-listview-items/. You can use the same animation to animate list item's view.
The "open" animation is the same as the close, but in the opposite direction. You take the list item, positioned right before your "landing point", and animate its bottom margin outwards, making an empty space for the new item to come.
Moving the item between the positions is fairly easy. You need to inflate a view with the same layout as the list items, populate it with the current item's data, add it to the WindowManager:
WindowManager winManager = (WindowManager) Context.getSystemService(Context.WINDOW_SERVICE);
winManager.addView(..)
and animate it's coordinates by using:
winManager.updateViewLayout(..);
After the animation will finish - you can remove this view and refresh the list.
The Add item animation is done using the same concept.
Sorry I don't have full source to provide here. At my blog post you can find the code for the expand/close animation.
Hope this helps!
Related
Trying to animate a search bar result, which is a listView contained in a FrameLayout. Basically, all it needs to do is when the search button is pressed, the listView drops down along with the ListItems populated by a listAdapter. Right now, I cannot find a way to animate this outside of the adapter's getView method. However, if I animate the adapter's getView method, this animation would animate every single time the listView changes, which is not desired in my case.
The list populates after nofityDataSetChanged is called, so how would I be able to know the size of the listView before it's fully populated? or what exactly is the right way of doing this.
I just need it to animate on the first time. Therefore, the question is is there a more elegant way of animating ListView without changing anything in the ListViewAdapters.
Thanks for the help!
I have a ListView which has overlayed on top of it another view which I call a Header. This header can be of various heights.
On ListView's dataset, I insert in a blank row, and programmatically set the height of this row to be the height of my Header view. This way when the ListView loads, the row at position 1 (the actual first row of data) is lined up to the bottom of the header. I do this so I can set the Header view as partially transparent and when the user scrolls they see the rows of data mix with the transparency of the Header view.
Now I have one use case where I can navigate to this list and a given row will be selected. What I've done is call setSelection with position X. This will automatically scroll my ListView so that the top of row X is at the top of the list. However, my Header view still obscures this. To compensate I call scrollTo. These two pieces are something as such:
listView.setSelection(selectedRowPosition);
if(hasHeadersEnabled()) {
listView.scrollTo(-headerView.getMeasuredHeight).
}
When I call these lines of code, my ListView looks as I would expect. The selected row's top is to the bottom of my HeaderView. The problem I run into is that as soon as a user touches the ListView, the scroll position jumps so that the selected row's top is at the true top of the ListView (aka the Header view's top).
My question is, after you setSelectedRow on a ListView, does the ListView always expect that row's top to be the ListView's top when it starts consuming the onTouch events for scrolling? Is there another way to accomplish what I'm hoping to do with this code? I've tried scrollTo and scrollBy and both have the same effect.
So I should have looked at the API harder. Found the answer to my question.
I need to use setSelectionFromTop instead of the combination of setSelection and scrollTo. Here is the sample code:
listView.setSelectionFromTop(rowPosition, headerView.getMeasuredHeight());
I need to implement list view that must show selected item in the center of list view.
Is it possible?
The problem is that list view forbid scrolling before top item and after last item.
The only workaround here I found is to add several dummy header and bottom items and use setSelectionFromTop() method for right positioning.
Is there any other better way?
Thanks
You could use a circular ListView Check this thread on how to implement it
and use smoothScrollToPosition to bring your particular view to the center.
You shouldn't need to add multiple dummy list items. Just extend your Adapter and use a single blank dummy list item that you can programmatically adjust the size of based on the screen resolution of the device.
I am trying to have a listview cell slide up to partially cover the cell above it. Is there a way to allow content from one cell in a listview to overlap content in another listview cell?
I assume I would use a TranslateAnimation to slide up the top view to reveal the subview, but how to slide over another cell is where I am lost. Is this even possible?
I'm not sure, but you can retrieve your cell like this:
getListView().getChildAt(index);
when index means the position (starting from 0 I guess).
Do the TranslateAnimation and then if you want to make the above cell disappear, just delete it from your list's items array and look for a "refresh list view" method or something alike.
I've never tried it. Try and comment with results.
Good luck!
I have a list of about 100 items. In each list item I need a framelayout with 2 relative layouts. When a button called "Flip" is clicked then one relative layout will flip out and the other relative layout will flip in. And each item has full width of the screen. So, I need to show the item in a horizontal scroll view. Now, I want to keep at most 3 items every moment. When user scrolls to the first item then we have to update the 3 items. The first item will be the 2nd item. And we have to add another item at the front. In this way we have to update the items when user scrolls to the last item. I have tried many ways. I have used Gallery for the horizontal scroll view. And used the onItemSelected method. But, if I scroll the Gallery fast then it crashes. So, please someone help me to implement the 3 items idea.
It sounds like you need a ListView. Is there a reason you are trying to reinvent it?
Also don't you mean a vertical scroll view? Why are using a horizontal?