Shared transition between activities using Picasso

Question

I have a problem with shared transitions when using Picasso to load images asynchronously. If I were to use a simple ImageView with a drawable it would work fine.

However when i use Picasso the returning animation does not scale the image properly.

You can see better the problem I describe in my github repo: https://github.com/brunoperezm/SharedTransitionsAsync

The code, which can also be seen on my repo, for the calling and called activity is as follows:

MainActivity.java

package com.example.sharedtransitionsasync;

import ...

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

//      getWindow().setSharedElementEnterTransition(new DetailsTransition());
        getWindow().setSharedElementReturnTransition(new DetailsTransition());


        imageView = findViewById(R.id.my_image_view1);
        Picasso.get()
                .load("https://i.redd.it/jb1okqafolg21.jpg")
                .fit()
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess () {
                        startPostponedEnterTransition();
                    }

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

    }

    public void gotoActivity2 (View view) {
        Intent intent = new Intent(this, Main2Activity.class);
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, "profile");
        startActivity(intent, optionsCompat.toBundle());
    }

    public class DetailsTransition extends TransitionSet {
        public DetailsTransition() {
            setOrdering(ORDERING_TOGETHER);
            addTransition(new ChangeBounds()).
                    addTransition(new ChangeTransform()).
                    addTransition(new ChangeImageTransform());
        }
    }

}

Main2Activity.java

package com.example.sharedtransitionsasync;

import ...

public class Main2Activity extends AppCompatActivity {
    ImageView imageView;
    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);


        getWindow().setSharedElementReturnTransition(new DetailsTransition());


        postponeEnterTransition();

        imageView = findViewById(R.id.my_image_view2);
        Picasso.get()
                .load("https://i.redd.it/jb1okqafolg21.jpg")
                .fit()
                .centerCrop()
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess () {
                        scheduleStartPostponedTransition(imageView);
                    }

                    @Override
                    public void onError (Exception e) {

                    }
                });
    }

    private void scheduleStartPostponedTransition(final View sharedElement) {
        sharedElement.getViewTreeObserver().addOnPreDrawListener(
                new ViewTreeObserver.OnPreDrawListener() {
                    @Override
                    public boolean onPreDraw () {
                        sharedElement.getViewTreeObserver().removeOnPreDrawListener(this);
                        startPostponedEnterTransition();
                        return true;
                    }
                });
    }

    @Override
    public void onBackPressed () {
        super.onBackPressed();
        supportFinishAfterTransition();
    }
    public class DetailsTransition extends TransitionSet {
        public DetailsTransition() {
            setOrdering(ORDERING_TOGETHER);
            addTransition(new ChangeBounds()).
            addTransition(new ChangeTransform()).
            addTransition(new ChangeImageTransform()).
            setDuration(5000);
        }
    }

}

Answer 1

in both of your xml's use this scaleType on the image views

android:scaleType="centerCrop"

then on the picasso calls for both activities, remove the .fit() and .centerCrop()

works great now on your git repo