What the heck is going on with this animation?

Question

I'm using the makeSceneTransitionAnimation API call from the Shared Element lib to share a image in the header of a collapsing toolbar to a detail view activity. Ignore the FAB's looking out of place, I plan on sliding them out part of an animation if I can get this to look better.

It looks horrendous: https://youtu.be/Js91TAvwrV0

Heres the code:

CollapsingToolbar Sender:

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void LollipopTransition(View v) throws IOException {
    Log.d("The Jones Theory", "LollipopTransition...");
    ImageView imgFavorite = (ImageView) findViewById(R.id.header);
    final View nestedContent = findViewById(R.id.nested_content);
    hideView(nestedContent);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(PostSelectedActivity.this, imgFavorite, "photo_hero").toBundle());
}

DetailView Receiver:

getWindow().getEnterTransition().addListener(new Transition.TransitionListener() {
        @Override
        public void onTransitionStart(Transition transition) {
        }

        @Override
        public void onTransitionCancel(Transition transition) {
        }

        @Override
        public void onTransitionPause(Transition transition) {
        }

        @Override
        public void onTransitionResume(Transition transition) {
        }

        @Override
        public void onTransitionEnd(Transition transition) {
            getWindow().getEnterTransition().removeListener(this);

            // load the full version, crossfading from the thumbnail image
            Ion.with(photoView)
                    .crossfade(true)
                    .deepZoom()
                    .load(PostImage);

        }

Answer 1

I recall having a similar problem. From some parts of the documentation it seems like changeImageTransform should be enough(and I think in some versions it does look fine) but try adding changeBounds to your transitionSet here to get this:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
<changeBounds/>
</transitionSet>

The documentation for changeImageTransform does now say

In combination with ChangeBounds, ChangeImageTransform allows ImageViews that change size, shape, or ImageView.ScaleType to animate contents smoothly.