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?

Unscramble

would also like clarification on this as well, as I am running into a similar problem today – Rupert

@Rupert If you find how to fix it please let us know – Unscramble

Can you post any relevant code you are using? A video illustrating the problem might help as well (Android Studio's screen capture feature can come in handy here). – Maiolica

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

Chunchung

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

Counterpart

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.

Maiolica

Thanks for the help, but I've tried a lot of transition combinations and still the same result. – Unscramble

Answer 4

I solved this problem by following this article Shared Element Transitions - Part 4: RecyclerView, which shows codes snips and give detailed explanation.

make sure the android:transitionName between shared elements must be the same, and also has to be unique in the view hierarchy.

As for RecyclerView to Fragment, If we set the transitionName in XML then all ImageView in the gallery would have the same one, which means when we came back to the gallery the framework would have no idea where to move the image to.

Since the item position is unique, so it's best to use position here to set transitionName in onBindViewHolder.

Mysia

Answer 5

For anyone else having these issues, I solved it by making sure the same image transformation was applied to both shared elements. In my case I had no transformation applied to my fragment2 and Centre Crop applied to my fragment1, causing the visual bug.

Epizootic

Answer 6

You can delete item name="android:windowFullscreen"true in the style->theme.its useful to me.

Punchboard