Shared Elements Transition with nested views

Question

I put together a simple sample app to try shared elements transition with nested views (source code on github). In this case it's an ImageView inside a CardView. I got the following results:

As you can see, while the parent view (CardView) animates nicely the child view (ImageView) doesn't. It looks like it animates from the upper left corner of the future position of the CardView.

The Adapter

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    final View v = mInflater.inflate(R.layout.grid_item, null);

    v.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent i = new Intent(new Intent(mContext, DialogActivity.class));
            ActivityOptions options = ActivityOptions
                    .makeSceneTransitionAnimation((Activity) mContext,
                            Pair.create(v, "background_transition"),
                            Pair.create(v.findViewById(R.id.image), "image_transition"));
            mContext.startActivity(i, options.toBundle());
        }
    });

    return v;
}

The original layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="1.5dp"
    android:transitionName="background_transition"
    card_view:cardBackgroundColor="@android:color/holo_red_dark">

    <com.tlongdev.sharedelementstest.SquareImageLayout
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="image_transition"
        android:src="@android:drawable/btn_star_big_on"/>

</android.support.v7.widget.CardView>

The target layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.tlongdev.sharedelementstest.DialogActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@android:color/holo_red_dark"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="10dp"
        android:transitionName="background_transition">

        <com.tlongdev.sharedelementstest.SquareImageLayout
            android:layout_margin="25dp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@android:drawable/btn_star_big_on"
            android:transitionName="image_transition" />

    </android.support.v7.widget.CardView>

</RelativeLayout>

Any help would be appreciated.

UPDATE 16/11/15: It looks like this issue has been solved on Marshmallow, but still present on Lollipop (on a emulator at least).

Take a look at transition group, that attribute allows you to animate `ViewGroup` as single entity in you Transition. — Nikola Despotoski, Nov 16 '15 at 00:55
@Nikola Despotoski Thanks, I'll take a look and will report back when I have the time — Longi, Nov 16 '15 at 15:34
@NikolaDespotoski I don't seem to be able to find it, can you point me in the right direction? — Longi, Nov 16 '15 at 19:12

Xjasz · Answer 1 · 2015-11-16T21:56:17.663

Remove the RelativeLayout if CardView is the only child.
Let me know if this works.

The target layout

<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:transitionName="background_transition"
    card_view:cardBackgroundColor="@android:color/holo_red_dark"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="10dp"
    tools:context="com.tlongdev.sharedelementstest.DialogActivity">

    <com.tlongdev.sharedelementstest.SquareImageLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="25dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:src="@android:drawable/btn_star_big_on" />
</android.support.v7.widget.CardView>

If the fade looks weird then use this.

The Adapter

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    final View v = mInflater.inflate(R.layout.grid_item, null);

    v.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
                Intent i = new Intent(new Intent(mContext, DialogActivity.class));
                ActivityOptions options = ActivityOptions
                    .makeSceneTransitionAnimation((Activity) mContext,
                            Pair.create(v, "background_transition"));
                mContext.startActivity(i, options.toBundle());
            }
        });

    return v;
}

This is not what I'm looking for. You changed the layout to make the cardview smaller and there are still visual artifacts. — Longi, Nov 16 '15 at 20:43
Does it animate the wrong way? I believe the visual artifacts happening because the animations are not synced and the margin can be easily added. I'll make some changes. — Xjasz, Nov 16 '15 at 21:09

Shared Elements Transition with nested views

1 Answers1