Add transition animation to timer form fragment

.idea/codeStyles/Project.xml

@@ -1,6 +1,22 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
     <JetCodeStyleSettings>
+      <option name="PACKAGES_TO_USE_STAR_IMPORTS">
+        <value>
+          <package name="java.util" alias="false" withSubpackages="false" />
+          <package name="kotlinx.android.synthetic" alias="false" withSubpackages="true" />
+          <package name="io.ktor" alias="false" withSubpackages="true" />
+        </value>
+      </option>
+      <option name="PACKAGES_IMPORT_LAYOUT">
+        <value>
+          <package name="" alias="false" withSubpackages="true" />
+          <package name="java" alias="false" withSubpackages="true" />
+          <package name="javax" alias="false" withSubpackages="true" />
+          <package name="kotlin" alias="false" withSubpackages="true" />
+          <package name="" alias="true" withSubpackages="true" />
+        </value>
+      </option>
       <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
     </JetCodeStyleSettings>
     <codeStyleSettings language="XML">

app/build.gradle

@@ -78,8 +78,8 @@ dependencies {
     implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'androidx.core:core-ktx:1.2.0'
     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
-
-    implementation 'com.google.android.material:material:1.2.0-alpha05'
+    implementation 'androidx.transition:transition-ktx:1.4.0-beta01'
+    implementation 'com.google.android.material:material:1.3.0-alpha02'
     implementation 'androidx.recyclerview:recyclerview:1.1.0'
 
     implementation 'androidx.legacy:legacy-support-v4:1.0.0'

app/src/main/java/com/wbrawner/trainterval/timerform/TimerFormFragment.kt

@@ -9,6 +9,7 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
 import androidx.navigation.fragment.findNavController
+import com.google.android.material.transition.MaterialContainerTransform
 import com.wbrawner.trainterval.R
 import com.wbrawner.trainterval.shared.IntervalTimer
 import com.wbrawner.trainterval.timerform.IntervalTimerEditState.*
@@ -47,6 +48,17 @@ class TimerFormFragment : Fragment() {
             it.setSupportActionBar(toolbar)
             it.supportActionBar?.setDisplayHomeAsUpEnabled(true)
         }
+        val context = view.context
+        sharedElementEnterTransition = MaterialContainerTransform().apply {
+            duration = resources.getInteger(android.R.integer.config_longAnimTime).toLong()
+            fadeMode = MaterialContainerTransform.FADE_MODE_CROSS
+            scrimColor = resources.getColor(R.color.colorSurface, context.theme)
+        }
+        sharedElementReturnTransition = MaterialContainerTransform().apply {
+            duration = resources.getInteger(android.R.integer.config_longAnimTime).toLong()
+            fadeMode = MaterialContainerTransform.FADE_MODE_CROSS
+            scrimColor = resources.getColor(R.color.colorSurface, context.theme)
+        }
         coroutineScope = CoroutineScope(Dispatchers.Main)
         coroutineScope!!.launch {
             timerFormViewModel.timerState.observe(viewLifecycleOwner, Observer { state ->

app/src/main/java/com/wbrawner/trainterval/timerlist/TimerListFragment.kt

@@ -6,11 +6,14 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.app.AppCompatActivity
+import androidx.core.view.doOnPreDraw
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
+import androidx.navigation.fragment.FragmentNavigatorExtras
 import androidx.navigation.fragment.findNavController
 import androidx.recyclerview.widget.DividerItemDecoration
 import androidx.recyclerview.widget.LinearLayoutManager
+import com.google.android.material.transition.MaterialElevationScale
 import com.wbrawner.trainterval.R
 import com.wbrawner.trainterval.shared.IntervalTimer
 import com.wbrawner.trainterval.timerlist.IntervalTimerListState.*
@@ -33,6 +36,11 @@ class TimerListFragment : Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+        postponeEnterTransition()
+        view.doOnPreDraw { startPostponedEnterTransition() }
+        exitTransition = MaterialElevationScale(false)
+        reenterTransition = MaterialElevationScale(true)
+        allowReturnTransitionOverlap = false
         (activity as? AppCompatActivity)?.let {
             it.setSupportActionBar(toolbar)
             it.supportActionBar?.setDisplayHomeAsUpEnabled(false)
@@ -55,7 +63,12 @@ class TimerListFragment : Fragment() {
                 is EmptyListState -> renderEmptyList()
                 is SuccessListState -> renderSuccessState(state.timers)
                 is ErrorState -> renderErrorState(state.message)
-                is CreateTimer -> findNavController().navigate(R.id.timerFormFragment)
+                is CreateTimer -> findNavController().navigate(
+                    R.id.timerFormFragment,
+                    null,
+                    null,
+                    FragmentNavigatorExtras(addTimerButton to "fabContainer")
+                )
                 is EditTimer -> findNavController().navigate(R.id.timerFormFragment)
                 is OpenTimer -> findNavController().navigate(
                     R.id.activeTimerFragment,

app/src/main/res/layout/fragment_timer_form.xml

@@ -1,11 +1,13 @@
 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/timerFormFragment"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:animateLayoutChanges="true"
     android:fillViewport="true"
     android:fitsSystemWindows="true"
+    android:transitionName="fabContainer"
     tools:context="com.wbrawner.trainterval.timerform.TimerFormFragment">
 
     <androidx.core.widget.NestedScrollView

app/src/main/res/layout/fragment_timer_list.xml

@@ -47,6 +47,7 @@
         android:layout_gravity="bottom|end"
         android:layout_margin="16dp"
         android:src="@drawable/ic_add"
+        android:transitionName="fabContainer"
         android:visibility="gone"
         app:backgroundTint="@color/colorAccent"
         tools:visibility="visible" />

app/src/main/res/values/styles.xml

@@ -8,6 +8,7 @@
         <item name="colorAccent">@color/colorAccent</item>
         <item name="android:windowTranslucentStatus">true</item>
         <item name="android:windowTranslucentNavigation">true</item>
+        <item name="android:windowContentTransitions">true</item>
     </style>
 
 </resources>

build.gradle

@@ -11,7 +11,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.0.1'
+        classpath 'com.android.tools.build:gradle:4.0.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
 
         // NOTE: Do not place your application dependencies here; they belong