Define shared element motion in Activity transition

Question

I would like to define a transition between two Activity. My goal is to share an image and two text between the Activities, but I want to define arc motion for the texts (and keep the changeBounds for the image).

I set the styles up with the following:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    <item name="android:windowActivityTransitions">true</item>
    <item name="android:windowContentTransitions">true</item>

    <item name="android:windowSharedElementsUseOverlay">false</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
</style>

<style name="AppTheme.DetailActivity" parent="AppTheme">
    <item name="android:windowExitTransition">@transition/detail_exit</item>
    <item name="android:windowEnterTransition">@transition/detail_enter</item>

    <item name="android:windowSharedElementEnterTransition">@transition/detail_shared_enter</item>
    <item name="android:windowSharedElementExitTransition">@transition/detail_shared_exit</item>
</style>

I start the DetailActivity like this:

                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,
                Pair.create(findViewById(R.id.image), "image"),
                Pair.create(findViewById(R.id.text), "text"));
            Intent intent = new Intent(MainActivity.this, DetailActivity.class);
            startActivity(intent, options.toBundle());

The problem is, that this detail_shared_enter doesn't apply to the animation:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="@android:integer/config_mediumAnimTime">

<arcMotion android:minimumHorizontalAngle="45"
           android:minimumVerticalAngle="45">
    <targets>
        <target android:targetId="@id/image2"/>
    </targets>
</arcMotion>

<autoTransition>
    <targets>
        <target android:excludeId="@id/image2"/>
    </targets>
</autoTransition>
</transitionSet>

With this, the shared elements just appear on their final position, without any kind of animation. The windowEnterTransition works.

Thank you for the help in advance!

UPDATE: I figured out the solution based on this tutorial: https://blog.stylingandroid.com/curved-motion-part-1/

The solution is the following:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
           android:transitionOrdering="together">

<changeBounds>
    <targets>
        <target android:excludeId="@id/image2"/>
    </targets>
</changeBounds>

<changeBounds>
    <targets>
        <target android:targetId="@id/image2"/>
    </targets>

    <arcMotion android:maximumAngle="90"
               android:minimumHorizontalAngle="90"
               android:minimumVerticalAngle="0"/>
</changeBounds>

</transitionSet>

You have to define the animation which exlcudes the ones you'll define later.
You put the arcMotion INSIDE the changeBounds.
The most important: Ignore the "arcMotion is not allowed here" weak warning!

Define shared element motion in Activity transition

0 Answers0