Search code examples
androidandroid-5.0-lollipopshared-element-transitionactivity-transition

Animate ImageView between two activities using shared element transitions with ChangeImageTransform


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!


Solution

  • 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>