GridView to ViewPager shared element transition with Fragments / FragmentTransaction

Question

I have the following view structure:

One Activity
The Activity contains one Fragment with a ViewPager and some other stuff
Each page contains a Fragment
One pages Fragment contains a GridView
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.

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.

The structure looks like:

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

After I replace the Fragment in a FragmentTransaction it looks like:

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

From my GalleryFragment I use the following code to show my fullscreen 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();

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.

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:

//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 committing my FragmentTransaction, I set the shared element like

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

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.

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.

The next thing is, that I'm using the Picasso library to load images into the image views.

The big question is: How to properly animate the image views so I get a nice shared element transition?

GridView to ViewPager shared element transition with Fragments / FragmentTransaction

0 Answers0