Add MaterialContainerTransition

- Changed MaterialContainerTransition to animate shared Views instead of a single bitmap of a View.
- Updated ViewExtensions to theme<X> naming

Change-Id: I0394876987be9dea00cde923fa64096fedf21b98

Author: hunterstich

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

@@ -21,6 +21,7 @@ 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.fragment.app.Fragment
 import androidx.navigation.fragment.findNavController
@@ -33,6 +34,7 @@ import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.ComposeRecipientChipBinding
 import com.materialstudies.reply.databinding.FragmentComposeBinding
 import com.materialstudies.reply.util.FastOutUltraSlowIn
+import com.materialstudies.reply.util.transition.MaterialContainerTransition
 import kotlin.LazyThreadSafetyMode.NONE
 
 /**
@@ -54,10 +56,7 @@ class ComposeFragment : Fragment() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        enterTransition = Slide().apply {
-            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
-            interpolator = FastOutUltraSlowIn()
-        }
+        prepareTransitions()
     }
 
     override fun onCreateView(
@@ -82,6 +81,8 @@ class ComposeFragment : Fragment() {
                 AccountStore.getAllUserAccounts().map { it.email }
             )
         }
+
+        startTransitions()
     }
 
     /**
@@ -99,4 +100,31 @@ class ComposeFragment : Fragment() {
             addView(chipBinding.root)
         }
     }
+
+    private fun prepareTransitions() {
+        postponeEnterTransition()
+    }
+
+    private fun startTransitions() {
+        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 {
+            // 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
+            )
+            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
+            interpolator = FastOutUltraSlowIn()
+        }
+        returnTransition = Slide().apply {
+            duration = resources.getInteger(R.integer.reply_motion_micro_duration).toLong()
+            interpolator = AccelerateInterpolator()
+        }
+        startPostponedEnterTransition()
+    }
 }

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

@@ -16,9 +16,7 @@
 
 package com.materialstudies.reply.ui.email
 
-import android.animation.AnimatorInflater
 import android.os.Bundle
-import android.transition.TransitionInflater
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -30,6 +28,7 @@ import com.materialstudies.reply.R
 import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.FragmentEmailBinding
 import com.materialstudies.reply.util.FastOutUltraSlowIn
+import com.materialstudies.reply.util.transition.MaterialContainerTransition
 import kotlin.LazyThreadSafetyMode.NONE
 
 private const val MAX_GRID_SPANS = 3
@@ -39,7 +38,6 @@ private const val MAX_GRID_SPANS = 3
  */
 class EmailFragment : Fragment() {
 
-
     private val args: EmailFragmentArgs by navArgs()
     private val emailId: Long by lazy(NONE) { args.emailId }
 
@@ -92,19 +90,26 @@ class EmailFragment : Fragment() {
 
     private fun prepareTransitions() {
         postponeEnterTransition()
-        sharedElementEnterTransition = TransitionInflater.from(context)
-            .inflateTransition(R.transition.email_card_shared_element_transition).apply {
-                interpolator = FastOutUltraSlowIn()
-            }
+
+        sharedElementEnterTransition = MaterialContainerTransition(
+            R.id.nested_scroll_view,
+            correctForZOrdering = true
+        ).apply {
+            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
+            interpolator = FastOutUltraSlowIn()
+        }
+        sharedElementReturnTransition = MaterialContainerTransition(
+            R.id.recycler_view,
+            correctForZOrdering = true
+        ).apply {
+            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
+            interpolator = FastOutUltraSlowIn()
+        }
     }
 
     private fun startTransitions() {
         binding.executePendingBindings()
         startPostponedEnterTransition()
-        AnimatorInflater.loadAnimator(requireContext(), R.animator.alpha_in).apply {
-            setTarget(binding.emailCardView)
-            start()
-        }
     }
 
     private fun showError() {

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

@@ -29,7 +29,7 @@ import androidx.annotation.ColorInt
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.interpolator.view.animation.FastOutSlowInInterpolator
 import com.materialstudies.reply.R
-import com.materialstudies.reply.util.getColorFromAttr
+import com.materialstudies.reply.util.themeColor
 import com.materialstudies.reply.util.lerp
 import com.materialstudies.reply.util.lerpArgb
 import kotlin.math.abs
@@ -45,7 +45,7 @@ import kotlin.math.hypot
 class EmailSwipeActionDrawable(context: Context) : Drawable() {
 
     private val circlePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-        color = context.getColorFromAttr(R.attr.colorSecondary)
+        color = context.themeColor(R.attr.colorSecondary)
         style = Paint.Style.FILL
     }
 
@@ -62,8 +62,8 @@ class EmailSwipeActionDrawable(context: Context) : Drawable() {
     private val iconIntrinsicWidth = icon.intrinsicWidth
     private val iconIntrinsicHeight = icon.intrinsicHeight
 
-    @ColorInt private val iconTint = context.getColorFromAttr(R.attr.colorOnBackground)
-    @ColorInt private val iconTintActive = context.getColorFromAttr(R.attr.colorOnSecondary)
+    @ColorInt private val iconTint = context.themeColor(R.attr.colorOnBackground)
+    @ColorInt private val iconTintActive = context.themeColor(R.attr.colorOnSecondary)
 
     // Amount that we should 'overshoot' the icon's scale by when animating.
     private val iconMaxScaleAddition = 0.5F

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

@@ -22,8 +22,9 @@ import com.materialstudies.reply.R
 import com.materialstudies.reply.data.Email
 import com.materialstudies.reply.databinding.EmailItemLayoutBinding
 import com.materialstudies.reply.ui.common.EmailAttachmentAdapter
-import com.materialstudies.reply.util.getStyleIdFromAttr
+import com.materialstudies.reply.util.themeStyle
 import com.materialstudies.reply.util.setTextAppearanceCompat
+import kotlin.math.abs
 
 class EmailViewHolder(
     private val binding: EmailItemLayoutBinding,
@@ -50,7 +51,7 @@ class EmailViewHolder(
         binding.root.isActivated = email.isStarred
 
         // Set the subject's TextAppearance
-        val textAppearance = binding.subjectTextView.context.getStyleIdFromAttr(
+        val textAppearance = binding.subjectTextView.context.themeStyle(
             if (email.isImportant) {
                 R.attr.textAppearanceHeadline4
             } else {
@@ -87,7 +88,7 @@ class EmailViewHolder(
 
         // Animate the top left corner radius of the email card as swipe happens.
         val interpolation = (currentSwipePercentage / swipeThreshold).coerceIn(0F, 1F)
-        val adjustedInterpolation = Math.abs((if (isStarred) 1F else 0F) - interpolation)
+        val adjustedInterpolation = abs((if (isStarred) 1F else 0F) - interpolation)
         binding.cardView.progress = adjustedInterpolation
 
         // Start the background animation once the threshold is met.
@@ -104,5 +105,4 @@ class EmailViewHolder(
         val email = binding.email ?: return
         binding.listener?.onEmailStarChanged(email, !email.isStarred)
     }
-
 }

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

@@ -17,8 +17,6 @@
 package com.materialstudies.reply.ui.home
 
 import android.os.Bundle
-import android.transition.Fade
-import android.transition.TransitionInflater
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -33,7 +31,6 @@ import com.materialstudies.reply.data.Email
 import com.materialstudies.reply.data.EmailStore
 import com.materialstudies.reply.databinding.FragmentHomeBinding
 import com.materialstudies.reply.ui.MenuBottomSheetDialogFragment
-import com.materialstudies.reply.util.FastOutUltraSlowIn
 
 /**
  * A [Fragment] that displays a list of emails.
@@ -44,15 +41,6 @@ class HomeFragment : Fragment(), EmailAdapter.EmailAdapterListener {
 
     private val emailAdapter = EmailAdapter(this)
 
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        // Fade content out when we navigate to a different screen.
-        exitTransition = Fade().apply {
-            duration = resources.getInteger(R.integer.reply_motion_default_duration).toLong()
-            interpolator = FastOutUltraSlowIn()
-        }
-    }
-
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,

app/src/main/java/com/materialstudies/reply/ui/nav/BottomNavDrawerFragment.kt

@@ -37,7 +37,7 @@ import com.materialstudies.reply.data.Account
 import com.materialstudies.reply.data.AccountStore
 import com.materialstudies.reply.databinding.FragmentBottomNavDrawerBinding
 import com.materialstudies.reply.util.FastOutUltraSlowIn
-import com.materialstudies.reply.util.getColorFromAttr
+import com.materialstudies.reply.util.themeColor
 import com.materialstudies.reply.util.lerp
 import kotlin.LazyThreadSafetyMode.NONE
 import kotlin.math.abs
@@ -91,7 +91,7 @@ class BottomNavDrawerFragment :
             0
         ).apply {
             fillColor = ColorStateList.valueOf(
-                requireContext().getColorFromAttr(R.attr.colorBrandedVariantSurface)
+                requireContext().themeColor(R.attr.colorBrandedVariantSurface)
             )
             elevation = resources.getDimension(R.dimen.plane_08)
             initializeElevationOverlay(requireContext())
@@ -106,7 +106,7 @@ class BottomNavDrawerFragment :
             0
         ).apply {
             fillColor = ColorStateList.valueOf(
-                requireContext().getColorFromAttr(R.attr.colorBrandedSurface)
+                requireContext().themeColor(R.attr.colorBrandedSurface)
             )
             elevation = resources.getDimension(R.dimen.plane_16)
             shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_NEVER

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

@@ -19,6 +19,7 @@ package com.materialstudies.reply.util
 import androidx.annotation.ColorInt
 import androidx.annotation.FloatRange
 import com.google.android.material.animation.ArgbEvaluatorCompat
+import kotlin.math.roundToInt
 
 /**
  * Linearly interpolate between two values
@@ -31,6 +32,17 @@ fun lerp(
     return startValue + fraction * (endValue - startValue)
 }
 
+/**
+ * Linearly interpolate between two values
+ */
+fun lerp(
+    startValue: Int,
+    endValue: Int,
+    @FloatRange(from = 0.0, fromInclusive = true, to = 1.0, toInclusive = true) fraction: Float
+): Int {
+    return (startValue + fraction * (endValue - startValue)).roundToInt()
+}
+
 /**
  * Linearly interpolate between two values when the fraction is in a given range.
  */
@@ -52,6 +64,93 @@ fun lerp(
     return lerp(startValue, endValue, (fraction - startFraction) / (endFraction - startFraction))
 }
 
+/**
+ * Linearly interpolate between two values when the fraction is in a given range.
+ */
+fun lerp(
+    startValue: Int,
+    endValue: Int,
+    @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
+): Int {
+    if (fraction < startFraction) return startValue
+    if (fraction > endFraction) return endValue
+
+    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.
+ */
+@ColorInt
+fun lerpArgb(
+    @ColorInt startColor: Int,
+    @ColorInt endColor: Int,
+    @FloatRange(from = 0.0, fromInclusive = true, to = 1.0, toInclusive = true) fraction: Float
+): Int {
+    return ArgbEvaluatorCompat.getInstance().evaluate(
+        fraction,
+        startColor,
+        endColor
+    )
+}
+
 /**
  * Linearly interpolate between two colors when the fraction is in a given range.
  */