Animation list items in a ListView

Question

I am trying to animate new items in my ListView. I have stable id-s, so I know for sure which element to animate. The problem is with the ListView recirculation mechanism. I call startAnimation in the view when I know that I received a newly inserted item. But then the look was processed, filled with different data. This causes the user interface to animate the wrong line. At some point, the view contained the correct data, but was then reworked. I confirmed this with logcat. Is there any way to solve this?

EDIT:

public ExpensCursorAdapter(Context context, Cursor c, boolean autoRequery, CopyOnWriteArraySet<String> fadeAnimateTags) { super(context, c, autoRequery); this.mFadeAnimTags = fadeAnimateTags; } @Override public boolean hasStableIds() { return true; } @Override public void bindView(View view, Context context, Cursor cursor) { setup(view, context, cursor); } private void setup(View view, Context context, Cursor cursor) { final String id = cursor.getString(4); if (LOCAL_LOGV) Log.v(TAG, String.format("Create item for %s. Received view: %s", id, view.toString())); view.setTag(id); final TextView dateText = (TextView) view.findViewById(R.id.date); final TextView timeText = (TextView) view.findViewById(R.id.time); final TextView title = (TextView) view.findViewById(R.id.title); final TextView amount = (TextView) view.findViewById(R.id.amount); final Date date = new Date(cursor.getLong(0)); title.setText(cursor.getString(1)); dateText.setText(dFormat.format(date)); timeText.setText(tFormat.format(date)); amount.setText(String.format("%d Ft", cursor.getInt(2))); if (cursor.getInt(3) == 1) { timeText.setTextColor(Color.LTGRAY); title.setTextColor(Color.LTGRAY); dateText.setTextColor(Color.LTGRAY); amount.setTextColor(Color.LTGRAY); } else { timeText.setTextColor(Color.BLACK); title.setTextColor(Color.BLACK); dateText.setTextColor(Color.BLACK); amount.setTextColor(Color.BLACK); } if (mFadeAnimTags.contains(id)) { view.setAnimation(AnimationUtils.loadAnimation(context, R.anim.fade)); mFadeAnimTags.remove(id); } } @Override public View newView(Context context, Cursor cursor, ViewGroup parent) { final LayoutInflater inflater = LayoutInflater.from(context); View view = inflater.inflate(R.layout.expense_list_item, parent, false); setup(view, context, cursor); return view; } 

Answer 1

Animate each added item in the getView method of your custom adapter.

 public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; if (v == null) { LayoutInflater vi = (LayoutInflater) getActivity() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.simple_list_item_1, null); } ListData o = list.get(position); TextView tt = (TextView) v.findViewById(R.id.toptext); tt.setText(o.content); Log.d("ListTest", "Position : "+position); if(flag == false) { Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_top_to_bottom); v.startAnimation(animation); } return v; } 

And thereby achieve the animation.

Answer 2

If you use simple getView () code (no special library needed)

 private int lastPosition = -1; @Override public View getView(int position, View convertView, ViewGroup parent) { //Load your view, populate it, etc... View view = ...; Animation animation = AnimationUtils.loadAnimation(getContext(), (position > lastPosition) ? R.anim.up_from_bottom : R.anim.down_from_top); view.startAnimation(animation); lastPosition = position; return view; } 

up_from_bottom.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="@android:anim/decelerate_interpolator"> <translate android:fromXDelta="0%" android:toXDelta="0%" android:fromYDelta="100%" android:toYDelta="0%" android:duration="400" /> </set> 

down_from_bottom.xml

  <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="@android:anim/decelerate_interpolator"> <translate android:fromXDelta="0%" android:toXDelta="0%" android:fromYDelta="-100%" android:toYDelta="0%" android:duration="400" /> </set> 

Link from this site: http://kylewbanks.com/blog/Implementing-Google-Plus-Style-ListView-Animations-on-Android

Answer 3

Look at the ListViewAnimations library to animate ListView items.

Basically, you will need to add two more lines to animate your elements:

Before:

 MyListAdapter mAdapter = new MyListAdapter(this, getItems()); getListView().setAdapter(mAdapter); 

After:

 MyListAdapter mAdapter = new MyListAdapter(this, getItems()); AlphaInAnimationAdapter alphaInAnimationAdapter = new AlphaInAnimationAdapter(mAdapter); alphaInAnimationAdapter.setAbsListView(getListView()); getListView().setAdapter(alphaInAnimationAdapter); 

Answer 4

I had a similar problem. I am not 100% sure if this is the right way, but you can try to clear the animation in the view before starting a new one to undo any remaining animation from the redesigned view. It helps me.

 if(flag == false) { v.clearAnimation(); Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_top_to_bottom); v.startAnimation(animation); }