Switching shared GridViews to ViewPager using Fragments / Fragments.

I have the following view structure:

• One event
• The action contains one snippet with a ViewPager and some other things.
• Each page contains a snippet
• One page fragment contains a GridView
• When an item in the GridView is listened to, I replace the top-level fragment with another fragment in order to display the GridView images in full screen. This snippet also has a ViewPager where each page is an ImageView.

When I click one image in the grid, I can display a full screen slice and show the correct image. The user can then scroll left / right to view other images.

The structure looks like this:

-Activity
--MasterFragment
---ViewPager
----GalleryFragment
-----GridView
------ImageView

      

        
        
        
      

    

After replacing the fragment in FragmentTransaction, it looks like this:

-Activity
--GalleryFullscreenFragment
---ViewPager
----ImageView

      

        
        
        
      

    

From my GalleryFragment, I am using the following code to show my full screen gallery:

 GalleryFullscreenFragment fragment = new GalleryFullscreenFragment();
 Bundle args = new Bundle();
 args.putStringArrayList(ARG_IMAGES, images); //ArrayList<String> 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();

      

        
        
        
      

    

Now I would like to implement general element transitions by going from the selected ImageView in the GridView in the GalleryFragment to the ImageView in the ViewPager in the GalleryFullscreenFragment.

I tried to implement the transitionName property via xml which didn't work at all. Instead, I now use my adapter classes to set the appropriate transition name on the images:

//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);
    ...
}

      

        
        
        
      

    

Finally, before executing my FragmentTransaction, I set a generic element like

ImageView image = (ImageView) view.findViewById(R.id.image_view);
... //Setup the transaction
transaction.addSharedElement(image, image.getTransitionName());
transaction.commit;

      

        
        
        
      

    

Now something really weird. Sometimes the transition just works the way you expect it to. Sometimes it doesn't work at all and sometimes the looks end up everywhere but where they should be.

After some research, I think I have found the reason for this. From what I can tell, the problem is that the adapters are sometimes not ready when the transition occurs (not sure if I understood this correctly). So sometimes the animations get messed up.

The next thing I am using the Picasso library is to load images into image views.

The big question is: How do I animate the image views correctly so that I get a nice transition to the overall element?