Shared Element Transition on CardView with radius

Question

I\'ve been working on this problem for weeks and I\'m still unable to solve this problem.

So, I have a CardView that contains a LinearLayout with an ImageView.

Answer 1

I finally able to solve it. For those who are interested, here's how:

Why it remove radius before starting transition? Because the target ImageView doesn't have any radius.

activity_detail.xml

When I use CardView without radius, it's not noticable, but it's actually turned into target Shared View.

2. To achieve radius to no-radius transition you have to set the target Shared View to be rounded. I'm simply wrap it using a Card View (with radius).

activity_detail.xml

3. Be sure to change your makeSceneTransition to use "card" instead of "animalImage"

ListActivity.class

ActivityOptionsCompat option = ActivityOptionsCompat
.makeSceneTransitionAnimation(ListActivity.this, cardView, "card");

startActivity(intent, option.toBundle());

4. In the DetailActivity, you can start a radius animation when the transition start.

DetailActivity.java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().getSharedElementEnterTransition()
        .addListener(new Transition.TransitionListener() {
            @Override
            public void onTransitionStart(Transition transition) {
                ObjectAnimator animator = ObjectAnimator
                    .ofFloat(activityDetailBinding.card, "radius", 0);
                animator.setDuration(250);
                animator.start();
            }
        });
}

5. Enjoy the smooth transition

Note: gist for layout and activities