Add Material motion transitions to Reply

MDC 1.2.0-alpha05 adds support for the Material motion system. This change updates Reply to use the container transform provided by the Material Android library when moving between the email list and email details page and when clicking on the FAB to compose a new email.

Author: hunterstich

Reply/app/build.gradle

@@ -65,7 +65,7 @@ dependencies {
     implementation "com.github.bumptech.glide:glide:4.9.0"
 
     // Material Components
-    implementation 'com.google.android.material:material:1.1.0-beta01'
+    implementation 'com.google.android.material:material:1.2.0-alpha05'
 
     // Testing
     testImplementation 'junit:junit:4.12'

Reply/app/src/main/java/com/materialstudies/reply/ui/MainActivity.kt

@@ -16,14 +16,14 @@
 
 package com.materialstudies.reply.ui
 
+import android.animation.Animator
 import android.os.Bundle
 import android.view.MenuItem
 import android.view.View
 import androidx.annotation.MenuRes
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.appcompat.widget.Toolbar
-import androidx.core.content.ContextCompat
 import androidx.navigation.NavController
 import androidx.navigation.NavDestination
 import androidx.navigation.findNavController
@@ -179,10 +179,24 @@ class MainActivity : AppCompatActivity(),
     private fun setBottomAppBarForCompose() {
         binding.run {
             bottomAppBar.performHide()
-            fab.hide()
-            // Hide the BottomAppBar to avoid it showing above the keyboard
-            // when composing a new email.
-            bottomAppBar.visibility = View.GONE
+            // Get a handle on the animator that hides the bottom app bar so we can wait to hide
+            // the fab and bottom app bar until after it's exit animation finishes.
+            bottomAppBar.animate().setListener(object : Animator.AnimatorListener {
+                var isCanceled = false
+                override fun onAnimationRepeat(animation: Animator?) { }
+                override fun onAnimationEnd(animation: Animator?) {
+                    if (isCanceled) return
+
+                    // Hide the BottomAppBar to avoid it showing above the keyboard
+                    // when composing a new email.
+                    bottomAppBar.visibility = View.GONE
+                    fab.visibility = View.INVISIBLE
+                }
+                override fun onAnimationCancel(animation: Animator?) {
+                    isCanceled = true
+                }
+                override fun onAnimationStart(animation: Animator?) { }
+            })
         }
     }
 

Reply/app/src/main/java/com/materialstudies/reply/ui/compose/ComposeFragment.kt

@@ -21,20 +21,21 @@ import android.transition.Slide
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.view.animation.AccelerateInterpolator
 import android.widget.ArrayAdapter
+import androidx.core.transition.addListener
 import androidx.fragment.app.Fragment
 import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
+import com.google.android.material.transition.MaterialContainerTransform
 import com.materialstudies.reply.R
 import com.materialstudies.reply.data.Account
 import com.materialstudies.reply.data.AccountStore
 import com.materialstudies.reply.data.Email
 import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.ComposeRecipientChipBinding
 import com.materialstudies.reply.databinding.FragmentComposeBinding
+import com.materialstudies.reply.ui.MainActivity
 import com.materialstudies.reply.util.themeInterpolator
-import com.materialstudies.reply.util.transition.MaterialContainerTransition
 import kotlin.LazyThreadSafetyMode.NONE
 
 /**
@@ -109,15 +110,11 @@ class ComposeFragment : Fragment() {
         binding.executePendingBindings()
         // Delay creating the enterTransition until after we have inflated this Fragment's binding
         // and are able to access the view to be transitioned to.
-        enterTransition = MaterialContainerTransition(
-            correctForZOrdering = true
-        ).apply {
+        enterTransition = MaterialContainerTransform(requireContext()).apply {
             // Manually add the Views to be shared since this is not a standard Fragment to Fragment
             // shared element transition.
-            setSharedElementViews(
-                requireActivity().findViewById(R.id.fab),
-                binding.emailCardView
-            )
+            startView = requireActivity().findViewById(R.id.fab)
+            endView = binding.emailCardView
             duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
             interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
         }

Reply/app/src/main/java/com/materialstudies/reply/ui/email/EmailFragment.kt

@@ -24,11 +24,11 @@ import androidx.fragment.app.Fragment
 import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
 import androidx.recyclerview.widget.GridLayoutManager
+import com.google.android.material.transition.MaterialContainerTransform
 import com.materialstudies.reply.R
 import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.FragmentEmailBinding
 import com.materialstudies.reply.util.themeInterpolator
-import com.materialstudies.reply.util.transition.MaterialContainerTransition
 import kotlin.LazyThreadSafetyMode.NONE
 
 private const val MAX_GRID_SPANS = 3
@@ -91,17 +91,16 @@ class EmailFragment : Fragment() {
     private fun prepareTransitions() {
         postponeEnterTransition()
 
-        sharedElementEnterTransition = MaterialContainerTransition(
-            R.id.nested_scroll_view,
-            correctForZOrdering = true
-        ).apply {
+        sharedElementEnterTransition = MaterialContainerTransform(requireContext()).apply {
+            // Scope the transition to a view in the hierarchy so we know it will be added under
+            // the bottom app bar but over the Hold transition from the exiting HomeFragment.
+            drawingViewId = R.id.nav_host_fragment
             duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
             interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
         }
-        sharedElementReturnTransition = MaterialContainerTransition(
-            R.id.recycler_view,
-            correctForZOrdering = true
-        ).apply {
+        sharedElementReturnTransition = MaterialContainerTransform(requireContext()).apply {
+            // Again, scope the return transition so it is added below the bottom app bar.
+            drawingViewId = R.id.recycler_view
             duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
             interpolator = requireContext().themeInterpolator(R.attr.motionInterpolatorPersistent)
         }

Reply/app/src/main/java/com/materialstudies/reply/ui/home/HomeFragment.kt

@@ -26,6 +26,7 @@ import androidx.lifecycle.observe
 import androidx.navigation.fragment.FragmentNavigatorExtras
 import androidx.navigation.fragment.findNavController
 import androidx.recyclerview.widget.ItemTouchHelper
+import com.google.android.material.transition.Hold
 import com.materialstudies.reply.R
 import com.materialstudies.reply.data.Email
 import com.materialstudies.reply.data.EmailStore
@@ -41,6 +42,13 @@ class HomeFragment : Fragment(), EmailAdapter.EmailAdapterListener {
 
     private val emailAdapter = EmailAdapter(this)
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        exitTransition = Hold().apply {
+            duration = resources.getInteger(R.integer.reply_motion_default_large).toLong()
+        }
+    }
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,

Reply/app/src/main/java/com/materialstudies/reply/util/AnimationUtils.kt

@@ -85,56 +85,6 @@ fun lerp(
     return lerp(startValue, endValue, (fraction - startFraction) / (endFraction - startFraction))
 }
 
-/**
- * Linearly interpolate between two [CornerRounding]s when the fraction is in a given range.
- */
-fun lerp(
-    startValue: CornerRounding,
-    endValue: CornerRounding,
-    @FloatRange(
-        from = 0.0,
-        fromInclusive = true,
-        to = 1.0,
-        toInclusive = false
-    ) startFraction: Float,
-    @FloatRange(from = 0.0, fromInclusive = false, to = 1.0, toInclusive = true) endFraction: Float,
-    @FloatRange(from = 0.0, fromInclusive = true, to = 1.0, toInclusive = true) fraction: Float
-): CornerRounding {
-    if (fraction < startFraction) return startValue
-    if (fraction > endFraction) return endValue
-
-    return CornerRounding(
-        lerp(
-            startValue.topLeftRadius,
-            endValue.topLeftRadius,
-            startFraction,
-            endFraction,
-            fraction
-        ),
-        lerp(
-            startValue.topRightRadius,
-            endValue.topRightRadius,
-            startFraction,
-            endFraction,
-            fraction
-        ),
-        lerp(
-            startValue.bottomRightRadius,
-            endValue.bottomRightRadius,
-            startFraction,
-            endFraction,
-            fraction
-        ),
-        lerp(
-            startValue.bottomLeftRadius,
-            endValue.bottomLeftRadius,
-            startFraction,
-            endFraction,
-            fraction
-        )
-    )
-}
-
 /**
  * Linearly interpolate between two colors when the fraction is in a given range.
  */

Reply/app/src/main/java/com/materialstudies/reply/util/GraphicsExtensions.kt

@@ -40,81 +40,3 @@ fun TextView.setTextAppearanceCompat(context: Context, resId: Int) {
         setTextAppearance(context, resId)
     }
 }
-
-/**
- * Search this view and any children for a [ColorDrawable] `background` and return it's `color`,
- * else return `colorSurface`.
- */
-@ColorInt
-fun View.descendantBackgroundColor(): Int {
-    val bg = backgroundColor()
-    if (bg != null) {
-        return bg
-    } else if (this is ViewGroup) {
-        forEach {
-            val childBg = descendantBackgroundColorOrNull()
-            if (childBg != null) {
-                return childBg
-            }
-        }
-    }
-    return context.themeColor(R.attr.colorSurface)
-}
-
-@ColorInt
-private fun View.descendantBackgroundColorOrNull(): Int? {
-    val bg = backgroundColor()
-    if (bg != null) {
-        return bg
-    }  else if (this is ViewGroup) {
-        forEach {
-            val childBg = backgroundColor()
-            if (childBg != null) {
-                return childBg
-            }
-        }
-    }
-    return null
-}
-
-/**
- * Check if this [View]'s `background` is a [ColorDrawable] and if so, return it's `color`,
- * otherwise `null`.
- */
-@ColorInt
-fun View.backgroundColor(): Int? {
-    val bg = background
-    if (bg is ColorDrawable) {
-        return bg.color
-    } else {
-        val tint = backgroundTintList?.defaultColor
-        if (tint != null && tint != -1) return tint
-    }
-    return null
-}
-
-/**
- * Walk up from a [View] looking for an ancestor with a given `id`.
- */
-fun View.findAncestorById(@IdRes ancestorId: Int): View {
-    return when {
-        id == ancestorId -> this
-        parent is View -> (parent as View).findAncestorById(ancestorId)
-        else -> throw IllegalArgumentException("$ancestorId not a valid ancestor")
-    }
-}
-
-/**
- * A copy of the KTX method, adding the ability to add extra padding the bottom of the [Bitmap];
- * useful when it will be used in a [android.graphics.BitmapShader] with
- * a [android.graphics.Shader.TileMode.CLAMP][CLAMP tile mode].
- */
-fun View.drawToBitmap(@Px extraPaddingBottom: Int = 0): Bitmap {
-    check(ViewCompat.isLaidOut(this)) {
-        "View needs to be laid out before calling drawToBitmap()"
-    }
-    return Bitmap.createBitmap(width, height + extraPaddingBottom, ARGB_8888).applyCanvas {
-        translate(-scrollX.toFloat(), -scrollY.toFloat())
-        draw(this)
-    }
-}