使用共享元素的Android片段转换

Question

everyone! I have 2 fragments. In one fragment i have a little image in card. In 2d fragment i have the same image in the header of my layout. I want to make shared element transition of this image from one fragment to another like in this example http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s1600/activity_transitions%2B(1).gif

2d fragment:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f2f4f7">
<CustomScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#f2f4f7">
    <LinearLayout
        android:id="@+id/content_wrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:divider="@drawable/vertical_divider"
        android:showDividers="middle">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:id="@+id/header_wrapper"
                android:layout_width="match_parent"
                android:layout_height="166.7dp">
                <ImageView
                    android:id="@+id/share_image"
                    android:transitionName="imageTransition"
                    android:layout_width="match_parent"
                    android:layout_height="166.7dp"
                    android:src="@drawable/friday"/>

1st fragment:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_marginTop="56dp"
android:background="#ff1e1e23">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:src="@drawable/menuicon1g"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:gravity="center"
    android:textColor="#fff"
    android:textSize="22sp"/>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="300dp"
    android:layout_marginTop="25dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="#fff"
    card_view:cardElevation="2dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal">
        <ImageView
            android:id="@+id/share_image"
            android:transitionName="imageTransition"
            android:layout_width="match_parent"
            android:layout_height="92.5dp"
            android:src="@drawable/friday"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:src="@drawable/demo_calendar"/>
        <com.zagum.work.virtualfitness.CustomTextView
            xmlns:com.zagum.work.virtualfitness="http://schemas.android.com/apk/res/com.zagum.work.virtualfitness"
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_marginTop="10dp"
            com.zagum.work.virtualfitness:typeface="fonts/Roboto-Light.ttf"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="40dp"
            android:gravity="center"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textSize="18sp"
            android:textStyle="bold"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

Transaction:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                View image = mRootView.findViewById(R.id.share_image);

                CurrentWorkoutFragment secondFragment = CurrentWorkoutFragment.newInstance();
                secondFragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.transition_move));

                FragmentTransaction trans = getFragmentManager().beginTransaction();
                trans.replace(R.id.container, secondFragment);
                trans.addToBackStack(null);
                trans.addSharedElement(image, image.getTransitionName());
                trans.commit();
            }

transition_move.xml

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

But no image animation happens. It appears in the top left corner an resizes.

Answer 1

Check out this answer.

Because the view I'm sharing between 2 fragments is a child of another view (RelativeLayout) in the 2nd fragment, you need to add the ChangeTransform transition to your TransitionSet.

Basically what you need is to add a <changeTransform/> in your transition_move.xml