Navigation component shared element transitions works for enter but not for popping back

Question

I'm trying to use a shared element animation between 2 fragments, BlankFragment and BlankFragment2. BlankFragment has a recycler view and BlankFragment2 is a details screen. They share an image and I'm using the new navigation component.

In BlankFragment I'm building FragmentNavigator.Extras and passing the extras to my call to navigate with the transition name of the shared image (as its a recycler view and these need to be unique),

In BlankFragment2 I'm receiving this name setting it to my image and setting the setSharedElementEnterTransition

The result is that the enter animation works fine but the exit/return doesn't, I've tried setting them and not setting them (because I believe the navigation component should handle this for me) can anyone help?

MainActivity Navigation Setup

private void setNavigation() {
    navController = Navigation.findNavController(this, R.id.main_fragment);
    NavigationUI.setupActionBarWithNavController(this, navController);
}

Handling back button

@Override
public boolean onSupportNavigateUp() {
    return Navigation.findNavController(this, R.id.main_fragment).navigateUp()
        || super.onSupportNavigateUp();
}

BlankFragment OnClick

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

    NavController navController = Navigation.findNavController(recyclerView);

    FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder().addSharedElement(view, view.getTransitionName()).build();

    BlankFragmentDirections.ActionBlankFragmentToBlankFragment2 directions = BlankFragmentDirections.actionBlankFragmentToBlankFragment2(view.getTransitionName());

    navController.navigate(directions,extras);

}

BlankFragment2 onCreate with return/exit transition

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move));

    setExitTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.no_transition));

    setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move));

    getFragmentArguments();

}

Get Arguments Method

private void getFragmentArguments(){
    if (getArguments() != null){
        transitionName = BlankFragment2Args.fromBundle(getArguments()).getTransitionName();
        Log.d(TAG, "transition name " + transitionName);
    }
}

Set image transition name

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    image = view.findViewById(R.id.image);
    image.setTransitionName(transitionName);
    text = view.findViewById(R.id.text);

}

Philippopolis

I found out from here (https://mcmap.net/q/699036/-how-to-implement-shared-transition-element-from-recyclerview-item-to-fragment-with-android-navigation-component) that there is a open bug on this (issuetracker.google.com/issues/118475573) – Aulea

it is not a bug, but expected behaviour. The key is in waiting for view to settle up using postponeEnterTransition() and startPostponedEnterTransition(). See more: chris.banes.dev/2018/02/18/fragmented-transitions – Voroshilovgrad

Answer 1

Java

To Fix on return transition, use viewTreeObserver.addOnPreDrawListener

In BlankFragment (fragment with recycle view)

1. We need to call postponeEnterTransition(); so the transition will be pospone

2. Setup addOnPreDrawListener on recycleView as following

   RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
   //setup for recycle view adapter 
   
   ViewTreeObserver viewTreeObserver = recyclerView.getViewTreeObserver();
   viewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
       @Override
       public boolean onPreDraw() {
           startPostponedEnterTransition();
           return true;
       }
   });
   

That's it.

Follow this link to get more info on ViewTreeObserver follow this link

FIN !!

Repertoire

cant wait to check this out – Philippopolis

no joy, i actually started on something new (much simpler) that needed the same functionality and it still will not work – Philippopolis

This worked for me for the same issue. – Dolph