Skip to content

Advanced animations

Alex Vasilkov edited this page Oct 21, 2015 · 8 revisions

Introduction

Often you may want to animate images opening from list (ListView, RecyclerView, etc) into full screen (ViewPager). That requires quite complex logic of keeping start and end views in sync (opening ViewPager on correct page, updating views if list or ViewPager content updated, updating views position if list was scrolled, scrolling list if ViewPager was scrolled and so on).

Out of the box

If you need to animate from RecyclerView into ViewPager you may use ViewsTransitionBuilder:

animator = new ViewsTransitionBuilder<ID>()
        .fromRecyclerView(recyclerView, viewsTracker)
        .intoViewPager(viewPager, viewsTracker)
        .build();

Where viewsTracker is a helper object with methods:

int getPositionForId(ID id);
ID getIdForPosition(int position);
View getViewForPosition(int position);

Created animator will have similar API as used in basic animations:

enter(ID id, boolean withAnimation)
exit(boolean withAnimation)
isLeaving()
addPositionUpdateListener(PositionUpdateListener listener)
removePositionUpdateListener(PositionUpdateListener listener)

Where ID is id of the item to be opened. If items positions are stable you may use positions as ids and use SimpleViewsTracker which only requires method getViewForPosition(int position) to be implemented.

Custom animation

If your starting and/or destination views sources are different from RecyclerView / ViewPager than you'll need to implement custom animation logic.

Good news is that you will not need to manually keep views in sync between different sources, that work is already done by ViewsCoordinator class. You will also not need to implement views animator yourself (ViewsTransitionAnimator is here to help), but you will need to provide special OnRequestViewListener object with method:

void onRequestView(ID id)

This method will be called when item with given id was requested to be opened. Your responsibility will be to find correct view (scrolling views if needed) and set it back to ViewsTransitionAnimator with either setFromView(ID id, View fromView) or setToView(ID id, AnimatorView toView) methods. You should do the same also if view for given item was changed for any reason.

Creation of custom animator will look like this:

animator = new ViewsTransitionAnimator<>();
animator.setFromListener(fromListener);
animator.setToListener(toListener);

Where "from" and "to" listeners are helper objects described above.

You may use FromRecyclerViewListener and IntoViewPagerListener as starting points.

Clone this wiki locally