Remove blue line and add shadow to Input Field (#6408)

Task/Issue URL:
https://app.asana.com/1/137249556945/project/488551667048375/task/1210707531805574?focus=true

### Description

- Removes the blue outline and adds a shadow (matching the browser
omnibar) to the Input Field.

### Steps to test this PR

- [x] Tap the browser omnibar
- [x] Verify that the Input Field has a shadow and no blue line

Author: joshliebe

app/src/main/java/com/duckduckgo/app/browser/BrowserActivity.kt

@@ -58,7 +58,6 @@ import com.duckduckgo.app.browser.databinding.IncludeOmnibarToolbarMockupBinding
 import com.duckduckgo.app.browser.databinding.IncludeSingleOmnibarToolbarMockupBinding
 import com.duckduckgo.app.browser.defaultbrowsing.prompts.ui.DefaultBrowserBottomSheetDialog
 import com.duckduckgo.app.browser.defaultbrowsing.prompts.ui.DefaultBrowserBottomSheetDialog.EventListener
-import com.duckduckgo.app.browser.omnibar.extensions.addBottomShadow
 import com.duckduckgo.app.browser.omnibar.model.OmnibarPosition.BOTTOM
 import com.duckduckgo.app.browser.omnibar.model.OmnibarPosition.TOP
 import com.duckduckgo.app.browser.omnibar.model.OmnibarType
@@ -99,6 +98,7 @@ import com.duckduckgo.browser.api.ui.BrowserScreens.BookmarksScreenNoParams
 import com.duckduckgo.browser.api.ui.BrowserScreens.SettingsScreenNoParams
 import com.duckduckgo.common.ui.DuckDuckGoActivity
 import com.duckduckgo.common.ui.tabs.SwipingTabsFeatureProvider
+import com.duckduckgo.common.ui.view.addBottomShadow
 import com.duckduckgo.common.ui.view.dialog.TextAlertDialogBuilder
 import com.duckduckgo.common.ui.view.gone
 import com.duckduckgo.common.ui.view.isFullScreen

app/src/main/java/com/duckduckgo/app/browser/omnibar/experiments/SingleOmnibarLayout.kt

@@ -37,8 +37,8 @@ import com.duckduckgo.app.browser.omnibar.Omnibar.ViewMode
 import com.duckduckgo.app.browser.omnibar.OmnibarItemPressedListener
 import com.duckduckgo.app.browser.omnibar.OmnibarLayout
 import com.duckduckgo.app.browser.omnibar.OmnibarLayoutViewModel.ViewState
-import com.duckduckgo.app.browser.omnibar.extensions.addBottomShadow
 import com.duckduckgo.app.browser.omnibar.model.OmnibarPosition
+import com.duckduckgo.common.ui.view.addBottomShadow
 import com.duckduckgo.common.ui.view.gone
 import com.duckduckgo.common.ui.view.hide
 import com.duckduckgo.common.ui.view.show

app/src/main/java/com/duckduckgo/app/browser/omnibar/extensions/ViewExtensions.kt

@@ -18,12 +18,18 @@ package com.duckduckgo.common.ui.view
 
 import android.content.Context
 import android.content.res.Resources
+import android.graphics.Outline
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewOutlineProvider
 import android.view.inputmethod.InputMethodManager
 import android.widget.CompoundButton
+import androidx.annotation.ColorInt
+import androidx.annotation.RequiresApi
 import androidx.annotation.StringRes
+import androidx.core.content.ContextCompat
 import androidx.core.view.children
+import com.google.android.material.card.MaterialCardView
 import com.google.android.material.slider.Slider
 import com.google.android.material.snackbar.BaseTransientBottomBar.Duration
 import com.google.android.material.snackbar.Snackbar
@@ -247,3 +253,51 @@ private inline fun <reified T : ViewGroup.LayoutParams> updateLayoutParam(
     block(params)
     view.layoutParams = params
 }
+
+/**
+ * Adds a custom shadow below a view with specified size in dp and rounded corners.
+ *
+ * @param shadowSizeDp The size of the shadow in dp
+ * @param offsetYDp Optional vertical offset in dp to position shadow below the view
+ * @param insetDp Optional horizontal inset in dp to prevent shadow from being cut off
+ * @param shadowColor Optional shadow color (Android P and above only)
+ */
+@RequiresApi(28)
+fun View.addBottomShadow(
+    shadowSizeDp: Float,
+    offsetYDp: Float = 2f,
+    insetDp: Float = 0f,
+    @ColorInt shadowColor: Int,
+) {
+    val shadowSize = shadowSizeDp.toPx(context)
+    val offsetY = offsetYDp.toPx(context)
+    val inset = insetDp.toPx(context).toInt()
+
+    // Get corner radius if view is a card
+    val cornerRadius = when (this) {
+        is MaterialCardView -> this.radius
+        else -> 0f
+    }
+
+    outlineProvider = object : ViewOutlineProvider() {
+        override fun getOutline(view: View, outline: Outline) {
+            // Create outline with rounded corners that match the view
+            outline.setRoundRect(
+                -inset,
+                0,
+                view.width + inset,
+                view.height,
+                cornerRadius,
+            )
+            // Make the shadow appear only below the view
+            outline.offset(0, offsetY.toInt())
+        }
+    }
+
+    // Set custom shadow color if specified (Android P and above)
+    outlineSpotShadowColor = ContextCompat.getColor(context, android.R.color.transparent)
+    outlineAmbientShadowColor = shadowColor
+
+    clipToOutline = false
+    elevation = shadowSize
+}

common/common-ui/src/main/java/com/duckduckgo/common/ui/view/ViewExtension.kt

@@ -220,7 +220,6 @@ class InputScreenFragment : DuckDuckGoFragment(R.layout.fragment_input_screen) {
 
     private fun exitInterstitial() {
         hideKeyboard(binding.inputModeWidget.inputField)
-        binding.inputModeWidget.animateOmnibarFocusedState(false)
         requireActivity().supportFinishAfterTransition()
     }
 

duckchat/duckchat-impl/src/main/java/com/duckduckgo/duckchat/impl/inputscreen/ui/InputScreenFragment.kt

@@ -16,8 +16,8 @@
 
 package com.duckduckgo.duckchat.impl.inputscreen.ui.view
 
-import android.animation.ValueAnimator
 import android.content.Context
+import android.os.Build
 import android.text.InputType
 import android.transition.ChangeBounds
 import android.transition.Fade
@@ -26,21 +26,15 @@ import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.view.animation.DecelerateInterpolator
 import android.view.inputmethod.EditorInfo
 import android.view.inputmethod.InputMethodManager
 import android.widget.EditText
 import androidx.annotation.IdRes
 import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.core.animation.addListener
 import androidx.core.view.isVisible
-import androidx.core.view.marginBottom
-import androidx.core.view.marginEnd
-import androidx.core.view.marginStart
-import androidx.core.view.marginTop
-import androidx.core.view.updateLayoutParams
 import androidx.core.widget.doOnTextChanged
 import com.duckduckgo.anvil.annotations.InjectWith
+import com.duckduckgo.common.ui.view.addBottomShadow
 import com.duckduckgo.di.scopes.ActivityScope
 import com.duckduckgo.duckchat.impl.R
 import com.duckduckgo.mobile.android.R as CommonR
@@ -54,27 +48,11 @@ class InputModeWidget @JvmOverloads constructor(
     defStyle: Int = 0,
 ) : ConstraintLayout(context, attrs, defStyle) {
 
-    private val omnibarCardMarginHorizontal by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarCardMarginHorizontal) }
-    private val omnibarCardMarginTop by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarCardMarginTop) }
-    private val omnibarCardMarginBottom by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarCardMarginBottom) }
-    private val omnibarCardFocusedMarginHorizontal by lazy {
-        resources.getDimensionPixelSize(
-            CommonR.dimen.experimentalOmnibarCardFocusedMarginHorizontal,
-        )
-    }
-    private val omnibarCardFocusedMarginTop by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarCardFocusedMarginTop) }
-    private val omnibarCardFocusedMarginBottom by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarCardFocusedMarginBottom) }
-
-    private val omnibarOutlineWidth by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarOutlineWidth) }
-    private val omnibarOutlineFocusedWidth by lazy { resources.getDimensionPixelSize(CommonR.dimen.experimentalOmnibarOutlineFocusedWidth) }
-
-    private val omnibarCard: MaterialCardView by lazy { findViewById(R.id.inputModeWidgetCard) }
-    private val omnibarContent: View by lazy { findViewById(R.id.inputModeWidgetCardContent) }
-
     val inputField: EditText
-    val inputFieldClearText: View
-    val inputModeWidgetBack: View
-    val inputModeSwitch: TabLayout
+    private val inputFieldClearText: View
+    private val inputModeWidgetBack: View
+    private val inputModeSwitch: TabLayout
+    private val inputModeWidgetCard: MaterialCardView
 
     var onBack: (() -> Unit)? = null
     var onSearchSent: ((String) -> Unit)? = null
@@ -97,7 +75,6 @@ class InputModeWidget @JvmOverloads constructor(
 
     @IdRes
     private var contentId: Int = View.NO_ID
-    private var focusAnimator: ValueAnimator? = null
     private var originalText: String? = null
     private var hasTextChangedFromOriginal = false
 
@@ -108,11 +85,13 @@ class InputModeWidget @JvmOverloads constructor(
         inputFieldClearText = findViewById(R.id.inputFieldClearText)
         inputModeWidgetBack = findViewById(R.id.InputModeWidgetBack)
         inputModeSwitch = findViewById(R.id.inputModeSwitch)
+        inputModeWidgetCard = findViewById(R.id.inputModeWidgetCard)
 
         configureClickListeners()
         configureInputBehavior()
         configureTabBehavior()
         applyModeSpecificInputBehaviour(isSearchTab = true)
+        configureShadow()
     }
 
     fun provideInitialText(text: String) {
@@ -135,10 +114,6 @@ class InputModeWidget @JvmOverloads constructor(
         setHorizontallyScrolling(false)
         setRawInputType(InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_URI or InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS)
 
-        setOnFocusChangeListener { _, hasFocus ->
-            animateOmnibarFocusedState(hasFocus)
-        }
-
         setOnEditorActionListener { _, actionId, _ ->
             if (actionId == EditorInfo.IME_ACTION_GO) {
                 submitMessage()
@@ -251,58 +226,6 @@ class InputModeWidget @JvmOverloads constructor(
         contentId = id
     }
 
-    fun animateOmnibarFocusedState(focused: Boolean) {
-        focusAnimator?.cancel()
-
-        val startTop = omnibarCard.marginTop
-        val startBottom = omnibarCard.marginBottom
-        val startStart = omnibarCard.marginStart
-        val startEnd = omnibarCard.marginEnd
-        val startStroke = omnibarCard.strokeWidth
-
-        val endTop = if (focused) omnibarCardFocusedMarginTop else omnibarCardMarginTop
-        val endBottom = if (focused) omnibarCardFocusedMarginBottom else omnibarCardMarginBottom
-        val endStart = if (focused) omnibarCardFocusedMarginHorizontal else omnibarCardMarginHorizontal
-        val endEnd = if (focused) omnibarCardFocusedMarginHorizontal else omnibarCardMarginHorizontal
-        val endStroke = if (focused) omnibarOutlineFocusedWidth else omnibarOutlineWidth
-
-        ValueAnimator.ofFloat(0f, 1f).apply {
-            duration = DEFAULT_ANIMATION_DURATION
-            interpolator = DecelerateInterpolator()
-            addUpdateListener { valueAnimator ->
-                val fraction = valueAnimator.animatedFraction
-                (omnibarCard.layoutParams as MarginLayoutParams).apply {
-                    leftMargin = (startStart + (endStart - startStart) * fraction).toInt()
-                    topMargin = (startTop + (endTop - startTop) * fraction).toInt()
-                    rightMargin = (startEnd + (endEnd - startEnd) * fraction).toInt()
-                    bottomMargin = (startBottom + (endBottom - startBottom) * fraction).toInt()
-                }.also { omnibarCard.layoutParams = it }
-                omnibarCard.strokeWidth = (startStroke + (endStroke - startStroke) * fraction).toInt()
-            }
-            addListener(
-                onStart = { lockContentDimensions() },
-                onEnd = { if (!focused) unlockContentDimensions() },
-                onCancel = { removeAllListeners() },
-            )
-            start()
-            focusAnimator = this
-        }
-    }
-
-    private fun lockContentDimensions() {
-        omnibarContent.updateLayoutParams {
-            width = omnibarContent.measuredWidth
-            height = ViewGroup.LayoutParams.WRAP_CONTENT
-        }
-    }
-
-    private fun unlockContentDimensions() {
-        omnibarContent.updateLayoutParams {
-            width = ViewGroup.LayoutParams.MATCH_PARENT
-            height = ViewGroup.LayoutParams.WRAP_CONTENT
-        }
-    }
-
     fun printNewLine() {
         val currentText = inputField.text.toString()
         val selectionStart = inputField.selectionStart
@@ -317,8 +240,18 @@ class InputModeWidget @JvmOverloads constructor(
         return text.ifBlank { null }
     }
 
+    private fun configureShadow() {
+        if (Build.VERSION.SDK_INT >= 28) {
+            inputModeWidgetCard.addBottomShadow(
+                shadowSizeDp = 12f,
+                offsetYDp = 3f,
+                insetDp = 3f,
+                shadowColor = context.getColor(CommonR.color.background_omnibar_shadow),
+            )
+        }
+    }
+
     companion object {
-        private const val DEFAULT_ANIMATION_DURATION = 300L
         private const val FADE_DURATION = 150L
         private const val MAX_LINES = 8
         private const val SEARCH_MIN_LINES = 1

duckchat/duckchat-impl/src/main/java/com/duckduckgo/duckchat/impl/inputscreen/ui/view/InputModeWidget.kt

@@ -19,7 +19,8 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/root"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:clipChildren="false">
 
     <com.duckduckgo.duckchat.impl.inputscreen.ui.view.InputModeWidget
         android:id="@+id/inputModeWidget"