Material-components-android: [Container transform] FADE_MODE_THROUGH flag not working as expected

[ujjwalgoyal]

Description: Full description of issue here
I am using share element container transform for the transition between activity.
My requirement was to fade out outgoing content for half of the transition duration and fade in incoming content for another half.
I used FADE_THROGH flag but is not working as expected.

Expected behavior: The textview inside main card which should fade out for 500 milisecond and texrview inside detailcard should fade in for 500 milisecond.

Source code: MainActivity.class
package com.example.containertransform

import android.app.ActivityOptions
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Window
import com.google.android.material.transition.MaterialContainerTransformSharedElementCallback
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    setExitSharedElementCallback(MaterialContainerTransformSharedElementCallback())
    window.sharedElementsUseOverlay = false
    card_view_main.setOnClickListener { openDetailScreen() }
}

private fun openDetailScreen() {
    val intent = Intent(this, DetailActivity::class.java)
    val bundle = ActivityOptions.makeSceneTransitionAnimation(
        this,
        card_view_main,
        resources.getString(R.string.transition_service_container)
    ).toBundle()
    this.startActivity(intent, bundle)
}

}

DetailsActivity
package com.example.containertransform;

import android.graphics.Color
import android.os.Bundle
import android.view.Window
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.transition.MaterialContainerTransform
import com.google.android.material.transition.MaterialContainerTransform.FADE_MODE_THROUGH
import com.google.android.material.transition.MaterialContainerTransformSharedElementCallback

class DetailActivity : AppCompatActivity(){

override fun onCreate(savedInstanceState: Bundle?) {
    window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
    setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())

    window.sharedElementEnterTransition = MaterialContainerTransform().apply {
        addTarget(R.id.card_view)
        duration = 1000L
        scrimColor = Color.TRANSPARENT
        containerColor = resources.getColor(R.color.white)
        fadeMode = FADE_MODE_THROUGH
    }


    window.sharedElementReturnTransition = MaterialContainerTransform().apply {
        addTarget(R.id.card_view)
        duration = 1000L
        scrimColor = Color.TRANSPARENT
        containerColor = resources.getColor(R.color.white)
        fadeMode = FADE_MODE_THROUGH
    }
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_detail);
}

}

activity_main.xml

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_screen"
tools:context=".MainActivity">

<FrameLayout
    android:id="@+id/card_view_main"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@color/white"
    android:layout_centerInParent="true"
    android:transitionName="@string/transition_service_container"
    >
    <TextView
        android:id="@+id/text_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="8dp"
        android:layout_gravity="center"
        android:text="This is content of the calling screen"
        android:textSize="18sp" />

</FrameLayout>

<View
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/temp_view"/>

activity_detail.xml

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/third_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_screen"
tools:context=".MainActivity">

<FrameLayout
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:layout_centerInParent="true"
    android:layout_margin="8dp"
    android:background="@color/white"
    android:transitionName="@string/transition_service_container">

    <TextView
        android:id="@+id/text_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:lineSpacingExtra="8dp"
        android:text="This is content for the detail screen"
        android:textSize="24sp"
        android:transitionName="dasd" />
</FrameLayout>

Android API version: Android API version here

Material Library version: 1.2.0-alpha06

Device: Device on which the bug was encountered here

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[dsn5ft]

Hi @ujjwalgoyal, we're currently looking at updating the timing of the fade depending on the fade mode, but for now you should be able to accomplish it by doing the following in your apply for the transform:

fadeProgressThresholds = MaterialContainerTransform.ProgressThresholds(0f, 1f)

[ujjwalgoyal]

@dsn5ft
This works. Thank you for the quick reply.

[dsn5ft]

Great! I've actually discussed this a bit more with our motion designer and we will be leaving the default timing thresholds the way they are, because we believe it will look better for the majority of cases. So our guidance will be to use fadeProgressThresholds as you've done to customize this behavior as needed.

[ParticleCore]

@dsn5ft Great find. Is it possible to make this clear in the official documentation so we don't have to find out only in this issue why the fade is not working "properly"?

Even the official examples depict the expected fade in the target animation, seen in https://material.io/develop/android/theming/motion#container-transform

It would be best to have this intentionally "unintended" behavior made clear to the developers, if that's possible.

[dsn5ft]

Will do.