title: Shared Element Transition + Fragment + RecyclerView + ViewPager
body: <p>I am implementing a gallery app, which has a Fragment that holds a RecyclerView with images, onClick of an image I go to ViewPager to cycle through images.<br>
  For now, I am trying to implement just the entry animation like in <a href="https://www.youtube.com/watch?v=SlmWd-45KtY" rel="noreferrer">this</a> video. The problem is the animation just doesn't work, I am obviously missing something (just showing code which is relevant to transitions):  </p>
  
  <p><strong>ViewPager:</strong></p>
  
  <pre><code>public class ViewPagerFragment extends Fragment {
      @Override
      public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
          View view = inflater.inflate(R.layout.fragment_viewpager, container, false);
          Transition transition = TransitionInflater.from(getContext()).inflateTransition(R.transition.fragment_transition);
  
          setSharedElementEnterTransition(transition);
          postponeEnterTransition();
          return view;
  }
  </code></pre>
  
  <p><strong>GridAdapter:</strong></p>
  
  <pre><code>public class GridAdapter extends RecyclerView.Adapter&lt;GridAdapter.ViewHolder&gt; {
  
      @Override
      public void onBindViewHolder(ViewHolder holder, int position) {
          holder.setPhotoImage(new File(mArrayOfPhotos.get(position).photo));
          ViewCompat.setTransitionName(holder.photoImage, mPhotoObjects.get(position).photo);
      }
  
      @Override
      public void onClick(View view) {
          // pass an image view that is being clicked... 
          // ...via listener to MainActivity from where ViewPagerFragment is started
          mListener.onImageSelected(photoImage, getAdapterPosition());
      }
  }
  </code></pre>
  
  <p>In MainActivity I instantiate ViewPagerFragment in onClick:</p>
  
  <pre><code>@Override
  public void onImageSelected(View view, int clickedImagePosition) {
      ViewPagerFragment fragment = new ViewPagerFragment();
      Bundle bundle = new Bundle();
      bundle.putInt(ViewPagerFragment.KEY_IMAGE_INDEX, clickedImagePosition);
      fragment.setArguments(bundle);
      FragmentManager fragmentManager = getSupportFragmentManager();
      FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
      // view is an image view that was clicked
      fragmentTransaction.addSharedElement(view, ViewCompat.getTransitionName(view));
      fragmentTransaction.setReorderingAllowed(true);
      fragmentTransaction.replace(R.id.fragment_placeholder, fragment, VIEWPAGER_FRAGMENT);
      fragmentTransaction.addToBackStack(null);
      fragmentTransaction.commit();
  }
  </code></pre>
  
  <p>And finally in ImageFragment(which is a single image in ViewPager) I have:  </p>
  
  <pre><code>@Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      mFullImage.setTransitionName(transitionName);
  
      Glide.with(getActivity())
              .load(myImage)
              .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL))
              .listener(new RequestListener&lt;Drawable&gt;() {
                  @Override
                  public boolean onLoadFailed(@Nullable GlideException e, Object model, Target&lt;Drawable&gt; target, boolean isFirstResource) {
                      getParentFragment().startPostponedEnterTransition();
                      return false;
                  }
  
                  @Override
                  public boolean onResourceReady(Drawable resource, Object model, Target&lt;Drawable&gt; target, DataSource dataSource, boolean isFirstResource) {
                      getParentFragment().startPostponedEnterTransition();
                      return false;
                  }
              })
              .into(mFullImage);
  
      return view;
  }
  </code></pre>
  
  <p>Transition name is not the problem, it is unique, and it is passed normally between all the fragments. I have followed <a href="https://android-developers.googleblog.com/2018/02/continuous-shared-element-transitions.html?m=1" rel="noreferrer">this</a> article and read many others, but it feels like a small bit is missing in my code.  </p>
  
  <p><strong>EDIT:</strong><br>
  I was able to localize the problem I think. The transition worked several times randomly, apparently, it happens because images are not ready when I am making the transition. I tried to call <code>postponeEnterTransition()</code> in MainActivity <code>onCreate</code> but still doesn't work. Images are passed to the <code>ImageFragment</code> through the Bundle. Still looking.  </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I believe I found the problem, I have a fragment, that has a <code>TabLayout</code> inside it, which has 2 fragments, one displaying all photos, and one displaying photos that are tagged as favorite. And they both use the same <code>RecyclerView</code>. The shared element transition works only if the photo is in one section at the same time, once I tag a photo as favorite it appears in all photos as well as favorite photos and the transition no longer works. It probably happens because the transition is no longer unique. Is there a way to solve this? Considering the fact that both fragments use the same <code>RecyclerView</code>, and the same adapter class.</p>