Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Android RecyclerView Items Animation Using Custom Adapter With Example

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.80k
    Comment on it

    RecyclerView was introduced as an upgraded version to List view. The RecyclerView is much flexible, more efficient and more advance. With the help of RecyclerView, you can show larger data collections whose data may change at run time. RecyclerView supports different UIs like list and grids, and these can be attained very easily using RecyclerView. RecyclerView also provides animation to its elements at the time element being added or removed. Few of the amazing animations are listed below.

    1. Ripple effect animation on Custom Adapter

    While trying to make your adapter class inside RecyclerView for making a ripple effect on items don't forget to use

    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"

     

    We have RecyclerView items animation feature, using DefaultItemAnimator class we will be able to perform a basic animation. Either we add, select or delete any element this animation will be visible to the user.

    RecyclerView.ItemAnimator itemAnimator = new DefaultItemAnimator();
    itemAnimator.setAddDuration(1000);
    itemAnimator.setRemoveDuration(1000);
    recyclerView.setItemAnimator(itemAnimator);

    you can vary the duration according to your need.

     

    2. Pull to Refresh Animation

    SwipeRefreshLayout class is used to make pull to Refresh animation by making a vertical swipe on the list we can implement this by using custom fling behavior. Just add the few lines of code with two override methods.

    recycler_view.setOnFlingListener(new RecyclerViewSwipeListener(true) {
       @Override
       public void onSwipeDown() {
          Toast.makeText(MainActivity.this, "swipe down", Toast.LENGTH_SHORT).show();
       }
    
       @Override
       public void onSwipeUp() {
          Toast.makeText(MainActivity.this, "swipe up", Toast.LENGTH_SHORT).show();
       }
    });
    public class RecyclerViewSwipeListener extends RecyclerView.OnFlingListener {
        private static final int SWIPE_VELOCITY_THRESHOLD = 2000;
        private boolean mIsScrollingVertically;
        
        // change swipe listener depending on whether we are scanning items horizontally or vertically
        RecyclerViewSwipeListener(boolean vertical) {
            mIsScrollingVertically = vertical;  
        }
    
        @Override
        public boolean onFling(int velocityX, int velocityY) {
            if (mIsScrollingVertically && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                if (velocityY < 0) {
                    onSwipeDown();
                } else {
                    onSwipeUp();
                }
                return true;
            } else if (!mIsScrollingVertically && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                if (velocityX < 0) {
                    onSwipeLeft();
                } else {
                    onSwipeRight();
                }
                return true;
            }
            return false;
        }
    
    
        public void onSwipeRight() {
        }
    
        public void onSwipeLeft() {
        }
    
        public void onSwipeUp() {
        }
    
        public void onSwipeDown() {
        }
    }

     

    3. Animation while populating the list

    Use below class to animate your recycler view while the list populates to your screen.

    public class MyRecyclerView extends RecyclerView {
        private boolean mScrollable;
    
        public MyRecyclerView(Context context) {
            this(context, null);
        }
    
        public MyRecyclerView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public MyRecyclerView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            mScrollable = false;
        }
    
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) {
            return !mScrollable || super.dispatchTouchEvent(ev);
        }
    
        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
            super.onLayout(changed, l, t, r, b);
            for (int i = 0; i < getChildCount(); i++) {
                animate(getChildAt(i), i);
    
                if (i == getChildCount() - 1) {
                    getHandler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            mScrollable = true;
                        }
                    }, i * 100);
                }
            }
        }
    
        private void animate(View view, final int pos) {
            view.animate().cancel();
            view.setTranslationY(100);
            view.setAlpha(0);
            view.animate().alpha(1.0f).translationY(0).setDuration(300).setStartDelay(pos * 100);
        }
    }
    

    For more animation on recycler view using android libraries, visit the below link:

    https://github.com/wasabeef/awesome-android-ui/blob/master/pages/List-Grid.md

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: