how to apply shared element animation in ViewPager fragments?

Question

I want to animate a view with SharedElement transition from one Fragment to another fragment in ViewPager.

I've 3 fragments in a ViewPager, each fragment is having a single TextView with same transition name in XML file.

Now, when ViewPager slides another Fragment, I want to see SharedElement in action.

Answer 1

I’ve had the same issue. Standard shared element transitions are not working between ViewPager pages.

So I wrote a Shared Element View Pager library. It works both for transitions caused by onClick() events (such as viewPager.setCurrentItem(x) ) and page slides caused by user. The animation is bound to finger movement.

It's not an android transition so there could be some obstacles. Take a look though.

SharedElementPageTransformer demo

Usage

1. Add all fragments from your ViewPager to the List in the same order.

        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(hello_fragment);
        fragments.add(small_picture_fragment);

2. Create SharedElementPageTransformer presumably in Activity.onCreate().
   this refers to activity:

        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);

3. Add shared transition by passing pairs of view ids, that need to be linked together

        transformer.addSharedTransition(R.id.smallPic_image_cat, R.id.bigPic_image_cat);

4. Set our transformer to ViewPager's pageTransformer AND onPageChangeListener.

        viewPager.setPageTransformer(false, transformer);
        viewPager.addOnPageChangeListener(transformer);