5

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.

Edric
  • 24,639
  • 13
  • 81
  • 91
Rahul Upadhyay
  • 3,493
  • 2
  • 21
  • 37
  • Hi rahul use this link for shared element transition in fragments https://github.com/lgvalle/Material-Animations/ – Jinu Oct 29 '15 at 10:37
  • Thanks @Jinu, I've tried this as well. But its not fulfilling my concern. I want to animate view in Fragments using ViewPager. Inside FragmentPagerAdapter. – Rahul Upadhyay Oct 30 '15 at 12:23
  • shared element transitions are not available to virewpager but you can transfrom elements like flickr https://medium.com/@BashaChris/the-android-viewpager-has-become-a-fairly-popular-component-among-android-apps-its-simple-6bca403b16d4#.nubwfyiog – Jinu Oct 30 '15 at 12:50
  • @RahulUpadhyay Have u got any solution for this? – Shubham Sep 11 '16 at 05:29
  • @Shubham, not yet. Not the exact way I wanted to with View Pager but we can do with Fragments same as Activity Transition. Please refer https://developer.android.com/training/material/animations.html – Rahul Upadhyay Sep 12 '16 at 04:54

2 Answers2

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);
  1. Create SharedElementPageTransformer presumably in Activity.onCreate().
    this refers to activity:
        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);
  1. 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);
  1. Set our transformer to ViewPager's pageTransformer AND onPageChangeListener.
        viewPager.setPageTransformer(false, transformer);
        viewPager.addOnPageChangeListener(transformer);
Kirill Gerasimov
  • 21
  • 3
-1

it's been maybe a too long time but could be helpful though. It's totally possible to have shared elements transitions between 2 viewPagers since i already did it myself.

I think the thing you are maybe missing is that transition name has to be unique ! So it has to be set programmatically and not in XML ! It's very important in ViewPager since same view could be inflated many times.

imageView.setTransitionName("unique_name");

This way the transition knows on what element it should be played;)

didi.yeah
  • 29
  • 3