4

I have a RecyclerView and add items to mCommentArrayList at index 0. I am trying to create a slide-in animation at the top of the view as new items (CardViews) are added to the RecyclerView.

I know there are libraries that can be used, and I have even explored https://github.com/wasabeef/recyclerview-animators. However, the documentation is limited and I am unsure what approach to take.

Note that I add all new items to my mCommentArrayList at index 0 so that they appear at the top of the view. I know there is some work to be done in the adapter, specifically onBindViewHolder(), but I don't know exactly what to put in order to activate the animations.

Where I first call to Firebase to find data to populate the RecyclerView:

    mUpdateRef.addListenerForSingleValueEvent(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            setImage(dataSnapshot);
            setQuestion(dataSnapshot);
            createInitialCommentIDArray(dataSnapshot);
            mNumberOfCommentsAtPoll = (int) dataSnapshot.child(COMMENTS_LABEL).getChildrenCount();
            for (int i = 0; i < mNumberOfCommentsAtPoll; i++) {
                String commentID = (String) dataSnapshot.child(COMMENTS_LABEL).child(mCommentIDArrayList.get(i)).child("COMMENT").getValue();
                Log.v("COMMENT_ID", "The comment ID is " + commentID);
                String userID = (String) dataSnapshot.child(COMMENTS_LABEL).child(mCommentIDArrayList.get(i)).child("USER_ID").getValue();
                Log.v("USER_ID", "The user ID is " + userID);
                mCommentArrayList.add(0, new Comments(mUserAvatar, userID, commentID));
                mCommentAdapter.notifyDataSetChanged();
            }

        }

        @Override
        public void onCancelled(FirebaseError firebaseError) {

        }
    });

Subsequent Calls to Firebase on Data Change:

@Override
protected void onStart() {
    super.onStart();
    mUpdateComments = new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            mNumberOfCommentsAtPoll = (int) dataSnapshot.getChildrenCount();
            for (DataSnapshot x : dataSnapshot.child(COMMENTS_LABEL).getChildren()) {
                Log.v("DATA_SNAPSHOT", x.toString());
                if (mCommentIDArrayList.contains(x.getKey())) {
                    Log.v("Comment_Already_Added", x.getKey());
                } else {
                    Log.v("Child_Added_Called", "Child Added Called");
                    mCommentIDArrayList.add(x.getKey());
                    String commentID = (String) dataSnapshot.child(COMMENTS_LABEL).child(x.getKey()).child("COMMENT").getValue();
                    Log.v("New_Comment", "The new comment is " + commentID);
                    String userID = (String) dataSnapshot.child(COMMENTS_LABEL).child(x.getKey()).child("USER_ID").getValue();
                    Log.v("New_User_ID", "The new userID is " + userID);
                    mCommentArrayList.add(0, new Comments(mUserAvatar, userID, commentID));
                    mPollCommentsList.getAdapter().notifyItemInserted(0);
                }
            }
        }

3 Answers 3

9

Using the library you were talking about (https://github.com/wasabeef/recyclerview-animators) it's very easy to add a SlideInAnimator to your RecyclerView. Just use the following code to set an Animator to your RecyclerView (pick one):

    recyclerView.setItemAnimator(new SlideInDownAnimator());
    recyclerView.setItemAnimator(new SlideInRightAnimator());
    recyclerView.setItemAnimator(new SlideInLeftAnimator());
    recyclerView.setItemAnimator(new SlideInUpAnimator());

Once you have done this the you can simply trigger the animation by calling notifyItemInserted(position) or notifyItemRangeInserted(positionStart, itemCount). These calls will trigger the Animator, calling notifyDatasetChanged() won't.

Triggering the insertion animation:

    recyclerView.getAdapter().notifyItemInserted(position);
    recyclerView.getAdapter().notifyItemRangeInserted(positionStart, itemCount);
3
  • Thanks, I will give it a shot, so I completely eliminate use of notifyDataSetChanged() when calling an animation?
    – tccpg288
    May 26, 2016 at 13:39
  • Yes. If you want your animations to work, do not rely on calling notifyDataSetChanged(); as it is the RecyclerView's default behavior, animations are not triggered to start inside this method.
    – Jeffalee
    May 26, 2016 at 13:48
  • It actually did not work. Nothing at all is appearing in the view. I removed notifyDataSetChanged() and added the notifyItemInserted() method. I can create a new SO post and show the code?
    – tccpg288
    May 26, 2016 at 16:37
6

Hope this code help's you !

create one animation file animation_from_right.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="700"
android:fillAfter="false"
>

<translate
android:interpolator="@android:anim/decelerate_interpolator"
android:fromXDelta="100%p"
android:toXDelta="0"
/>

<alpha
android:fromAlpha="0.5"
android:toAlpha="1"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
/>

</set>

in Activity

Animation animation = AnimationUtils.loadAnimation(mActivity, R.anim.animation_from_right);
        holder.itemView.startAnimation(animation);

use above code in your Adapter on onBindViewHolder

1
  • 2
    Saurabh this is the easy and perfect solution. +1 Apr 13, 2021 at 9:18
0

The best way animate the recyclerview will be to do it in the onbindviewholder method.

Here is how to do it-

create a field variable lastAnimatedPosition in the adapter class.

private int lastAnimatedPosition = -1;

Then in the onbindviewholder-

 @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Comments comment = mDataSet.get(position);
        holder.userComment.setText(comment.getUserComment());
        holder.userID.setText("User " + position);
if (position > lastAnimatedPosition) {
      lastAnimatedPosition = position;
      Animation animation = AnimationUtils.loadAnimation(context, R.anim.my_anim_set);
      animation.setInterpolator(new AccelerateDecelerateInterpolator());
      ((ViewHolder) holder).container.setAnimation(animation);
      animation.start();
    }
    }

Next a few tweaks in your viewholder class-

public class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        protected ImageView userAvatar;
        protected TextView userID;
        protected TextView userComment;
        **protected View container;**


        public ViewHolder(View v) {
            super(v);
            **container = v;**
            userAvatar = (ImageView) v.findViewById(R.id.profile_image);
            userID = (TextView) v.findViewById(R.id.user_ID);
            userComment = (TextView) v.findViewById(R.id.user_comment_textview);
        }

        **public void clearAnimation() {
          container.clearAnimation();
        }**
    }

And lastly simply override onViewDetachedFromWindow-

@Override
  public void onViewDetachedFromWindow(final ViewHolder holder) {
    holder.clearAnimation();
  }

UPDATE

Since the element to be animated is in the 0th index replace the if (position > lastAnimatedPosition) snippet with -

if (position == 0) {
      lastAnimatedPosition = position;
      Animation animation = AnimationUtils.loadAnimation(context, R.anim.my_anim_set);
      animation.setInterpolator(new AccelerateDecelerateInterpolator());
      ((ViewHolder) holder).container.setAnimation(animation);
      animation.start();
    }
5
  • 1
    Much appreciated, I am going to give it a shot. Keep in mind that each new item is added at the "0" index. Not sure how that would work with the onBindViewHolder method, as I am noticing all views sliding in and not just the newest....
    – tccpg288
    May 26, 2016 at 16:07
  • 1
    You are right.... This will make all elements sliding in. For the "0" index problem I have updated my answer. May 26, 2016 at 17:22
  • Much appreciated, I will let you know. What does the override to onViewDetachedFromWindow() actually do? I am a bit confused on its purpose/function.
    – tccpg288
    May 26, 2016 at 21:16
  • This tells the view is no longer attached to the window. I have used this to tell the code that the view is no longer attached and hence it should stop animations. If we don't clear the animations here, we will get a lot of UI glitches when we are scrolling fast. May 27, 2016 at 6:21
  • Got it, much appreciated.
    – tccpg288
    May 27, 2016 at 18:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.