material-components / material-components/material-components-android

[MaterialContainerTransform] Can I use two MaterialContainerTransforms when creating activity transition animations?

Open
#3,487 1 comment 0 reactions 1 assignee View on GitHub

@hunterstich is already working on this.

Since Jul 28, 2023.

bug Feature: Transition
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

Description: Can I use two MaterialContainerTransforms at the same time or one MaterialContainerTransform and one ChangeBounds when implementing activity transition animations? I tried it but didn't get the expected result.

Expected behavior: When creating activity transition animations, I want to apply shared element transitions to two sets of views simultaneously without affecting each other.

Source code:

class TestSharedElementExitActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        with(window) {
            requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
            setExitSharedElementCallback(MaterialContainerTransformSharedElementCallback())
        }
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test_shared_element_exit)
        findViewById<Button>(R.id.exit_button).transitionName = "button"
        findViewById<TextView>(R.id.exit_text).transitionName = "text"
        findViewById<Button>(R.id.exit_button).setOnClickListener {
            startActivity(
                Intent(this, TestSharedElementEnterActivity::class.java),
                ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this,
                    Pair.create(it, "button"),
                    Pair.create(findViewById<TextView>(R.id.exit_text), "text")
                ).toBundle()
            )
        }
    }
}
class TestSharedElementEnterActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        with(window) {
            requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
            setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())
        }
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test_shared_element_enter)
        findViewById<Button>(R.id.enter_button).transitionName = "button"
        findViewById<TextView>(R.id.enter_text).transitionName = "text"

        val transitionSet = TransitionSet()

        transitionSet.addTransition(MaterialContainerTransform().apply {
            isDrawDebugEnabled = true
            addTarget(R.id.enter_button)
            // drawingViewId = R.id.test_container
        })

        transitionSet.addTransition(MaterialContainerTransform().apply {
            isDrawDebugEnabled = true
            addTarget(R.id.enter_text)
        })
        // or
        // transitionSet.addTransition(ChangeBounds().apply {
        //     addTarget(R.id.enter_text)
        // })

        transitionSet.duration = 10 * 1000
        window.sharedElementEnterTransition = transitionSet
    }
}

R.layout.activity_test_shared_element_enter

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/test_container"
    android:background="@color/black">


    <Button
        android:text="enter_button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/enter_button"
        android:layout_width="50dp"
        android:layout_height="200dp" />

    <TextView
        android:id="@+id/enter_text"
        android:text="enter"
        android:textColor="@color/white"
        android:textSize="40dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

R.layout.activity_test_shared_element_exit

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">


    <Button
        android:text="exit_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/exit_button"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <TextView
        android:id="@+id/exit_text"
        android:text="exit"
        android:textColor="@color/white"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>

The animation works fine when I use only one MaterialContainerTransform.
https://github.com/material-components/material-components-android/assets/7395268/c68a1f2c-2aa2-4080-9397-1f31391be51c

The animation doesn't work properly when I use two MaterialContainerTransforms.
https://github.com/material-components/material-components-android/assets/7395268/9d49bf42-327a-4719-a771-0b51e411fea6

Android API version: target sdk :33

Material Library version: com.google.android.material:material:1.2.1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.