Motion: Use MaterialContainerTransform

Replace custom Transition implementations in the "Navigation > Fade through" demo with
MaterialContainerTransform in MDC.

Author: yaraki

Motion/app/src/main/java/com/example/android/motion/demo/navfadethrough/CheeseArticleFragment.kt

@@ -24,7 +24,6 @@ import android.widget.FrameLayout
 import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.TextView
-import androidx.annotation.IdRes
 import androidx.appcompat.widget.Toolbar
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.ViewCompat
@@ -36,25 +35,14 @@ import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.findNavController
 import androidx.navigation.fragment.navArgs
-import androidx.transition.ChangeBounds
-import androidx.transition.ChangeTransform
-import androidx.transition.Transition
 import com.example.android.motion.R
-import com.example.android.motion.demo.FAST_OUT_SLOW_IN
-import com.example.android.motion.demo.LARGE_COLLAPSE_DURATION
-import com.example.android.motion.demo.LARGE_EXPAND_DURATION
-import com.example.android.motion.demo.plusAssign
-import com.example.android.motion.demo.sharedelement.MirrorView
-import com.example.android.motion.demo.sharedelement.SharedFade
-import com.example.android.motion.demo.transitionTogether
 import com.google.android.material.appbar.CollapsingToolbarLayout
+import com.google.android.material.transition.MaterialContainerTransform
 
 class CheeseArticleFragment : Fragment() {
 
     companion object {
         const val TRANSITION_NAME_BACKGROUND = "background"
-        const val TRANSITION_NAME_CARD_CONTENT = "card_content"
-        const val TRANSITION_NAME_ARTICLE_CONTENT = "article_content"
     }
 
     private val args: CheeseArticleFragmentArgs by navArgs()
@@ -65,26 +53,12 @@ class CheeseArticleFragment : Fragment() {
         super.onCreate(savedInstanceState)
 
         // These are the shared element transitions.
-        sharedElementEnterTransition =
-            createSharedElementTransition(LARGE_EXPAND_DURATION, R.id.article_mirror)
-        sharedElementReturnTransition =
-            createSharedElementTransition(LARGE_COLLAPSE_DURATION, R.id.card_mirror)
+        sharedElementEnterTransition = MaterialContainerTransform(requireContext(), true)
+        sharedElementReturnTransition = MaterialContainerTransform(requireContext(), false)
 
         viewModel.cheeseId = args.cheeseId
     }
 
-    private fun createSharedElementTransition(duration: Long, @IdRes noTransform: Int): Transition {
-        return transitionTogether {
-            this.duration = duration
-            interpolator = FAST_OUT_SLOW_IN
-            this += SharedFade()
-            this += ChangeBounds()
-            this += ChangeTransform()
-                // The content is already transformed along with the parent. Exclude it.
-                .excludeTarget(noTransform, true)
-        }
-    }
-
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -102,11 +76,8 @@ class CheeseArticleFragment : Fragment() {
 
         val background: FrameLayout = view.findViewById(R.id.background)
         val coordinator: CoordinatorLayout = view.findViewById(R.id.coordinator)
-        val mirror: MirrorView = view.findViewById(R.id.card_mirror)
 
         ViewCompat.setTransitionName(background, TRANSITION_NAME_BACKGROUND)
-        ViewCompat.setTransitionName(coordinator, TRANSITION_NAME_ARTICLE_CONTENT)
-        ViewCompat.setTransitionName(mirror, TRANSITION_NAME_CARD_CONTENT)
         ViewGroupCompat.setTransitionGroup(coordinator, true)
 
         // Adjust the edge-to-edge display.

Motion/app/src/main/java/com/example/android/motion/demo/navfadethrough/CheeseCardFragment.kt

@@ -39,7 +39,6 @@ import com.example.android.motion.demo.FAST_OUT_LINEAR_IN
 import com.example.android.motion.demo.LARGE_COLLAPSE_DURATION
 import com.example.android.motion.demo.LARGE_EXPAND_DURATION
 import com.example.android.motion.demo.LINEAR_OUT_SLOW_IN
-import com.example.android.motion.demo.sharedelement.MirrorView
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.card.MaterialCardView
 
@@ -75,7 +74,6 @@ class CheeseCardFragment : Fragment() {
         val cardContent: ConstraintLayout = view.findViewById(R.id.card_content)
         val image: ImageView = view.findViewById(R.id.image)
         val name: TextView = view.findViewById(R.id.name)
-        val mirror: MirrorView = view.findViewById(R.id.article_mirror)
 
         ViewCompat.setOnApplyWindowInsetsListener(view.parent as View) { _, insets ->
             toolbar.updateLayoutParams<AppBarLayout.LayoutParams> {
@@ -90,8 +88,6 @@ class CheeseCardFragment : Fragment() {
         }
 
         ViewCompat.setTransitionName(card, "card")
-        ViewCompat.setTransitionName(cardContent, "card_content")
-        ViewCompat.setTransitionName(mirror, "article")
         ViewGroupCompat.setTransitionGroup(cardContent, true)
 
         viewModel.cheese.observe(viewLifecycleOwner) { cheese ->
@@ -105,8 +101,6 @@ class CheeseCardFragment : Fragment() {
                 CheeseCardFragmentDirections.actionArticle(cheese.id),
                 FragmentNavigatorExtras(
                     card to CheeseArticleFragment.TRANSITION_NAME_BACKGROUND,
-                    cardContent to CheeseArticleFragment.TRANSITION_NAME_CARD_CONTENT,
-                    mirror to CheeseArticleFragment.TRANSITION_NAME_ARTICLE_CONTENT
                 )
             )
         }

Motion/app/src/main/res/layout/cheese_article_fragment.xml

@@ -25,11 +25,6 @@
     android:elevation="1dp"
     tools:targetApi="21">
 
-    <com.example.android.motion.demo.sharedelement.MirrorView
-        android:id="@+id/card_mirror"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent" />
-
     <androidx.coordinatorlayout.widget.CoordinatorLayout
         android:id="@+id/coordinator"
         android:layout_width="match_parent"

Motion/app/src/main/res/layout/cheese_card_fragment.xml

@@ -49,11 +49,6 @@
             android:layout_gravity="center"
             android:layout_margin="@dimen/spacing_small">
 
-            <com.example.android.motion.demo.sharedelement.MirrorView
-                android:id="@+id/article_mirror"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent" />
-
             <androidx.constraintlayout.widget.ConstraintLayout
                 android:id="@+id/card_content"
                 android:layout_width="match_parent"