Animate ImageView between two activities using shared element transitions with ChangeImageTransform

iForests picture iForests · Oct 28, 2014 · Viewed 25.3k times · Source

I am trying to animate one ImageView to another position between two activities in Android API level 21. Since "MoveImage" in Android L Preview has been removed, I use "ChangeImageTransform" instead, but the sample code in documents doesn't work out (the two images animated separately).

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

Is there any working example? Thanks!

Answer

Yi-Ping Shih picture Yi-Ping Shih · Oct 28, 2014

To make a screen transition animation between two activities that have a shared element, you can read this article and follow the mentioned steps:

  1. Enable window content transitions in your theme.
  2. Specify a shared elements transition in your style.
  3. Define your transition as an XML resource.
  4. Assign a common name to the shared elements in both layouts with the android:transitionName attribute.
  5. Use the ActivityOptions.makeSceneTransitionAnimation() method.

About the 3rd step, according to the documentation:

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

The res/transition/your_transition.xml should be like this:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeBounds>
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

or simply like this if only ivA and ivB need to be animated:

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