Combining Move Tranlation + Activity Transition Animation

Question

What I want to do:

Lets say I have an imageView in top right corner of the screen.

A. When I click on it it will move/translate to center of the screen

B. It should then animate into new activity using SharedElement Transition

I am able to do A using LINK and B using LINK

2 Questions

1. Am I doing it right

2. How to I combine A and B

After George's answers

v21/themes.xml

<resources>
<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementExitTransition">@transition/exit_slide_transition</item>
    <item name="android:windowSharedElementEnterTransition">@transition/enter_transition</item>

</style>
</resources>

exit_slide_transition.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds
        android:duration="1000"
        android:interpolator="@android:anim/linear_interpolator"/>
</transitionSet>

linear.xml (used by AnimationUtils.loadAnimation)

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="0"
        android:toYDelta="45%p"
        android:fromXDelta="0"
        android:toXDelta="45%p"
        android:duration="1000"/>
</set>

enter_transition.xml

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

Start Activity + moveImage():

//StartActivity:

    ActivityOptionsCompat options =
                    ActivityOptionsCompat.makeSceneTransitionAnimation(
                            activity, transitionView, EXTRA_IMAGE);
            Intent intent = new Intent(activity, DetailActivity.class);
            intent.putExtra(EXTRA_IMAGE, url);
            ActivityCompat.startActivity(activity, intent, options.toBundle());

//moveImage():

    RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams((int)getResources().getDimension(R.dimen.my_image_dp),(int)getResources().getDimension(R.dimen.my_image_dp));
layoutParams.addRule(RelativeLayout.CENTER_VERTICAL,RelativeLayout.TRUE);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL,RelativeLayout.TRUE);
imageView.setLayoutParams(layoutParams);

Answer 1

From what I read in the links, you are attempting to do the initial animation with Animators directly. It is possible to do this by using an Animator Listener (onAnimationEnd) to start the Activity, but I'm guessing that isn't what you are thinking.

The "correct" way is to use a SharedElementExitTransition to move the view before it transitions to the new Activity. You may use a ChangeTransform or ChangeBounds to move it, depending on the properties you modify(translation or position).

Essentially:

startActivity(intent, bundle);
moveImage();

That will cause the shared element's exit transition to run based on what you do in move image to put it in the final position. When it finishes, the launched activity will take it and move it to its final position using its shared element enter transition.

Edit:

It looks like you need to force the layout of the parent view if you just adjust the layout params. I'm not certain yet why that is necessary. After you call setLayoutParams, add this:

    View parent = (View) imageView.getParent();
    int widthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth(), View.MeasureSpec.EXACTLY);
    int heightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight(), View.MeasureSpec.EXACTLY);
    parent.measure(widthSpec, heightSpec);
    parent.layout(parent.getLeft(), parent.getTop(), parent.getRight(), parent.getBottom());

You could also get away with just changing the ImageView's left/top/right/bottom directly.