Merge pull request #76 from android/yaraki/Motion-container

Motion: Use MaterialContainerTransform

Author: yaraki

Motion/.idea/misc.xml

@@ -45,6 +45,6 @@ package.
 
 <img src="screenshots/sharedelement.gif" height="400" alt="sharedelement"/>
 
-### [Navigation > Fade through](app/src/main/java/com/example/android/motion/demo/navfadethrough)
+### [Navigation > Container transform](app/src/main/java/com/example/android/motion/demo/containertransform)
 
-<img src="screenshots/navigationfadethrough.gif" height="400" alt="navfadethrough"/>
+<img src="screenshots/containertransform.gif" height="400" alt="containertransform"/>

Motion/README.md

@@ -174,8 +174,8 @@
         </activity>
 
         <activity
-            android:name=".demo.navfadethrough.NavFadeThroughActivity"
-            android:label="@string/nav_fade_through_label"
+            android:name=".demo.containertransform.ContainerTransformActivity"
+            android:label="@string/container_transform_label"
             android:theme="@style/Theme.Motion.Translucent">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
@@ -184,10 +184,10 @@
 
             <meta-data
                 android:name="com.example.android.motion.demo.DESCRIPTION"
-                android:value="@string/nav_fade_through_description" />
+                android:value="@string/container_transform_description" />
             <meta-data
                 android:name="com.example.android.motion.demo.APIS"
-                android:resource="@array/nav_fade_through_apis" />
+                android:resource="@array/container_transform_apis" />
         </activity>
 
     </application>

Motion/app/src/main/AndroidManifest.xml

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package com.example.android.motion.demo.navfadethrough
+package com.example.android.motion.demo.containertransform
 
 import android.os.Bundle
 import android.view.LayoutInflater
@@ -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/CheeseArticleFragment.kt renamed to Motion/app/src/main/java/com/example/android/motion/demo/containertransform/CheeseArticleFragment.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package com.example.android.motion.demo.navfadethrough
+package com.example.android.motion.demo.containertransform
 
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData

Motion/app/src/main/java/com/example/android/motion/demo/navfadethrough/CheeseArticleViewModel.kt renamed to Motion/app/src/main/java/com/example/android/motion/demo/containertransform/CheeseArticleViewModel.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package com.example.android.motion.demo.navfadethrough
+package com.example.android.motion.demo.containertransform
 
 import android.os.Bundle
 import android.view.LayoutInflater
@@ -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/java/com/example/android/motion/demo/navfadethrough/CheeseCardFragment.kt renamed to Motion/app/src/main/java/com/example/android/motion/demo/containertransform/CheeseCardFragment.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package com.example.android.motion.demo.navfadethrough
+package com.example.android.motion.demo.containertransform
 
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData

Motion/app/src/main/java/com/example/android/motion/demo/navfadethrough/CheeseCardViewModel.kt renamed to Motion/app/src/main/java/com/example/android/motion/demo/containertransform/CheeseCardViewModel.kt

@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-package com.example.android.motion.demo.navfadethrough
+package com.example.android.motion.demo.containertransform
 
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
 import com.example.android.motion.R
 import com.example.android.motion.ui.EdgeToEdge
 
-class NavFadeThroughActivity : AppCompatActivity() {
+class ContainerTransformActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContentView(R.layout.nav_fade_through_activity)
+        setContentView(R.layout.container_transform_activity)
         EdgeToEdge.setUpRoot(findViewById(R.id.nav_host))
     }
 }

Motion/app/src/main/java/com/example/android/motion/demo/navfadethrough/NavFadeThroughActivity.kt renamed to Motion/app/src/main/java/com/example/android/motion/demo/containertransform/ContainerTransformActivity.kt

@@ -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_article_fragment.xml

@@ -32,7 +32,7 @@
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
-            app:title="@string/nav_fade_through_label" />
+            app:title="@string/container_transform_label" />
 
     </com.google.android.material.appbar.AppBarLayout>
 
@@ -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"