Picasso: Shared Element transition between 2 fragments

Question

I have a fragment with a recyclerview that has an ImageView where its photo is loaded using Picasso. When the recyclerview item is clicked, it will replace the current fragment with a new one that has a larger ImageView with the same image loaded using Picasso. I want to achieve shared element transition between those 2 fragments and I can't seem to find the in by googling. Any help is much appreciated.

Answer 1

I've been struggling with the same problem for the last several days, and finally got it, except I am using Glide, check out my question. I shared some code in there, but for Picasso, it will be similar. Basically, you prevent the shared element transition from happening straight away by postponing it until you are sure that the image is loaded, you use the Picasso Callback which will be triggered once the image loading is completed and you start your postponed transition there, something like that:

Picasso.with(mContext).load(image).resize(width,height)
                .error(R.drawable.error)
                .placeholder(R.drawable.placeholder)
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        startPostponedEnterTransition();
                    }

                    @Override
                    public void onError() {
                        startPostponedEnterTransition();
                    }
                });

You can learn more about postponing transitions in this article.

Of course, implementing Shared Element Transition involves other steps, part of which you will find in my questions, and the other parts in this article (pretty recent) and this one as well (it has 4 parts) Just to make sure, you fragments are not nested?

In case you have some questions after reading these articles I can share some code or explain as much as I can.