Apply a transitionSet to a single View in a Fragment content transition produces duplicated view effect

Question

My goal is to create a content transition between fragments where a Fade() and an Slide() are applied to only one of the views on the fragment. When performing the transition (exitTransition in this case), the visual effect is, instead of the view sliding and fading at the same time, the view gets duplicated and one copy slides and another fades.

Some code:

Fragment currentFragment = getSupportFragmentManager().getFragments().get(0);
Fragment fragment = EmailSearchFragment.newInstance();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    fragment.setEnterTransition(new Slide(Gravity.RIGHT)); 
    currentFragment.setExitTransition(TransitionInflater.from(this).inflateTransition(R.transition.slide_and_fade));             
}

getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.fragment_container, fragment)
    .addToBackStack(null)
    .commit();

And here the Transition:

public class DetailsTransition extends TransitionSet {
    public DetailsTransition() {
        init();
    }

    /**
     * This constructor allows us to use this transition in XML
     */
    public SlideAndFadeTransitionSet(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrdering(ORDERING_TOGETHER);
        addTransition(new Fade()).
        addTransition(new Slide(Gravity.TOP));
    }
}

And, here the xml targeting one single view for the transition:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" class="com.adidas.connect.app.transition.DetailsTransition">
    <targets>
        <target android:targetId="@id/social_buttons"/>
    </targets>
</transition>

I have also tried to use a transition set in the XML, but I got the same result, so I moved the transition set to a new class to be sure that there was no problem with xml syntax targeting one single view.

Does anybody made this work?

Thanks in advance!

Answer 1

As a workaround, I created my own CustomTransitions where the two effects where applied:

public class Stack extends Visibility {

    public Stack(Context context, AttributeSet attributteSet) {
        super(context, attributteSet);
    }

    @Override
    public Animator onDisappear(ViewGroup sceneRoot, View view,
                                TransitionValues startValues, TransitionValues endValues) {
        if (startValues == null) {
            return null;
        }

        Animator slideTop = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, 0, -sceneRoot.getHeight());
        Animator fadeOut = ObjectAnimator.ofFloat(view, View.ALPHA, 1, 0);

        AnimatorSet animSet = new AnimatorSet();
        animSet.play(slideTop)
                .with(fadeOut);

        return  animSet;
    }

    @Override
        public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
        ...
    }
}

Now It's working.