0

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

enter image description here

Eoin
  • 4,050
  • 2
  • 33
  • 43

0 Answers0