Cleans up the elevation transition for the search bar on the homescreen

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

@@ -11,6 +11,7 @@ import android.transition.TransitionInflater
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewOutlineProvider
 import androidx.core.view.ViewCompat
 import androidx.fragment.app.Fragment
 import androidx.navigation.Navigation
@@ -35,15 +36,10 @@ class HomeFragment : Fragment() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
-        // Hide buttons that aren't used yet to prevent confusion
-//        menuButton.visibility = View.GONE
-//        privateBrowsingButton.visibility = View.GONE
-
         val searchIcon = requireComponents.search.searchEngineManager.getDefaultSearchEngine(requireContext()).let {
             BitmapDrawable(resources, it.icon)
         }
 
-        toolbar_wrapper.clipToOutline = false
         toolbar.setCompoundDrawablesWithIntrinsicBounds(searchIcon, null, null, null)
         toolbar.compoundDrawablePadding = (12f * Resources.getSystem().displayMetrics.density).roundToInt()
         toolbar.setOnClickListener { it ->

app/src/main/res/drawable/home_search_background_dark.xml

@@ -3,10 +3,10 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="#FFFFFF"/>
+    <solid android:color="@color/searchDarkBackground"/>
 
     <stroke android:width="1dp"
-            android:color="@color/searchStroke"/>
+            android:color="@color/searchStrokeAlternative"/>
 
     <corners android:bottomRightRadius="8dp"
              android:bottomLeftRadius="8dp"

app/src/main/res/drawable/home_search_background_dark_no_border.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/searchDarkBackgroundAlternative"/>
+
+    <corners android:bottomRightRadius="8dp"
+             android:bottomLeftRadius="8dp"
+             android:topLeftRadius="8dp"
+             android:topRightRadius="8dp"/>
+</shape>

app/src/main/res/drawable/home_search_background_light.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#FFFFFF"/>
+
+    <stroke android:width="1dp"
+            android:color="@color/searchStroke"/>
+
+    <corners android:radius="8dp"/>
+</shape>

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

@@ -8,7 +8,6 @@
     android:id="@+id/homeLayout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:clipToPadding="false"
     app:layoutDescription="@xml/home_scene"
     tools:context=".home.HomeFragment">
 
@@ -42,36 +41,34 @@
         app:layout_constraintTop_toBottomOf="@id/menuButton" />
 
     <FrameLayout
-        android:id="@+id/toolbar_wrapper"
+            android:id="@+id/toolbar_wrapper"
-        android:layout_width="0dp"
+            android:layout_width="0dp"
-        android:layout_height="wrap_content"
+            android:layout_height="wrap_content"
-        android:layout_marginLeft="16dp"
+            android:layout_marginLeft="16dp"
-        android:layout_marginTop="64dp"
+            android:layout_marginTop="64dp"
-        android:layout_marginRight="16dp"
+            android:layout_marginRight="16dp"
-        android:background="@drawable/home_search_background"
+            android:elevation="@dimen/toolbar_elevation"
-        android:clipToPadding="false"
+            android:background="@drawable/home_search_background_light"
-        android:elevation="5dp"
+            app:layout_constraintEnd_toEndOf="parent"
-        android:outlineProvider="paddedBounds"
+            app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/wordmark">
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/wordmark">
 
         <TextView
-            android:id="@+id/toolbar"
+                android:id="@+id/toolbar"
-            android:layout_width="match_parent"
+                android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+                android:layout_height="wrap_content"
-            android:paddingStart="12sp"
+                android:paddingStart="12sp"
-            android:paddingEnd="12sp"
+                android:paddingEnd="12sp"
-            android:paddingTop="16sp"
+                android:paddingTop="16sp"
-            android:paddingBottom="16sp"
+                android:paddingBottom="16sp"
-            android:drawablePadding="12sp"
+                android:drawablePadding="12sp"
-            android:clickable="true"
+                android:clickable="true"
-            android:focusable="true"
+                android:focusable="true"
-            android:gravity="center_vertical"
+                android:gravity="center_vertical"
-            android:text="@string/search_hint"
+                android:text="@string/search_hint"
-            android:textColor="@color/searchText"
+                android:textColor="@color/searchText"
-            android:textSize="14sp"
+                android:textSize="14sp"
-            android:transitionName="firstTransitionName" />
+                android:transitionName="firstTransitionName"/>
     </FrameLayout>
 
 </androidx.constraintlayout.motion.widget.MotionLayout>

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

@@ -17,7 +17,7 @@
         android:layout_marginLeft="16dp"
         android:layout_marginTop="24dp"
         android:layout_marginRight="16dp"
-        android:background="@drawable/home_search_background"
+        android:background="@drawable/home_search_background_light"
         android:clipToPadding="false"
         android:elevation="5dp"
         android:outlineProvider="paddedBounds"

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

@@ -7,7 +7,10 @@
     <color name="colorPrimaryDark">#00574B</color>
     <color name="colorAccent">#D81B60</color>
 
-    <color name="searchStroke">#331b215e</color>
+    <color name="searchDarkBackground">#F2F2F5</color>
+    <color name="searchDarkBackgroundAlternative">#E9E9ED</color>
+    <color name="searchStroke">#c5c8d7</color>
+    <color name="searchStrokeAlternative">#0A202340</color>
     <color name="searchText">#0C0C0D</color>
     <color name="offwhite">#f9f9fa</color>
     <color name="icons">#0C0C0D</color>

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

@@ -6,4 +6,5 @@
     <dimen name="glyph_button_height">48dp</dimen>
     <dimen name="glyph_button_width">48dp</dimen>
     <dimen name="mozac_browser_menu_corner_radius">14dp</dimen>
+    <dimen name="toolbar_elevation">7dp</dimen>
 </resources>

app/src/main/res/xml/home_scene.xml

@@ -47,6 +47,17 @@
                 motion:target="@id/privateBrowsingButton"
                 motion:framePosition="90"
                 android:alpha="0" />
+
+            <KeyAttribute
+                    motion:target="@id/toolbar_wrapper"
+                    motion:framePosition="0"
+                    android:elevation="@dimen/toolbar_elevation" />
+
+            <KeyAttribute
+                motion:target="@id/toolbar_wrapper"
+                motion:framePosition="50"
+                android:elevation="0dp" />
+
         </KeyFrameSet>
     </Transition>
 
@@ -92,6 +103,7 @@
             android:layout_width="@dimen/glyph_button_height"
             motion:layout_constraintEnd_toStartOf="@id/menuButton"
             motion:layout_constraintTop_toTopOf="@id/menuButton"/>
+
     </ConstraintSet>
 
 </MotionScene>