My application main screen contains a grid view of images. When the user selects an image, a detail activity is started using a shared element transition that animates the selected grid image to a paired image located in a CardView in the detail activity.
After upgrading my detail view XML layout to include a CoordinatorLayout along with a CollapsingToolbarLayout, the shared element transition moves the image view to the wrong location in the detail activity (the "enter" activity). The framework seems to ingore the offset of the entire AppBarLayout and inner CollapsingToobarLayout and animates to the approximate position the image would be if there were no CollapsingToolBarLayout above the CardView that contains the target image view.
The problem can be duplicated in Chris Banes' cheesesquare sample app by adding an ImageView (with a transitionName) to any one of the 3 CardViews in activity_detail.xml:
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:transitionName="sharedImage" />
and then setup a shared element transition in onBindViewHolder in CheeseListFragment.java as follows:
@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
holder.mBoundString = mValues.get(position);
holder.mTextView.setText(mValues.get(position));
holder.mView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Context context = v.getContext();
Intent intent = new Intent(context, CheeseDetailActivity.class);
intent.putExtra(CheeseDetailActivity.EXTRA_NAME, holder.mBoundString);
holder.mImageView.setTransitionName("sharedImage");
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(
getActivity(v.getContext()),
holder.mImageView,
"sharedImage");
ActivityCompat.StartActivity((MyActivity) context, intent, options.toBundle());
}
});
Glide.with(holder.mImageView.getContext())
.load(Cheeses.getRandomCheeseDrawable())
.fitCenter()
.into(holder.mImageView);
}
If you run the application, and click on a cheese list item, you will how the transition animation moves the image to an incorrect (too high) offset in the destination activity view. Once the animation completes the image will appear to "warp" into the correct position.
Any thoughts on possible work-arounds would be very welcome.
