title: GridView to ViewPager shared element transition with Fragments / FragmentTransaction
body: <p>I have the following view structure:</p>
  
  <ul>
  <li>One Activity</li>
  <li>The Activity contains one Fragment with a ViewPager and some other stuff</li>
  <li>Each page contains a Fragment</li>
  <li>One pages Fragment contains a GridView</li>
  <li>When the an item in the GridView is tapped, I replace the top level fragment with another fragment to show the images of the GridView in full screen. This Fragment has a ViewPager as well where each page is a ImageView. </li>
  </ul>
  
  <p>When I tap on one image in the grid, i can display the fullscreen fragment and show the proper image. The user then can swipe left/right to view the other images.</p>
  
  <p>The structure looks like:</p>
  
  <pre><code>-Activity
  --MasterFragment
  ---ViewPager
  ----GalleryFragment
  -----GridView
  ------ImageView
  </code></pre>
  
  <p>After I replace the Fragment in a FragmentTransaction it looks like:</p>
  
  <pre><code>-Activity
  --GalleryFullscreenFragment
  ---ViewPager
  ----ImageView
  </code></pre>
  
  <p>From my GalleryFragment I use the following code to show my fullscreen gallery:</p>
  
  <pre><code> GalleryFullscreenFragment fragment = new GalleryFullscreenFragment();
   Bundle args = new Bundle();
   args.putStringArrayList(ARG_IMAGES, images); //ArrayList&lt;String&gt; containing urls
   args.putInt(ARG_POSITION, position); //Selected image position
   fragment.setArguments(args);
  
   getActivity().getSupportFragmentManager()
               .beginTransaction()
               .replace(R.id.drawer_content, fragment)
               .addToBackStack(null)
               .commit();
  </code></pre>
  
  <p>I now would like to implement shared element transitions by transition from the selected ImageView in the GridView in the GalleryFragment to the ImageView in the ViewPager in the GalleryFullscreenFragment. </p>
  
  <p>I tried to implement the transitionName property via xml which did not work at all. Instead I now use my adapter classes to set the appropriate transitionName on the imageviews:</p>
  
  <pre><code>//ArrayAdapter in GalleryFragment used for GridView
  public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
      ...
      imageView.setTransitionName("image" + position);
      ...
  }
  
  //PagerAdapter in FullscreenGalleryFragment used for ViewPager
  public Object instantiateItem(ViewGroup container, int position) { 
      ...
      imageView.setTransitionName("image"+position);
      ...
  }
  </code></pre>
  
  <p>Finally before committing my FragmentTransaction, I set the shared element like</p>
  
  <pre><code>ImageView image = (ImageView) view.findViewById(R.id.image_view);
  ... //Setup the transaction
  transaction.addSharedElement(image, image.getTransitionName());
  transaction.commit;
  </code></pre>
  
  <p>Now something really strange happens. Sometimes, the transition just works as you would expect it. Sometimes it doesn't work at all and sometimes views end up everywhere except where they should be.</p>
  
  <p>After some research I think I found the reason for this. From what I can tell the issue is that the adapters are sometimes not ready when the transition takes place (not sure if I understood this correctly). So sometimes the animations get messed up.</p>
  
  <p>The next thing is, that I'm using the Picasso library to load images into the image views.</p>
  
  <p><strong>The big question is:</strong> How to properly animate the image views so I get a nice shared element transition?</p>