material-components / material-components/material-components-android
[MaterialContainerTransform] Can I use two MaterialContainerTransforms when creating activity transition animations?
@hunterstich is already working on this.
Since Jul 28, 2023.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.