Android animates all list items at once

Question

I want to achieve simultaneous animation in all list view items in order to put them into edit mode. Here the effect is identical to what Im is going for: http://youtu.be/cFSRusFkI_I?t=2m6s The code for the layout of the list item:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/item_content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="4dp" > <CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:visibility="invisible" /> <TextView android:id="@+id/nameTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:textSize="16sp" android:textStyle="bold" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:paddingRight="5dip" android:src="@drawable/right_arrow" /> </RelativeLayout> 

After the user clicks the button in the Bar action, I want the animation of the sliding flags to slide from left to right, with the proper textview animation, to make room for the flags. I left the checkbox invisible to the target in order to measure its width for the animation. The method I use to animate checboxes (hide or show, it depends on state paramater):

 public void setListHandlesVisibleState(boolean state) { AnimatorSet as = new AnimatorSet(); int childCount = mListView.getChildCount(); ArrayList<Animator> list = new ArrayList<Animator>(); for (int i = 0; i<childCount; ++i) { CheckBox v = (CheckBox) mListView.getChildAt(i).findViewById( R.id.checkbox); TextView tv = (TextView) mListView.getChildAt(i).findViewById( R.id.nameTextView); if (state) { list.add(ObjectAnimator.ofFloat(v, "x", -v.getWidth(), v.getLeft())); list.add(ObjectAnimator.ofFloat(v, "alpha", 0, 1)); list.add(ObjectAnimator.ofFloat(tv, "x", tv.getLeft(), (float) (v.getWidth() * 0.9))); } else { list.add(ObjectAnimator.ofFloat(v, "x", v.getLeft(), -v.getWidth())); list.add(ObjectAnimator.ofFloat(v, "alpha", 1, 0)); list.add(ObjectAnimator.ofFloat(tv, "x", (float) (v.getWidth() * 0.9), tv.getLeft())); } } as.addListener(this); as.playTogether(list); as.setDuration(200); as.start(); } @Override public void onAnimationEnd(Animator animation) { mAdapter.notifyDataSetChanged(); } 

When the listview is shorter than one screen (no reuse), the animation looks perfect and really smooth. When viewing a list is longer, it seems that some elements of the list have not yet been created, and therefore are not animated. I tried to create a view cache in the adapter and use these views instead, using the convertView method in the getView adapter and play animations in the views contained in this cache. I also noticed that all reusable types are created when the list is created (when I view a view in listview view mode always! = Null).

Answer 1

Watch this DevBytes video on ListViews animations.

The solution is to use the StableArrayAdapter (direct link to the code). This prevents the return of View objects from under you during the execution of the animation.

 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); } @Override public boolean hasStableIds() { return true; } } 

You can also find this video .