SharedElement transition leaving white image on return (using Navigation)

Issue

I have a RecyclerView (contained in a ViewPager) containing images and I would like to display them in full screen, with a shared element transition, when the user clicks on it. I have successfully implemented a shared element transition between my two fragments but when I click on return the ImageView where I clicked is white.

In my onBindViewHolder method I have:

 holder.picturePost.setOnClickListener(v -> {
                NavDirections action = ProfileFragmentDirections.viewPostDetails(post);
                v.setTransitionName(post);
                FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder().addSharedElement(v, post).build();
                Navigation.findNavController(v).navigate(action, extras);
            });

My destinitation fragment is OpenPostFragment:

public class OpenPostFragment extends Fragment {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        postponeEnterTransition();
        setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
        setSharedElementReturnTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.post_card_fragment, container, false);
        Bundle args = getArguments();
        if (args != null) {
            ImageView picturePost = root.findViewById(R.id.picturePost);
            String imagePath = args.getString("imagePath");
            picturePost.setTransitionName(imagePath);
            Glide.with(picturePost)
                    .load(imagePath)
                    .dontTransform()
                    .listener(new RequestListener<Drawable>() {
                        @Override
                        public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                            startPostponedEnterTransition();
                            return false;
                        }

                        @Override
                        public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                            startPostponedEnterTransition();
                            return false;
                        }
                    })
                    .into(picturePost);
        }
        return root;
    }
}

Solution

I finally solved my issue. The fact that my RecyclerView was in a ViewPager was causing trouble. To solve my issue I had to add the following code to the fragment where I initialize my ViewPager :

postponeEnterTransition();
ViewTreeObserver.OnPreDrawListener onPreDrawListener = new ViewTreeObserver.OnPreDrawListener() {
     @Override
     public boolean onPreDraw() {
           mPager.getViewTreeObserver().removeOnPreDrawListener(this);
           startPostponedEnterTransition();
           return true;
     }
};
mPager.getViewTreeObserver().addOnPreDrawListener(onPreDrawListener);

Answered By - Paul Souteyrat