Share Element Transition between Recycler View and Fragment

Hi guys, this story is all about how to implement the shared element transition between two fragments with one fragment having Recycler View.

Note that the shared element transitions require Android 5.0 (API level 21) and above.

We need to use methods on the exiting fragment such as setSharedElementReturnTransition and setExitTransition. On the entering fragment, we call setSharedElementEnterTransition and setEnterTransition and then call addSharedElement(view, transitionName) as part of building the FragmentTransaction. In the below code snippet current is the exiting fragment and newFragment is the entering fragment. default_transition is the transition to apply to the element.

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

default_transition.xml

this transition must reside inside the transition resource folder

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform />
    <changeBounds />
</transitionSet>

For the shared element transition the views being shared must have the same transitionName. Recycler view is all about re-using the recycled view instead of creating a new view each time. So we have to provide the unique transition name to each view of the Recycler view.

@Override
public void onBindViewHolder(final Holder holder, final int position) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // the view being shared
        holder.movieImage.setTransitionName("transition" + position);
    }
}

Inside the Click listener on the holder view open your second (MovieDetail) fragment. Pass the dynamic transitionName with this fragment so that the view being shared on this fragment can have the same transitionName.

class Holder extends RecyclerView.ViewHolder {
    private ImageView movieImage;
    private TextView movieName;

    public Holder(View itemView) {
        super(itemView);
        movieImage = (ImageView) itemView.findViewById(R.id.movieImage);
        movieName = (TextView) itemView.findViewById(R.id.movieName);

        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragment.openMovieDetailFragment(getAdapterPosition(), v.findViewById(R.id.movieImage));
            }
        });
    }
}

openMovieDetailFragment function

MovieDetail movieDetail = new MovieDetail();
Bundle bundle = new Bundle();
bundle.putString("transitionName", "transition" + position);
bundle.putSerializable("movie", movie);

movieDetail.setArguments(bundle);

MovieDetail fragment

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

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

You can download the whole project from the below Github link

deepak786/SharedElementTransitionWithRecyclerView

Thanks to @Androidhive for the movies JSON API. http://api.androidhive.info/json/movies.json