Shared Element With Scaletype Centercrop Transition Is Jumpy

I'm trying to implement a shared elements transition when 2 ImageViews from one screen go to the next screen. one of the images has a scaleType of centerCrop on both screen. The pr

Solution 1:

Finally, managed to solve this issue. desired result was achieved using the following code and configuration:

privatestaticvoidstartAnimatedTransitionIntent(Activity context, View view, ArticleCoverData articleCoverData) {
    Intentintent=newIntent(context, ReaderActivity.class);
    intent.putExtra(Constants.ARTICLE_DATA, articleCoverData);

    ViewcoverStartView= view.findViewById(R.id.coverImage);
    ViewcoverDiagonalDecoratorStartView= view.findViewById(R.id.diagonal_image_decorator);

    Windowwindow= context.getWindow();
    Viewdecor= window.getDecorView();
    ViewnavigationBarStartView= decor.findViewById(android.R.id.navigationBarBackground);

    List<Pair<View, String>> pairs = newArrayList<>();
    pairs.add(Pair.create(coverStartView, context.getString(R.string.transition_timeline_cover_image_to_reader_name)));
    pairs.add(Pair.create(coverDiagonalDecoratorStartView, context.getString(R.string.transition_timeline_cover_image_diagonal_decorator_to_reader_name)));

    if (navigationBarStartView != null) {
        pairs.add(Pair.create(navigationBarStartView, Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME));
    }

    ActivityOptionsCompatoptions= ActivityOptionsCompat.makeSceneTransitionAnimation(context, pairs.toArray(newPair[pairs.size()]));
    ActivityCompat.startActivity(context, intent, options.toBundle());
}

I'm loading the images into the image view using Picasso and the following code:

Picasso.with(mActivity).load(articleCoverData.mImageUrl).into(articleVH.coverImage);

On the receiving side I apply the image in the same way:

Picasso.with(mContext).load(mData.mImageUrl).into(mCoverImageView);

The style:

<stylename="AppTheme"parent="Theme.AppCompat.Light.NoActionBar"><itemname="android:statusBarColor">@color/app_red</item><itemname="android:windowContentTransitions">true</item><!-- This is the color of the Status bar --><itemname="colorPrimaryDark">@color/transparent</item><itemname="android:windowDrawsSystemBarBackgrounds">true</item><!--<item name="android:windowEnterTransition">@transition/cheeses_enter</item>--><!--<item name="android:windowExitTransition">@transition/cheeses_exit</item>--><itemname="android:windowSharedElementEnterTransition">@transition/cheeses_enter</item><itemname="android:windowSharedElementExitTransition">@transition/cheeses_exit</item></style>

both transitions: cheeses_enter and cheeses_exit are:

<?xml version="1.0" encoding="utf-8"?><transitionSet><changeBounds /><changeTransform /><changeClipBounds /><changeImageTransform /></transitionSet>

The important thing is to apply your scale type using the ImageView scaleType parameter and not using Picasso crop or Glide crop.

Because if you do that the the crop and the un-crop action would perform as part of the transition.

Solution 2:

I am facing the same issue and I already use dontAnimate() + dontTransform() in my Glide load request.

For me, my solution is to remove:

clipToPadding="false"clipChildren="false"

from my ImageView's container ViewGroup.

Those properties leave my image unclipped when using scaleType="centerCrop" during the Shared element transition.

Solution 3:

Just to give an answer (and a bit more explanation) for anyone bumping this problem.

First of all just using <changeImageTransform/> and <changeBounds/> is enough to make the transition.

The problem is mainly how Glide handles the imageview/drawable measurement over the time. There is some delay and for this reason no transition animation is created.

Picasso provides quick enough the values of the location of the image (matrix) based on scaletype and the transitions work.

Solution 4:

In your change_image_transform.xml, change to this

<?xml version="1.0" encoding="utf-8"?><transitionSetxmlns:android="http://schemas.android.com/apk/res/android"><changeImageTransform/><changeBounds/></transitionSet>