Having issues using Android 5.0 Activity transitions onto an activity with a ViewPager

Question

So we're trying to create an across activity image transition from an image in a ListView, to an image in a ViewPager gallery.In doing this transition we're seeing the animation happen before the ViewPager finishes loading/drawing. This causes the image on the ViewPager to flash making the animation look bad.

As a test we put an image overtop to fake the look of the ViewPager being loaded. We then transition from the image in the ListView to this 'dummy' ImageView, and then hide it after the transition is complete. This helped but still didn't create a smooth experience since things would flash once the ViewPager finished drawing.

Any tips would be appreciated!

Answer 1

Building off George Mount's answer, you could try adding the following code in your called Activity's onCreate() method:

postponeEnterTransition(); 
viewPager.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { 
    public boolean onPreDraw() { 
        viewPager.getViewTreeObserver().removeOnPreDrawListener(this);
        startPostponedEnterTransition();
        return true;
    }
});

Answer 2

Here are a few ideas:

You can delay the transition until the ViewPager activity is ready using Activity.postponeEnterTransition() in the ViewPager activity. When it is ready to start the transition, run Activity.startPostponedEnterTransition().

If you want the transition to happen quicker and the images are similar (not cropped differently), you can use the shared element snapshot and scale it. You can see an example of using the snapshot here: https://halfthought.wordpress.com/2014/12/10/reveal-challenge/

If the image in your calling Activity is cropped, but you have an uncropped image backing it (e.g. ImageView crops the image), you can override the onCaptureSharedElementSnapshot in the calling Activity to return the uncropped bitmap in the calling Activity. Then in your ViewPager Activity, you can use the onCreateSharedElementSnapshot to pick up that image for your transition.