Adds Shared Transition between Home and Search

app/src/main/java/org/mozilla/fenix/components/toolbar/ToolbarComponent.kt

@@ -47,6 +47,7 @@ class ToolbarComponent(
     )
 
     init {
+        getView().transitionName = "toolbar_transition"
         bind()
         applyTheme()
     }

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -55,6 +55,7 @@ import org.mozilla.fenix.ext.urlToTrimmedHost
 import org.mozilla.fenix.home.sessioncontrol.CollectionAction
 import org.mozilla.fenix.home.sessioncontrol.Mode
 import org.mozilla.fenix.home.sessioncontrol.OnboardingAction
+import org.mozilla.fenix.home.sessioncontrol.OnboardingState
 import org.mozilla.fenix.home.sessioncontrol.SessionControlAction
 import org.mozilla.fenix.home.sessioncontrol.SessionControlChange
 import org.mozilla.fenix.home.sessioncontrol.SessionControlComponent
@@ -63,7 +64,6 @@ import org.mozilla.fenix.home.sessioncontrol.SessionControlViewModel
 import org.mozilla.fenix.home.sessioncontrol.Tab
 import org.mozilla.fenix.home.sessioncontrol.TabAction
 import org.mozilla.fenix.home.sessioncontrol.TabCollection
-import org.mozilla.fenix.home.sessioncontrol.OnboardingState
 import org.mozilla.fenix.lib.Do
 import org.mozilla.fenix.mvi.ActionBusFactory
 import org.mozilla.fenix.mvi.getAutoDisposeObservable
@@ -171,7 +171,7 @@ class HomeFragment : Fragment(), CoroutineScope, AccountObserver {
             searchIcon.setBounds(0, 0, iconSize, iconSize)
 
             runBlocking(Dispatchers.Main) {
-                view.toolbar.setCompoundDrawables(searchIcon, null, null, null)
+                search_engine_icon.setImageDrawable(searchIcon)
             }
         }
 
@@ -188,7 +188,13 @@ class HomeFragment : Fragment(), CoroutineScope, AccountObserver {
             invokePendingDeleteJobs()
             onboarding.finish()
             val directions = HomeFragmentDirections.actionHomeFragmentToSearchFragment(null)
-            Navigation.findNavController(it).navigate(directions)
+            val extras =
+                FragmentNavigator.Extras.Builder()
+                    .addSharedElement(it, "toolbar_transition")
+                    .addSharedElement(toolbar_wrapper, "toolbar_wrapper_transition")
+                    .addSharedElement(search_engine_icon, "toolbar_icon_transition")
+                    .build()
+            Navigation.findNavController(it).navigate(directions, extras)
 
             requireComponents.analytics.metrics.track(Event.SearchBarTapped(Event.SearchBarTapped.Source.HOME))
         }

app/src/main/java/org/mozilla/fenix/search/SearchFragment.kt

@@ -19,6 +19,7 @@ import androidx.appcompat.app.AlertDialog
 import androidx.appcompat.app.AppCompatActivity
 import androidx.fragment.app.Fragment
 import androidx.navigation.Navigation
+import androidx.transition.TransitionInflater
 import kotlinx.android.synthetic.main.fragment_search.*
 import kotlinx.android.synthetic.main.fragment_search.view.*
 import mozilla.components.browser.search.SearchEngine
@@ -59,6 +60,12 @@ class SearchFragment : Fragment(), BackHandler {
     private val qrFeature = ViewBoundFeatureWrapper<QrFeature>()
     private var permissionDidUpdate = false
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        postponeEnterTransition()
+        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
+    }
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -172,6 +179,8 @@ class SearchFragment : Fragment(), BackHandler {
                 requireComponents.analytics.metrics.track(Event.SearchShortcutMenuOpened)
             }
         }
+
+        startPostponedEnterTransition()
     }
 
     override fun onResume() {

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

@@ -50,6 +50,7 @@
 
         <org.mozilla.fenix.home.SearchView
             android:id="@+id/toolbar_wrapper"
+            android:transitionName="toolbar_wrapper_transition"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginEnd="16dp"
@@ -61,21 +62,26 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/wordmark">
 
+            <ImageView
+                android:id="@+id/search_engine_icon"
+                android:transitionName="toolbar_icon_transition"
+                android:layout_margin="12dp"
+                android:layout_width="24dp"
+                android:layout_height="24dp" />
+
             <TextView
+                android:transitionName="toolbar_transition"
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
+                android:layout_height="match_parent"
-                android:paddingStart="12sp"
+                android:layout_marginStart="47dp"
-                android:paddingEnd="12sp"
+                android:padding="12dp"
-                android:paddingTop="16sp"
-                android:paddingBottom="16sp"
-                android:drawablePadding="12sp"
                 android:clickable="true"
                 android:focusable="true"
-                android:gravity="center_vertical"
+                android:layout_gravity="center_vertical"
                 android:text="@string/search_hint"
                 android:textColor="?primaryText"
-                android:textSize="14sp" />
+                android:textSize="15sp" />
         </org.mozilla.fenix.home.SearchView>
 
         <View

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

@@ -13,6 +13,7 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/toolbar_wrapper"
+        android:transitionName="toolbar_wrapper_transition"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="16dp"
@@ -25,6 +26,7 @@
         app:layout_constraintTop_toTopOf="parent">
         <ImageView
             android:id="@+id/search_engine_icon"
+            android:transitionName="toolbar_icon_transition"
             android:layout_margin="12dp"
             android:layout_width="24dp"
             android:layout_height="24dp"

app/src/main/res/navigation/nav_graph.xml

@@ -24,7 +24,11 @@
             app:destination="@+id/turnOnSyncFragment" />
         <action
             android:id="@+id/action_homeFragment_to_searchFragment"
-            app:destination="@id/searchFragment" />
+            app:destination="@id/searchFragment"
+            app:enterAnim="@anim/fade_in"
+            app:exitAnim="@anim/fade_out"
+            app:popEnterAnim="@anim/fade_in"
+            app:popExitAnim="@anim/fade_out" />
         <action
             android:id="@+id/action_homeFragment_to_browserFragment"
             app:destination="@id/browserFragment"