I'm trying to create a transition between a RecyclerView with a GridLayoutManager and a fragment. The grid shows user pictures thumbnails and when i tap the thumbnail it shows the details of the user. However, when i tap the thumbnail and show the details, the transition always starts from the top left of the screen instead of the thumbnail position.
How can i make the transition start from the thumbnail position?
This is the result i want:
And this is what i got:
And this is my code:
// UsersAdapter.kt
override fun onBindViewHolder(holder: UserViewHolder, position: Int) {
ViewCompat.setTransitionName(holder.itemView.picture, "picture_$position")
}
// MasterFragment.kt
// This is called when i click an item in the grid
itemClickSubject.subscribe { position ->
val user = users[position]
val transitionName = "picture_$position"
fragmentManager
?.beginTransaction()
?.addSharedElement(picture, transitionName)
?.replace(R.id.content, DetailsFragment.create(user, transitionName))
?.addToBackStack(null)
?.commit()
}.addTo(disposables)
// DetailsFragment.kt
class DetailsFragment : Fragment() {
companion object {
fun create(user: User, transitionName: String): DetailsFragment {
val args = Bundle()
args.putParcelable("user", user)
args.putString("transition_name", transitionName)
val fragment = DetailsFragment()
fragment.arguments = args
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
fragment.sharedElementEnterTransition = ChangeBounds()
fragment.sharedElementReturnTransition = ChangeBounds()
}
return fragment
}
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.fragment_details, container, false).apply {
val transitionName = arguments?.getString("transition_name", "")
ViewCompat.setTransitionName(findViewById(R.id.picture), transitionName)
}
}
}

