Split views during the shared element transition between fragments

Question

I'm trying to animate the transition between fragments.

But at the beginning of transition views are separated

Please tell me how to avoid this? It is necessary that the first views disappeared at the beginning of movement. Thank you!

@Override
public void onClickMessage(DialogItem item, View view) {
    setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.change_image_transform));
    setExitTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.fade));

    DetailsFragment fragment = new DetailsFragment();
    fragment.setDialog(item);
    fragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.change_image_transform));
    fragment.setEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.fade));

    View ava = view.findViewById(R.id.ivPhoto);
    ava.setTransitionName(DetailsFragment.AVA_TRANS);

    View name = view.findViewById(R.id.tvName);
    name.setTransitionName(DetailsFragment.NAME_TRANS);

    FragmentTransaction ft = getFragmentManager().beginTransaction()
            .replace(R.id.container, fragment)
            .addToBackStack(null)
            .addSharedElement(ava, DetailsFragment.AVA_TRANS)
            .addSharedElement(name, DetailsFragment.NAME_TRANS);
    ft.commit();

}

Answer 1

Seems like you have just 1 view used for shared element transition. You have to separate your views in layout - ImageView for icon and TextView for "Crazy Smile" text. Having that, you can specify 2 elements for shared elements transition. Then they will fly separately.

Nice explanation transition animations of can be found here (step-by-step).