Circular to Rectangle ImageView Shared Element Transition

Question

I have a square ImageView in Activity "A". I made it round using clipping background.

<com.app.customview.SquareWidthFitImageView
    android:id="@+id/imageview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/round_circle"
    android:layout_margin="@dimen/keyline_8dp"
    android:scaleType="centerCrop"
    android:transitionName="@string/image_source"/>

This is how I clipped it to Circular shape.

mImageView.setClipToOutline(true);

I have Activity "B" with another ImageView (ratio 3:2)

<com.app.customview.ThreeTwoImageView
    android:id="@+id/detail_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:scaleType="centerCrop"
    android:src="@drawable/placeholder"
    android:transitionName="@string/image_target"/>

I am using shared element transition animation on this ImageView when I go from Activity "A" to Activity "B".

However, my animation is not a smooth transition from circular to rectangle image. When I go from Activity "A" to Activity "B", the circular image changes to rectangle image and then animates to its final position. Similarly when I press back and come back to Activity "A", the rectangle image animates to smaller rectangle (of the size of circular image) image and then that smaller rectangle becomes circular.

Activity "B" theme is

<style name="Detail" parent="AppTheme">
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">false</item>
    <item name="android:windowSharedElementsUseOverlay">false</item>
    <item name="android:windowEnterTransition">@transition/detail_enter</item>
    <item name="android:windowReturnTransition">@transition/detail_return</item>
</style>

detail_enter.xml

<?xml version="1.0" encoding="utf-8"?>

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android">

<transitionSet>
    <!-- Dont apply this animation on below views -->
    <targets>
        <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
        <target android:excludeId="@id/detail_image" />
    </targets>
    <!-- Slide from bottom all the transitioning views -->
    <transition
        class="android.transition.Slide"
        android:duration="500"
        android:interpolator="@android:interpolator/linear_out_slow_in" />
    <!-- Delay fading in so that the shared element transition on the background
         has time to run -->
    <fade
        android:startDelay="150"
        android:duration="350"
        android:interpolator="@android:interpolator/linear" />
</transitionSet>

<!-- Fade animation on system bars -->
<fade
    android:duration="500"
    android:interpolator="@android:interpolator/linear">
    <targets>
        <target android:targetId="@android:id/statusBarBackground" />
        <target android:targetId="@android:id/navigationBarBackground" />
    </targets>
</fade>

</transitionSet>

detail_return.xml

<?xml version="1.0" encoding="utf-8"?>

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Rapidly fade out all non-shared-element content with a slight downward shift -->
<transitionSet>
    <targets>
        <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
    </targets>
    <fade
        android:duration="48"
        android:interpolator="@android:interpolator/fast_out_linear_in" />
    <slide
        android:slideEdge="bottom"
        android:duration="250"
        android:interpolator="@android:interpolator/fast_out_linear_in" />
</transitionSet>

</transitionSet>

How can I do smooth shared element transition where circular image morphs to rectangular image?

Answer 1

Keep all the code same and add this code to Activity B:

Activity B

onCreate(...){
super.onCreate(...);

ChangeClipBounds changeClipBounds = new ChangeClipBounds();
changeClipBounds.addTarget(R.id.detail_image);

getWindow().setSharedElementEnterTransition(changeClipBounds);

setContentView(...)
}