Update Input Mode Switch UI

common/common-ui/src/main/res/values/design-system-colors.xml

@@ -122,6 +122,9 @@
 
     <attr name="daxColorWebViewScrollbarTrack" format="color"/>
 
+    <attr name="daxColorInputModeIndicatorShadow" format="color"/>
+    <attr name="daxColorBackdrop" format="color"/>
+
     <!-- Design System Brand Colors -->
     <color name="disabledColor">#59000000</color>
     <color name="alertGreen">#21C000</color>

common/common-ui/src/main/res/values/design-system-theming.xml

@@ -247,6 +247,9 @@
         <item name="daxColorPreonboardingProgressBarEnd">@color/red10</item>
         <item name="daxColorOnboardingDialogBackground">@color/daxOnboardingDialogBackgroundColorDark</item>
 
+        <!-- Input Screen -->
+        <item name="daxColorBackdrop">@color/daxColorBackdropDark</item>
+        <item name="daxColorInputModeIndicatorShadow">@color/black</item>
     </style>
 
     <style name="Theme.DuckDuckGo.Light" parent="Theme.DuckDuckGo">
@@ -351,6 +354,9 @@
         <item name="daxColorPreonboardingProgressBarEnd">@color/red50</item>
         <item name="daxColorOnboardingDialogBackground">@color/daxOnboardingDialogBackgroundColorLight</item>
 
+        <!-- Input Screen -->
+        <item name="daxColorBackdrop">@color/daxColorBackdropLight</item>
+        <item name="daxColorInputModeIndicatorShadow">@color/gray60</item>
     </style>
 
     <style name="Theme.DuckDuckGo.Survey" parent="Theme.DuckDuckGo.Light">

common/common-ui/src/main/res/values/temp_colors.xml

@@ -46,4 +46,7 @@
     <color name="daxOnboardingDialogBackgroundColorLight">#FEFEFE</color>
     <color name="daxOnboardingDialogBackgroundColorDark">#011D34</color>
 
+    <!-- Input Screen -->
+    <color name="daxColorBackdropDark">#080808</color>
+    <color name="daxColorBackdropLight">#E0E0E0</color>
 </resources>

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

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2025 DuckDuckGo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.duckduckgo.duckchat.impl.inputscreen.ui.view
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.InsetDrawable
+import android.util.AttributeSet
+import android.view.ViewOutlineProvider
+import com.duckduckgo.duckchat.impl.R
+import com.google.android.material.color.MaterialColors
+import com.google.android.material.shape.CornerFamily
+import com.google.android.material.shape.MaterialShapeDrawable
+import com.google.android.material.shape.ShapeAppearanceModel
+import com.google.android.material.tabs.TabLayout
+
+class InputModeTabLayout @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = com.google.android.material.R.attr.tabStyle,
+) : TabLayout(context, attrs, defStyleAttr) {
+
+    init {
+        setSelectedTabIndicator(
+            buildShadowedTabIndicator(
+                context = context,
+                heightPx = resources.getDimensionPixelSize(R.dimen.inputModeTabIndicatorHeight),
+                horizontalInsetPx = resources.getDimensionPixelSize(R.dimen.inputModeTabIndicatorHorizontalInset),
+                elevationPx = resources.getDimensionPixelSize(R.dimen.inputModeTabIndicatorElevation),
+            ),
+        )
+        outlineProvider = ViewOutlineProvider.BACKGROUND
+        clipToOutline = true
+    }
+
+    private fun buildShadowedTabIndicator(
+        context: Context,
+        heightPx: Int,
+        horizontalInsetPx: Int,
+        elevationPx: Int,
+    ): InsetDrawable {
+        val cornerRadius = heightPx / 2f
+        val pill = ShapeAppearanceModel.builder()
+            .setAllCorners(CornerFamily.ROUNDED, cornerRadius)
+            .build()
+
+        val shadowedPill = object : MaterialShapeDrawable(pill) {
+            override fun getIntrinsicHeight(): Int = heightPx
+        }.apply {
+            shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS
+            initializeElevationOverlay(context)
+            val shadowColor = MaterialColors.getColor(
+                context,
+                com.duckduckgo.mobile.android.R.attr.daxColorInputModeIndicatorShadow,
+                Color.BLACK,
+            )
+            setShadowColor(shadowColor)
+            elevation = elevationPx.toFloat()
+        }
+
+        return InsetDrawable(shadowedPill, horizontalInsetPx, 0, horizontalInsetPx, 0)
+    }
+}

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

@@ -102,7 +102,7 @@ class InputModeWidget @JvmOverloads constructor(
     private var hasTextChangedFromOriginal = false
 
     init {
-        LayoutInflater.from(context).inflate(R.layout.view_input_mode_switch_layout, this, true)
+        LayoutInflater.from(context).inflate(R.layout.view_input_mode_switch_widget, this, true)
 
         inputField = findViewById(R.id.inputField)
         inputFieldClearText = findViewById(R.id.inputFieldClearText)

duckchat/duckchat-impl/src/main/res/drawable/ic_ai_chat_gradient_color_16.xml

@@ -0,0 +1,83 @@
+<!--
+  ~ Copyright (c) 2025 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <group>
+        <clip-path android:pathData="M0,0h16v16H0z" />
+        <path android:pathData="M1.164,14.763c-0.441,0.51 -0.014,1.284 0.65,1.17 2.655,-0.457 7.306,-1.338 9.199,-2.206C13.938,12.667 16,10.111 16,7.125 16,3.19 12.418,0 8,0S0,3.19 0,7.125c0,1.974 0.902,3.76 2.358,5.051 0.32,0.283 0.38,0.773 0.1,1.095l-1.294,1.492Z">
+            <aapt:attr name="android:fillColor">
+                <gradient
+                    android:endX="8"
+                    android:endY="15.944"
+                    android:startX="8"
+                    android:startY="0"
+                    android:type="linear">
+                    <item
+                        android:color="#FFA7B7FD"
+                        android:offset="0" />
+                    <item
+                        android:color="#FF5981F3"
+                        android:offset="1" />
+                </gradient>
+            </aapt:attr>
+        </path>
+        <path android:pathData="M15,7.125c0,2.495 -1.729,4.72 -4.328,5.662l-0.039,0.014 -0.037,0.017c-0.838,0.384 -2.376,0.803 -4.114,1.19a98.74,98.74 0,0 1,-4.03 0.797l0.762,-0.878c0.68,-0.785 0.487,-1.898 -0.193,-2.5 -1.227,-1.087 -1.973,-2.55 -2.019,-4.147L1,7.125C1,3.848 4.022,1 8,1V0l-0.207,0.003C3.54,0.099 0.11,3.153 0.003,6.94L0,7.125c0,1.913 0.846,3.649 2.223,4.929l0.135,0.122c0.32,0.283 0.38,0.773 0.1,1.096l-1.293,1.491c-0.442,0.51 -0.015,1.284 0.65,1.17 2.654,-0.456 7.305,-1.338 9.198,-2.206C13.938,12.667 16,10.111 16,7.125l-0.002,-0.184C15.888,3.091 12.349,0.001 8,0.001v1c3.916,0 6.905,2.759 6.998,5.97l0.002,0.154Z">
+            <aapt:attr name="android:fillColor">
+                <gradient
+                    android:endX="8"
+                    android:endY="15.944"
+                    android:startX="8"
+                    android:startY="0"
+                    android:type="linear">
+                    <item
+                        android:color="#FF7C99F7"
+                        android:offset="0" />
+                    <item
+                        android:color="#FF4B74EE"
+                        android:offset="1" />
+                </gradient>
+            </aapt:attr>
+        </path>
+        <path
+            android:fillColor="#fff"
+            android:pathData="M7.632,2.787c0.096,-0.383 0.64,-0.383 0.736,0l0.438,1.753c0.203,0.815 0.84,1.45 1.654,1.654l1.753,0.438c0.383,0.096 0.383,0.64 0,0.736l-1.753,0.438c-0.815,0.203 -1.45,0.84 -1.654,1.654l-0.438,1.753c-0.096,0.383 -0.64,0.383 -0.736,0L7.194,9.46A2.273,2.273 0,0 0,5.54 7.806l-1.753,-0.438c-0.383,-0.096 -0.383,-0.64 0,-0.736l1.753,-0.438A2.273,2.273 0,0 0,7.194 4.54l0.438,-1.753Z" />
+        <path android:pathData="M6.662,2.544C7,1.195 8.867,1.154 9.3,2.418l0.038,0.126 0.438,1.753c0.114,0.457 0.47,0.813 0.927,0.927l1.753,0.438c1.392,0.348 1.392,2.328 0,2.676l-1.753,0.438c-0.457,0.114 -0.813,0.47 -0.927,0.927l-0.438,1.753c-0.348,1.392 -2.328,1.392 -2.676,0l-0.438,-1.753a1.274,1.274 0,0 0,-0.927 -0.927l-1.753,-0.438c-1.392,-0.348 -1.392,-2.328 0,-2.676l1.753,-0.438c0.457,-0.114 0.813,-0.47 0.927,-0.927l0.438,-1.753ZM8,5.271A3.273,3.273 0,0 1,6.27 7,3.273 3.273,0 0,1 8,8.729 3.274,3.274 0,0 1,9.729 7,3.273 3.273,0 0,1 8,5.27Z">
+            <aapt:attr name="android:fillColor">
+                <gradient
+                    android:endX="8"
+                    android:endY="11.5"
+                    android:startX="8"
+                    android:startY="2.5"
+                    android:type="linear">
+                    <item
+                        android:color="#FF8EA6FA"
+                        android:offset="0" />
+                    <item
+                        android:color="#FF6186F4"
+                        android:offset="1" />
+                </gradient>
+            </aapt:attr>
+        </path>
+        <path
+            android:fillColor="#fff"
+            android:pathData="M7.632,2.787c0.096,-0.383 0.64,-0.383 0.736,0l0.438,1.753c0.203,0.815 0.84,1.45 1.654,1.654l1.753,0.438c0.383,0.096 0.383,0.64 0,0.736l-1.753,0.438c-0.815,0.203 -1.45,0.84 -1.654,1.654l-0.438,1.753c-0.096,0.383 -0.64,0.383 -0.736,0L7.194,9.46A2.273,2.273 0,0 0,5.54 7.806l-1.753,-0.438c-0.383,-0.096 -0.383,-0.64 0,-0.736l1.753,-0.438A2.273,2.273 0,0 0,7.194 4.54l0.438,-1.753Z" />
+    </group>
+</vector>

duckchat/duckchat-impl/src/main/res/drawable/tab_indicator.xml → duckchat/duckchat-impl/src/main/res/drawable/ic_chat_tab_selector.xml

@@ -14,7 +14,10 @@
   ~ limitations under the License.
   -->
 
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="rectangle">
-    <corners android:radius="20dp" />
-</shape>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item
+        android:state_selected="true"
+        android:drawable="@drawable/ic_ai_chat_gradient_color_16" />
+    <item
+        android:drawable="@drawable/ic_ai_chat_16" />
+</selector>

duckchat/duckchat-impl/src/main/res/drawable/ic_search_find_color_16.xml

@@ -0,0 +1,36 @@
+<!--
+  ~ Copyright (c) 2025 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <group>
+        <clip-path android:pathData="M0,0h16v16H0z" />
+        <path
+            android:fillColor="#ADC2FC"
+            android:pathData="M12,7A5,5 0,1 1,2 7a5,5 0,0 1,10 0Z" />
+        <path
+            android:fillAlpha="0.5"
+            android:fillColor="#fff"
+            android:pathData="M7,2a4.98,4.98 0,0 1,3.403 1.338,5.5 5.5,0 0,0 -7.065,7.065A5,5 0,0 1,7 2Z"
+            android:strokeAlpha="0.5" />
+        <path
+            android:fillColor="#557FF3"
+            android:pathData="M7,0a7,7 0,0 1,5.372 11.488l3.445,3.445 0.043,0.047a0.625,0.625 0,0 1,-0.88 0.88l-0.047,-0.043 -3.445,-3.445A7,7 0,1 1,7 0ZM7,1a6,6 0,1 0,0 12A6,6 0,0 0,7 1Z" />
+    </group>
+</vector>

duckchat/duckchat-impl/src/main/res/drawable/tab_icon_tint.xml → duckchat/duckchat-impl/src/main/res/drawable/ic_search_tab_selector.xml

@@ -16,8 +16,8 @@
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item
-        android:color="?attr/daxColorPrimaryText"
-        android:state_selected="true" />
+        android:state_selected="true"
+        android:drawable="@drawable/ic_search_find_color_16" />
     <item
-        android:color="?attr/daxColorSecondaryText" />
-</selector>
+        android:drawable="@drawable/ic_find_search_16" />
+</selector>

duckchat/duckchat-impl/src/main/res/drawable/tab_layout_background.xml

@@ -16,6 +16,6 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
-    <solid android:color="?attr/daxColorSurface" />
-    <corners android:radius="20dp" />
+    <solid android:color="?attr/daxColorBackdrop" />
+    <corners android:radius="19dp" />
 </shape>

duckchat/duckchat-impl/src/main/res/layout/view_chat_tab_indicator.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (c) 2025 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content">
+
+    <ImageView
+        android:id="@+id/tab_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/ic_chat_tab_selector"
+        android:layout_marginStart="@dimen/keyline_1"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"/>
+
+    <com.duckduckgo.common.ui.view.text.DaxTextView
+        android:id="@+id/tab_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/duck_chat_ai_tab"
+        android:layout_marginStart="@dimen/keyline_1"
+        app:typography="h4"
+        app:layout_constraintStart_toEndOf="@id/tab_icon"
+        app:layout_constraintBaseline_toBaselineOf="@id/tab_icon"/>
+
+</androidx.constraintlayout.widget.ConstraintLayout>

duckchat/duckchat-impl/src/main/res/layout/view_input_mode_switch_layout.xml → duckchat/duckchat-impl/src/main/res/layout/view_input_mode_switch_widget.xml

@@ -2,11 +2,11 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:theme="@style/Widget.DuckDuckGo.ToolbarTheme">
 
-    <com.google.android.material.tabs.TabLayout
+    <com.duckduckgo.duckchat.impl.inputscreen.ui.view.InputModeTabLayout
         android:id="@+id/inputModeSwitch"
         style="@style/Widget.DuckChat.TabLayout.Rounded"
         android:layout_width="wrap_content"
-        android:layout_height="40dp"
+        android:layout_height="@dimen/inputModeSwitchHeight"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent"
@@ -16,17 +16,15 @@
             android:id="@+id/tabSearch"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:icon="@drawable/ic_find_search_24"
-            android:text="@string/duck_chat_search_tab" />
+            android:layout="@layout/view_search_tab_indicator"/>
 
         <com.google.android.material.tabs.TabItem
             android:id="@+id/tabDuckAi"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:icon="@drawable/ic_ai_chat_24"
-            android:text="@string/duck_chat_ai_tab" />
+            android:layout="@layout/view_chat_tab_indicator"/>
 
-    </com.google.android.material.tabs.TabLayout>
+    </com.duckduckgo.duckchat.impl.inputscreen.ui.view.InputModeTabLayout>
 
     <ImageView
         android:id="@+id/InputModeWidgetBack"