How to make shared transition animation from ViewPager to another Fragment?

Question

I have the next situation. Activity[FragmentWithPager[PageWithGrid]] and I want to make trandition animation from list item to DetailFragment but I don't know wnat I do wrong. I have added the same transitionName to views in list item and fragment detail layouts and try to make transition animatiot with the code below.

val fragmentTransaction = supportFragmentManager.beginTransaction()
transitionItems.forEach { view ->
    fragmentTransaction.addSharedElement(view, view.transitionName)
}

val fragment = DetailFragment()
val transitionSet = TransitionSet().apply {
     addTransition(ChangeTransform())
     addTransition(ChangeClipBounds())
     addTransition(ChangeBounds())
}
fragment.sharedElementEnterTransition = transitionSet
fragment.sharedElementReturnTransition = transitionSet

fragmentTransaction.replace(R.id.root, fragment)
fragmentTransaction.addToBackStack(null)
fragmentTransaction.commit()

Congratulations on getting your transitions to work. Why not create an answer yourself with an explanation what you had to change and select it as the correct answer (before your bounty ends)? I'm sure it will help others in the future too. — sunadorer, Apr 02 '18 at 19:02

Yuri Misyac · Accepted Answer · 2018-04-02T20:14:57.963

5

I found what I did wrong. Transition name must be unique for each item in list and page if you switch fragment with pager. Animation began to work when I have added page and list index to each transition name.

example project

edited Apr 02 '18 at 20:14

answered Apr 02 '18 at 20:06

Yuri Misyac

4,364
2
16
32

score 3 · Answer 2 · answered Mar 29 '18 at 01:13

Shared Element Transition API is a bit tricky and has some undefined behaviors, Even if you could manage to implement this, The transition wouldn't be smooth, Here's a work around that I've implemented a few month ago:

Instead of directly hosting the GridFragment inside the ViewPagerFragment add another Fragment as a container:

Activity[ViewPagerFragment[ContainerFragment[GridFragment]]]

Now you have a simple Fragment to Fragment Transition that works smoothly.

Here is the sample code in my github repo

Screen Shot

score 1 · Answer 3 · answered Mar 28 '18 at 03:13

The steps to implement a shared transition is to

make your transition animation.
Transition name in your xml view
Add SharedElement with the fragmentTransition Object along with the target view and the transition that to be performed.

you can have look for reference 1, 2, 3

score 0 · Answer 4 · answered Mar 31 '18 at 09:41

0

i have found this sample by google it is very helpful and it handles the fragments in a very pretty way google transition sample

hope it helps u

answered Mar 31 '18 at 09:41

Assem Mahrous

411
3
15

How to make shared transition animation from ViewPager to another Fragment?

4 Answers4