CODEWITHSUNDEEP
androidandroid-fragmentsshared-element-transition
SikhWarrior
SikhWarrior

Reputation: 1087

How to fade out non shared views in fragment transition?

I'm currently experimenting with shared element transitions with fragments and have the basic idea working. I have two very similar screens (see screenshots), and the shared transition works for the form, but the two buttons (login/social) do not gracefully transition, they just disappear when exiting, and reappear when entering. Is it possible to specify to these two view items to fade out and fade in during transitions?

Fragment A

 getActivity().getSupportFragmentManager().beginTransaction()
            .addSharedElement(btn_next, ViewCompat.getTransitionName(btn_next))
            .addSharedElement(et_email, ViewCompat.getTransitionName(et_email))
            .addSharedElement(ll_form, ViewCompat.getTransitionName(ll_form))
            .replace(R.id.fl_content, new LoginFragment())
            .addToBackStack(null)
            .commit();

Fragment B

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));

Screenshot

Upvotes: 2

Views: 1425

Answers (1)

SikhWarrior
SikhWarrior

Reputation: 1087

So after a bit more digging, I've learned that the non-shared views are referred to as transitioning views as stated here at AndroidDesignPatterns.com

A content transition determines how an activity’s non-shared views (also called transitioning views) enter or exit the activity scene.

and found on another article from the same website

setExitTransition() - A’s exit transition animates transitioning views out of the scene when A starts B.
setEnterTransition() - B’s enter transition animates transitioning views into the scene when A starts B.
setReturnTransition() - B’s return transition animates transitioning views out of the scene when B returns to A.
setReenterTransition() - A’s reenter transition animates transitioning views into the scene when B returns to A.

So this simple one line solved my problem.

setExitTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.fade));

Upvotes: 9

Related Questions