I have a recyclerview displaying some images in a grid. When I click one of these images I add a new fragment with the image as the shared element. I also use the explode transition to move the other items in the recyclerview off screen. When I add the fragment the transitions run fine and the image scales to full screen. When I pop the back stack the animations dont run in reverse as I though they would. The shared elements scale and translates from the wrong position on screen. I dont have any problems if I use another transition such as fade.
Here is the grid fragment where I add the detail fragment.
public class GridFragment extends Fragment implements ItemAdapter.BobbleClickListener {
@Bind(R.id.image_recycler_view)
RecyclerView mImageRecycler;
public static GridFragment newInstance(int imageArrayResource, int titlesArrayResource) {
GridFragment fragment = new GridFragment();
Bundle args = new Bundle();
args.putInt("KEY_IMAGES", imageArrayResource);
args.putInt("KEY_TITLES", titlesArrayResource);
fragment.setArguments(args);
return fragment;
}
public GridFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_grid, container, false);
ButterKnife.bind(this, root);
Bundle args = getArguments();
int imageArrayResource = args.getInt("KEY_IMAGES");
int titlesArrayResource = args.getInt("KEY_TITLES");
ItemAdapter mainAdapter = new ItemAdapter(getActivity(), this, imageArrayResource, titlesArrayResource);
mImageRecycler.setHasFixedSize(true);
mImageRecycler.setLayoutManager(new GridLayoutManager(getActivity(), 4));
mImageRecycler.setAdapter(mainAdapter);
return root;
}
@Override
public void onBobbleClick(ImageView imageView, int resource) {
setExitTransition(new Explode());
DetailFragment detailFragment = DetailFragment.newInstance(resource, imageView.getTransitionName());
detailFragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.anim.trans_move));
FragmentTransaction trans = getActivity().getSupportFragmentManager().beginTransaction();
trans.replace(R.id.content, detailFragment);
trans.addSharedElement(imageView, imageView.getTransitionName());
trans.addToBackStack(null);
trans.commit();
}
}
Here is the detail fragment
public class DetailFragment extends Fragment {
@Bind(R.id.detail_iv)
ImageView mImageView;
public static DetailFragment newInstance(int imageResource, String transitionName){
DetailFragment fragment = new DetailFragment();
Bundle args = new Bundle();
args.putInt("RESOURCE_KEY", imageResource);
args.putString("RESOURCE_TRANSITION_NAME", transitionName);
fragment.setArguments(args);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_detail, container, false);
ButterKnife.bind(this, root);
mImageView.setTransitionName(getArguments().getString("RESOURCE_TRANSITION_NAME"));
mImageView.setImageResource(getArguments().getInt("RESOURCE_KEY"));
return root;
}
}
Here is my shared element transition set trans_move
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds/>
<changeTransform/>
<changeClipBounds/>
<changeImageTransform/>
</transitionSet>
This is the problem below