Shared element transition between replaced views

Question

I have a view that I'm removing with removeView(), and then a view that is replacing it with an addView(). Both of these views are within a FrameLayout. I would like to be able to do a Shared Element Transition between two shared images in these layouts, but don't really know how to go about doing that as the android tools seems to be built with the (perhaps reasonable) idea that you will only have shared element transitions between activities or fragments.

My best idea at the moment is to do my own attempt at the animation. I'd do that by drawing a copy of the image onto a viewOverlay, removing the first view, adding the second view visible animating it to the position in the second view and then making the second view visible. I'm going to try that route and answer my own question if it works, but I was hoping to find a more native way of doing this.

score 5 · Answer 1 · edited May 23 '17 at 12:24

My idea of attempting my own animation was definitely the wrong route (although it did work). I found that in some ways having shared content is actually easier if you have views that are being replaced. Most the documentation is around using transitions with activities and fragments, but at their core they are really built around changing views.

This post http://blog.stylingandroid.com/transition-animation-part-1/ was a big help to me.

Essentially what I'm doing is:

            // above I've gotten the sharedElements (Views)...
            newSharedElement.setTransitionName("sharedProperty");
            oldSharedElement.setTransitionName("sharedProperty");
            // having android:transitionName in the xml can be easier

            // This transition handles the shared element move based on the shared tansition name
            Transition shared = TransitionInflater.from(context).inflateTransition(android.R.transition.move);
            shared.addTarget(newSharedElement);

            // create a scene container is a parentView (FrameLayout) of both children
            Scene scene = new Scene(container, newChild);

            // everything else is set to Fade, shared element is excluded
            Transition fade = TransitionInflater.from(context).inflateTransition(android.R.transition.fade);
            fade.excludeTarget(newSharedElement, true);

            // combine the translations
            TransitionSet set = new TransitionSet();
            set.addTransition(shared).addTransition(fade);

            // translationize
            TransitionManager.go(scene, set);

Android allows quite a few ways of doing each step of the transition so lots of options if this isn't quite right for your use case.

Credit to Shared Element Transitions Between Views (not Activities or Fragments), for help as well.

Shared element transition between replaced views

1 Answers1