Android - Recyclerview shared element transition item position

Question

I hope you could help me with this issue. I have two fragments, the first one is a recyclerview with several images, the second fragment is the details view of this images. If user clicks on an image the app does a fragment transaction and the details are displayed.

I have implemented a shared element transition between the fragments successfully, if I click the little image on the 1st fragment it gets bigger and moves to its final position on the details view.

Well then, here's the issue, the initial position of the image is not the expected, it starts moving a few pixels from its original position, when I click the image jumps a little bit to the right and to the bottom.

Why is this happening? its annoying!

The transition xml:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform />
    <changeBounds />
</transitionSet>

If I do the same for a button outside the recyclerview it works perfectly. Is this some kind of bug in the recyclerview?

Answer 1

Your RecyclerView items need to set a unique transition name on their shared view. If you imagine the rendered layout hierarchy of your RecyclerView, there will be a lot of items (views) in it that have the same transition name. This way it is unclear for the transition, which the actual shared element is. For example, you could append the position to the views transition name, e.g. transition1, transition2, etc. Now when you start your detail fragment, you have to hand over the transition name to it and set this name to the shared view in your detail fragment, e.g. in onViewCreated().

Answer 2

This could happen if the correct view is not being picked up from your recycler view. Make sure that you use the precise view (based on the position) instead of the root view. For e.g. in the below snippet the View v (which you receive in the onClick()) should be used:

mAdapter.setOnItemClickListener(

                new MyAdapter.OnItemClickListener() {

                    @Override
                    public void onClick(View v, int position) {

                        ImageView heroView;
                        heroView = (ImageView) v.findViewById(R.id.category_icon);
                        ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                                getActivity(), heroView, heroView.getTransitionName());
                        ActivityCompat.startActivity(getActivity(), intent, options.toBundle());

Answer 3

If your shared elements are ImageViews, then you need to use a ChangeImageTransform transition as well. Try adding <changeImageTransform /> to your transition set.