Shared Element Transition with RecyclerView items - Android

Question

I'm trying to make shared element transition work with an element inside a recycler view. When the user clicks on a textview inside my recycler view item, the Detail Activity opens. Inside Detail Activity, I display some infos and I also have a tab layout that loads some images from url using picasso. The transition to Detail Activity is working, but if the user returns to Main Activity before have loaded all images, the recycler view in Main Activity dissapers after the reverse animation! When I disable shared element transition, the problem is gone.

Both activities work with fragments. So, I'm trying to create a transition between two fragments, which are in different activities.

In RecyclerViewAdapter, I set the transition name:

public void onBindViewHolder(final ViewHolder viewHolder, int position) {
  ... 
 viewHolder.profileImage.setTransitionName("profile"+position);

onClickListener of my textview (inside a fragment in Main Activity):

Intent i = new Intent(getCurrentActivity(), DetailActivity.class);
        ActivityOptionsCompat options = ActivityOptionsCompat.
               makeSceneTransitionAnimation(getCurrentActivity(), (View) profileImage, "profile"+position);
        getCurrentActivity().startActivity(i, options.toBundle());

Inside the fragment of Detail Activity that has the shared element (in onCreateView):

profileImage.setTransitionName("profile"+position);

I already checked the transition name in both activities when the intent occurs and its the same.

I'm stuck in this problem for two days and can't see what is happening. If you need more info or code about it, just ask.

Thank you!

I don't know if that matters, but the two activities (Main and Detail) has fragments, so the intent to detail activity is called from the main activity's fragment and the setTransitionName() of second activity is called inside onCreateView() of its fragment. — G_comp, Mar 12 '16 at 21:03
Ofcourse you will have that problem. Picasso is a Async call at the BackGround and if it is not Finished with its task then you move to another Activity which is your MainActivity. The Async call from Picasso will be halted. @G_comp. I don't think he is using Fragments, because you set the Transition on FragmentTransactions. — Aizen, Mar 12 '16 at 21:06
@Aizen but the problem just occurs when the shared element transition is enabled, so I don't think that is picasso fault. When I disable shared element transistion, I can return to Main Activity before the images are loaded without problem — G_comp, Mar 12 '16 at 21:13
It is not the Picasso's Fault, It is just that Picasso will also halt its call. The main Problem is the Transition. You are deliberately halting the MainActivity process and going to Detail, so when you go back to the Main. It is incomplete. You would need to use proper Fragments Handling. Not letting the MainActivity close its process and when someone clicks on it. You need to just get the fragment transaction and add the Details activity, so you would avoid halting the main activity. `Intent i = new Intent(getCurrentActivity(), DetailActivity.class)` is not creating Fragments. — Aizen, Mar 12 '16 at 21:28
when you create an Intent, the Activity that is creating the Intent is still running. However when you call startActivity. That is when your current Activity will be halted and replaced with another. In Fragments, they will all run at the sametime as they are one part of an Activity held by the FragmentManager. I hope you understand where I am going with this. — Aizen, Mar 12 '16 at 21:30
Yes, I understand that. But I'm trying to create a transition between two activities (which have fragments). In the Main Activity fragment, I call the intent with the transition to Detail Activity. Then, I handle that in Detail Activity fragment (which has the shared element). — G_comp, Mar 13 '16 at 02:11
Trust me, you're not using Fragments. If you're then please tell me what Class Activity is holding, Your MainActivity and Detail Activity. If you use `startActivity` from your Detail Acitivity to go back to MainActivity. Then, you're not using Fragents at all. — Aizen, Mar 13 '16 at 07:11
Main activity is a tab layout and has 5 fragments. One of them, has a recycler view. When the user clicks on the recycler view item, the detail activity opens. The Detail activity also has a tab layout. In one of the fragments of detail activity, it's the shared element. I suppress from code the fragment part to make simpler. The transition is between the two activities. I hope it's clearer now. — G_comp, Mar 13 '16 at 18:00
to summarize : I'm trying to create a transition between two fragments, which are in different activities. — G_comp, Mar 13 '16 at 20:32

zys · Answer 1 · 2016-11-16T02:14:52.890

The problem is that shared element transitions is started by the framework very early in the Activity lifecycle.Transitions must capture both the start and end state of its target views in order to build a properly functioning animation. Thus, if the framework starts the shared element transition before its shared elements are given their final size and position and size within the called Activity, the transition will capture the incorrect end values for its shared elements and the resulting animation will fail completely.

If The shared element depends on asynchronously loaded data by an AsyncTask, an AsyncQueryHandler, a Loader, or something similar before their final appearance within the called activity can be determined, the framework might start the transition before that data is delivered back to the main thread.
So,the soluation is the following:

call postponeEnterTransition() in your called activity’s onCreate()method.
when you know for certain that all of your shared elements have been properly positioned and sized, call startPostponedEnterTransition() to resume the transition. A common pattern you’ll find useful is to start the postponed transition in an OnPreDrawListener, which will be called after the shared element has been measured and laid out.

You use Picasso , as I know Picasso has a callback named RequestCreator when loaded image.
For example:

private final Callback callBack = new Callback() {
    @Override
    public void onSuccess() {
        imageView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                imageView.getViewTreeObserver().removeOnPreDrawListener(this);
                MainActivity.this.startPostponedEnterTransition();
                return true;
            }
        });
    }

    @Override
    public void onError() {

    }
};

RequestCreator requestCreator = Picasso.with(this).load(imageUrl);
requestCreator.into(imageView, callback);

Shared Element Transition with RecyclerView items - Android

1 Answers1