How to start shared element transition using Fragments?

Question

I am trying to implement transitions between fragments which have \"shared elements\" as described in the new material design specs. The only method I can find is the Activi

Answer 1

How to start shared element transition using Fragments?

I assume you want to transit your Image using Fragment (not using Activity)

Disclamer: it wont work perfectly if you have already set AppTheme

And please, keep the source transitionName and destination transitionName same

You have to do three things for transition:

1.Set transitionName to the source View -> in xml or programatically before calling makeFragmentTransition

private void setImageZoom(boolean isImageZoom) {
ImageView imageView = this.findViewById(R.id.image);
    if (isImageZoom) {
        imageView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewCompat.setTransitionName(imageView, "imageTransition");
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    makeFragmentTransition(imageView);
            }
            }
        });
    }
}

2.Fragment Transition

Set TransitionSet for the specicific Transition animation

apply them on Fragment

call addSharedElement(View, transitionName) while fragmentTransition

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
public void makeFragmentTransition(ImageView sourceTransitionView) {
    //transtionName for sourceView  
    //MUST set transitionName before calling this method(programattically or give ->transitionName to the view in xml)
    String sourceTransitionName = ViewCompat.getTransitionName(sourceTransitionView);

    TransitionSet transitionSet = new TransitionSet();
    transitionSet.setDuration(500);
    transitionSet.addTransition(new ChangeBounds());  //to expand boundaries
    transitionSet.addTransition(new ChangeTransform()); //for transtion vertically
    transitionSet.addTransition(new ChangeImageTransform()); // image transform work 
    transitionSet.setOrdering(TransitionSet.ORDERING_TOGETHER);  // all three work together to look one task

    ImageTransitionFragment fragment = new ImageTransitionFragment();
    fragment.setSharedElementEnterTransition(transitionSet);
    fragment.setSharedElementReturnTransition(transitionSet);
    fragment.setAllowReturnTransitionOverlap(false);

    try {

        getHostActivity().getSupportFragmentManager()
                .beginTransaction()
                //sharedElement is set here for fragment 
                //it will throw exception if transitionName is not same for source and destionationView
                .addSharedElement(sourceTransitionView, sourceTransitionName)
                //R.id.fragmentView is the View in activity on which fragment will load...
                .replace(R.id.fragmentView, fragment)
                .addToBackStack(null)
                .commit();
    } catch (Exception e) {
        //
        String string = e.toString();
    }
}

3.Last Set destionation transition Name with sourceTransitionName -> imageTransition

so add transitionName in ImageView of ImageTransitionFragment

Please respond if anything is not clear or it need more improvement