Skip to content

Commit b78c713

Browse files
joshliebejoshliebe
authored
Update Input Mode Switch UI (#6365)
Task/Issue URL: https://app.asana.com/1/137249556945/project/1200204095367872/task/1210660229743390 ### Description - Updates the toggle switch UI to the new spec. ### Steps to test this PR - [x] Open the input screen - [x] Verify the updated input mode switch UI - [x] Change to light/dark mode - [x] Verify the updated input mode switch UI
1 parent 260d9c0 commit b78c713

File tree

15 files changed

+339
-25
lines changed

15 files changed

+339
-25
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,9 @@
122122

123123
<attr name="daxColorWebViewScrollbarTrack" format="color"/>
124124

125+
<attr name="daxColorInputModeIndicatorShadow" format="color"/>
126+
<attr name="daxColorBackdrop" format="color"/>
127+
125128
<!-- Design System Brand Colors -->
126129
<color name="disabledColor">#59000000</color>
127130
<color name="alertGreen">#21C000</color>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,9 @@
247247
<item name="daxColorPreonboardingProgressBarEnd">@color/red10</item>
248248
<item name="daxColorOnboardingDialogBackground">@color/daxOnboardingDialogBackgroundColorDark</item>
249249

250+
<!-- Input Screen -->
251+
<item name="daxColorBackdrop">@color/daxColorBackdropDark</item>
252+
<item name="daxColorInputModeIndicatorShadow">@color/black</item>
250253
</style>
251254

252255
<style name="Theme.DuckDuckGo.Light" parent="Theme.DuckDuckGo">
@@ -351,6 +354,9 @@
351354
<item name="daxColorPreonboardingProgressBarEnd">@color/red50</item>
352355
<item name="daxColorOnboardingDialogBackground">@color/daxOnboardingDialogBackgroundColorLight</item>
353356

357+
<!-- Input Screen -->
358+
<item name="daxColorBackdrop">@color/daxColorBackdropLight</item>
359+
<item name="daxColorInputModeIndicatorShadow">@color/gray60</item>
354360
</style>
355361

356362
<style name="Theme.DuckDuckGo.Survey" parent="Theme.DuckDuckGo.Light">

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,7 @@
4646
<color name="daxOnboardingDialogBackgroundColorLight">#FEFEFE</color>
4747
<color name="daxOnboardingDialogBackgroundColorDark">#011D34</color>
4848

49+
<!-- Input Screen -->
50+
<color name="daxColorBackdropDark">#080808</color>
51+
<color name="daxColorBackdropLight">#E0E0E0</color>
4952
</resources>

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/*
2+
* Copyright (c) 2025 DuckDuckGo
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package com.duckduckgo.duckchat.impl.inputscreen.ui.view
18+
19+
import android.content.Context
20+
import android.graphics.Color
21+
import android.graphics.drawable.InsetDrawable
22+
import android.util.AttributeSet
23+
import android.view.ViewOutlineProvider
24+
import com.duckduckgo.duckchat.impl.R
25+
import com.google.android.material.color.MaterialColors
26+
import com.google.android.material.shape.CornerFamily
27+
import com.google.android.material.shape.MaterialShapeDrawable
28+
import com.google.android.material.shape.ShapeAppearanceModel
29+
import com.google.android.material.tabs.TabLayout
30+
31+
class InputModeTabLayout @JvmOverloads constructor(
32+
context: Context,
33+
attrs: AttributeSet? = null,
34+
defStyleAttr: Int = com.google.android.material.R.attr.tabStyle,
35+
) : TabLayout(context, attrs, defStyleAttr) {
36+
37+
init {
38+
setSelectedTabIndicator(
39+
buildShadowedTabIndicator(
40+
context = context,
41+
heightPx = resources.getDimensionPixelSize(R.dimen.inputModeTabIndicatorHeight),
42+
horizontalInsetPx = resources.getDimensionPixelSize(R.dimen.inputModeTabIndicatorHorizontalInset),
43+
elevationPx = resources.getDimensionPixelSize(R.dimen.inputModeTabIndicatorElevation),
44+
),
45+
)
46+
outlineProvider = ViewOutlineProvider.BACKGROUND
47+
clipToOutline = true
48+
}
49+
50+
private fun buildShadowedTabIndicator(
51+
context: Context,
52+
heightPx: Int,
53+
horizontalInsetPx: Int,
54+
elevationPx: Int,
55+
): InsetDrawable {
56+
val cornerRadius = heightPx / 2f
57+
val pill = ShapeAppearanceModel.builder()
58+
.setAllCorners(CornerFamily.ROUNDED, cornerRadius)
59+
.build()
60+
61+
val shadowedPill = object : MaterialShapeDrawable(pill) {
62+
override fun getIntrinsicHeight(): Int = heightPx
63+
}.apply {
64+
shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS
65+
initializeElevationOverlay(context)
66+
val shadowColor = MaterialColors.getColor(
67+
context,
68+
com.duckduckgo.mobile.android.R.attr.daxColorInputModeIndicatorShadow,
69+
Color.BLACK,
70+
)
71+
setShadowColor(shadowColor)
72+
elevation = elevationPx.toFloat()
73+
}
74+
75+
return InsetDrawable(shadowedPill, horizontalInsetPx, 0, horizontalInsetPx, 0)
76+
}
77+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ class InputModeWidget @JvmOverloads constructor(
102102
private var hasTextChangedFromOriginal = false
103103

104104
init {
105-
LayoutInflater.from(context).inflate(R.layout.view_input_mode_switch_layout, this, true)
105+
LayoutInflater.from(context).inflate(R.layout.view_input_mode_switch_widget, this, true)
106106

107107
inputField = findViewById(R.id.inputField)
108108
inputFieldClearText = findViewById(R.id.inputFieldClearText)

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!--
2+
~ Copyright (c) 2025 DuckDuckGo
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:aapt="http://schemas.android.com/aapt"
19+
android:width="16dp"
20+
android:height="16dp"
21+
android:viewportWidth="16"
22+
android:viewportHeight="16">
23+
<group>
24+
<clip-path android:pathData="M0,0h16v16H0z" />
25+
<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">
26+
<aapt:attr name="android:fillColor">
27+
<gradient
28+
android:endX="8"
29+
android:endY="15.944"
30+
android:startX="8"
31+
android:startY="0"
32+
android:type="linear">
33+
<item
34+
android:color="#FFA7B7FD"
35+
android:offset="0" />
36+
<item
37+
android:color="#FF5981F3"
38+
android:offset="1" />
39+
</gradient>
40+
</aapt:attr>
41+
</path>
42+
<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">
43+
<aapt:attr name="android:fillColor">
44+
<gradient
45+
android:endX="8"
46+
android:endY="15.944"
47+
android:startX="8"
48+
android:startY="0"
49+
android:type="linear">
50+
<item
51+
android:color="#FF7C99F7"
52+
android:offset="0" />
53+
<item
54+
android:color="#FF4B74EE"
55+
android:offset="1" />
56+
</gradient>
57+
</aapt:attr>
58+
</path>
59+
<path
60+
android:fillColor="#fff"
61+
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" />
62+
<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">
63+
<aapt:attr name="android:fillColor">
64+
<gradient
65+
android:endX="8"
66+
android:endY="11.5"
67+
android:startX="8"
68+
android:startY="2.5"
69+
android:type="linear">
70+
<item
71+
android:color="#FF8EA6FA"
72+
android:offset="0" />
73+
<item
74+
android:color="#FF6186F4"
75+
android:offset="1" />
76+
</gradient>
77+
</aapt:attr>
78+
</path>
79+
<path
80+
android:fillColor="#fff"
81+
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" />
82+
</group>
83+
</vector>

‎duckchat/duckchat-impl/src/main/res/drawable/tab_indicator.xml renamed to ‎duckchat/duckchat-impl/src/main/res/drawable/ic_chat_tab_selector.xml

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414
~ limitations under the License.
1515
-->
1616

17-
<shape xmlns:android="http://schemas.android.com/apk/res/android"
18-
android:shape="rectangle">
19-
<corners android:radius="20dp" />
20-
</shape>
17+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<item
19+
android:state_selected="true"
20+
android:drawable="@drawable/ic_ai_chat_gradient_color_16" />
21+
<item
22+
android:drawable="@drawable/ic_ai_chat_16" />
23+
</selector>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!--
2+
~ Copyright (c) 2025 DuckDuckGo
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
android:width="16dp"
19+
android:height="16dp"
20+
android:viewportWidth="16"
21+
android:viewportHeight="16">
22+
<group>
23+
<clip-path android:pathData="M0,0h16v16H0z" />
24+
<path
25+
android:fillColor="#ADC2FC"
26+
android:pathData="M12,7A5,5 0,1 1,2 7a5,5 0,0 1,10 0Z" />
27+
<path
28+
android:fillAlpha="0.5"
29+
android:fillColor="#fff"
30+
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"
31+
android:strokeAlpha="0.5" />
32+
<path
33+
android:fillColor="#557FF3"
34+
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" />
35+
</group>
36+
</vector>

‎duckchat/duckchat-impl/src/main/res/drawable/tab_icon_tint.xml renamed to ‎duckchat/duckchat-impl/src/main/res/drawable/ic_search_tab_selector.xml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616

1717
<selector xmlns:android="http://schemas.android.com/apk/res/android">
1818
<item
19-
android:color="?attr/daxColorPrimaryText"
20-
android:state_selected="true" />
19+
android:state_selected="true"
20+
android:drawable="@drawable/ic_search_find_color_16" />
2121
<item
22-
android:color="?attr/daxColorSecondaryText" />
23-
</selector>
22+
android:drawable="@drawable/ic_find_search_16" />
23+
</selector>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616

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

0 commit comments

Comments
 (0)