Shared elements transition from recyclerView in viewPager to fragment

Question

I create application where in main fragment there is viewPager with fragments with recyclerView. Each item of recyclerView has image, that need to be made shared to detail fragment with animation. The problem is that it doesn't work. I tried to make it without viewPager, only use one fragment with recyclerView and it works good. What the difference in realization shared elements transition in viewPager and without this one?

In adapeter I set transitionName

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        holder.movieImage.setTransitionName("transition" + position);
 }

In Activity I show detail fragment:

 public void showFragmentWithTransition(Fragment current, Fragment newFragment, String tag, View sharedView, String sharedElementName) {
    FragmentManager fragmentManager = getSupportFragmentManager();
    // check if the fragment is in back stack
    boolean fragmentPopped = fragmentManager.popBackStackImmediate(tag, 0);
    if (fragmentPopped) {
        // fragment is pop from backStack
    } else {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            current.setSharedElementReturnTransition(TransitionInflater.from(this).inflateTransition(R.transition.default_transition));
            current.setExitTransition(TransitionInflater.from(this).inflateTransition(android.R.transition.no_transition));

            newFragment.setSharedElementEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.default_transition));
            newFragment.setEnterTransition(TransitionInflater.from(this).inflateTransition(android.R.transition.no_transition));
        }
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.fragment_container, newFragment, tag);
        fragmentTransaction.addToBackStack(tag);
        fragmentTransaction.addSharedElement(sharedView, sharedElementName);
        fragmentTransaction.commit();
    }
}

In detail fragment I obtain arguments like this:

 @Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    Bundle arguments = getArguments();
    if (arguments != null) {
        String transitionName = arguments.getString("transitionName");
        Movie movie = (Movie) arguments.getSerializable("movie");

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            movieImage.setTransitionName(transitionName);
        }

        if (movie != null) {
            if (!TextUtils.isEmpty(movie.getImage()))
                Picasso.with(getActivity()).load("https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg").into(movieImage);
            else
                movieImage.setImageDrawable(null);

        }
    }
}

Kirill Gerasimov · Answer 1 · 2019-05-02T12:30:30.817

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

So I wrote a SharedElement ViewPager 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.

Take a look.

SharedElementPageTransformer demo gif

Usage

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

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

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

        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);

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);

Set our transformer to ViewPager's pageTransformer AND onPageChangeListener.

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

The only thing you may need is to create additional ImageView on the RecyclerView fragment on top of ImageView you need to animate. Then you can make a transition from it to ImageView on the target ViewPager page.

Shared elements transition from recyclerView in viewPager to fragment

1 Answers1

Usage