Skip to content

Commit c695b14

Browse files
mikescamellmikescamell
authored
Onboarding Experiment: Add button styles (#6167)
Task/Issue URL: https://app.asana.com/1/137249556945/project/1207908166761516/task/1210435540768301 ### Description Added new button styles for the onboarding experiment. Created primary and secondary "buck" button variants with custom animations, colors, and styling for both light and dark themes. ### Steps to test this PR Note: As we're using temp colors and not making this part of the theme, enabling "Dark Theme" on the ADS screen will not work. This is of no consequence for the experiment as we'll be targeting people new to the app and we'll be using system theme settings (not app theme settings) to determine the button theme. _Button Styles_ - [x] Navigate to the component buttons screen and scroll to the bottom - [x] Verify the new "Onboarding Experiment Buttons" section displays both primary and secondary buck buttons - [x] Test the press animation on both buttons - [x] Verify the secondary button displays the search icon at the end - [x] Enable system dark theme - [x] Enable "Dark theme on ADS screen" so the buttons are more visible - [x] Check button colors match ### UI changes | Light | Dark | | ------ | ----- | |![Screenshot_20250602_112101](https://github.com/user-attachments/assets/72b9aaca-41b4-4c91-8966-a3f6aed8328f)|![Screenshot_20250602_112126](https://github.com/user-attachments/assets/cb1fd974-12ad-4fd2-a12a-bca0a4a7e1fd)|
1 parent 7b0c883 commit c695b14

File tree

7 files changed

+206
-0
lines changed

7 files changed

+206
-0
lines changed

‎common/common-ui/src/main/res/animator/buck_button_animator_set.xml

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
17+
<item android:state_pressed="true">
18+
<set android:ordering="together">
19+
<objectAnimator
20+
android:propertyName="scaleX"
21+
android:duration="100"
22+
android:valueTo="0.9"
23+
android:valueType="floatType"/>
24+
<objectAnimator
25+
android:propertyName="scaleY"
26+
android:duration="100"
27+
android:valueTo="0.9"
28+
android:valueType="floatType"/>
29+
</set>
30+
</item>
31+
<item>
32+
<set android:ordering="together">
33+
<objectAnimator
34+
android:propertyName="scaleX"
35+
android:duration="100"
36+
android:valueTo="1.0"
37+
android:valueType="floatType"/>
38+
<objectAnimator
39+
android:propertyName="scaleY"
40+
android:duration="100"
41+
android:valueTo="1.0"
42+
android:valueType="floatType"/>
43+
</set>
44+
</item>
45+
</selector>

‎common/common-ui/src/main/res/drawable/buck_button_primary_container_selector.xml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
2+
~ Copyright (c) 2018 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
17+
<item android:state_pressed="true">
18+
<scale
19+
android:drawable="@drawable/buck_primary_button_background"
20+
android:scaleWidth="90%"
21+
android:scaleHeight="90%"
22+
android:scaleGravity="center"
23+
/>
24+
</item>
25+
<item>
26+
<shape android:shape="rectangle">
27+
<solid android:color="@color/buckColorButtonPrimaryContainer" />
28+
<corners android:radius="30dp" />
29+
</shape>
30+
</item>
31+
</selector>

‎common/common-ui/src/main/res/drawable/buck_primary_button_background.xml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
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+
<shape xmlns:android="http://schemas.android.com/apk/res/android"
18+
android:shape="rectangle">
19+
<solid android:color="@color/buckColorButtonPrimaryContainer" />
20+
<corners android:radius="30dp" />
21+
</shape>

‎common/common-ui/src/main/res/layout/component_buttons.xml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
1919
xmlns:app="http://schemas.android.com/apk/res-auto"
20+
xmlns:tools="http://schemas.android.com/tools"
2021
android:layout_width="match_parent"
2122
android:layout_height="wrap_content"
2223
android:clipToPadding="false"
@@ -263,6 +264,32 @@
263264
android:layout_marginTop="16dp"
264265
app:srcCompat="@drawable/ic_union" />
265266

267+
<com.duckduckgo.common.ui.view.listitem.SectionHeaderListItem
268+
android:layout_width="match_parent"
269+
android:layout_height="wrap_content"
270+
app:primaryText="Onboarding Experiment Buttons" />
271+
272+
<com.duckduckgo.common.ui.view.button.DaxButtonPrimary
273+
android:id="@+id/buck_button_primary"
274+
style="@style/Widget.DuckDuckGo.BuckButton.TextButton.Primary"
275+
android:text="Primary buck"
276+
android:layout_width="wrap_content"
277+
android:layout_height="wrap_content"/>
278+
279+
<Space
280+
android:layout_width="match_parent"
281+
android:layout_height="16dp"/>
282+
283+
<com.google.android.material.button.MaterialButton
284+
android:id="@+id/buck_button_secondary"
285+
style="@style/Widget.DuckDuckGo.BuckButton.Secondary"
286+
android:text="Secondary buck"
287+
app:icon="@drawable/ic_find_search_24"
288+
app:iconGravity="end"
289+
android:layout_width="wrap_content"
290+
android:layout_height="wrap_content"
291+
tools:ignore="DeprecatedWidgetInXml" />
292+
266293
</LinearLayout>
267294

268295
</androidx.core.widget.NestedScrollView>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
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+
<resources>
18+
<color name="buckColorButtonPrimaryContainer">#FFDF80</color>
19+
<color name="buckColorButtonPrimaryContainerPressed">#CCAA00</color>
20+
<color name="buckColorButtonPrimaryText">@color/black</color>
21+
22+
<color name="buckColorButtonSecondaryBorder">#074C89</color>
23+
<color name="buckColorButtonSecondaryText">@color/white</color>
24+
<color name="buckColorButtonSecondaryContainerPressed">#0267C1</color>
25+
</resources>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@
3535
<color name="buckYellow">#FFE080</color>
3636
<color name="buckLightBlue">#4284F4</color>
3737

38+
<color name="buckColorButtonPrimaryContainer">#0267C1</color>
39+
<color name="buckColorButtonPrimaryContainerPressed">#002E5A</color>
40+
<color name="buckColorButtonPrimaryText">@color/white</color>
41+
42+
<color name="buckColorButtonSecondaryBorder">#0267C1</color>
43+
<color name="buckColorButtonSecondaryText">#0267C1</color>
44+
<color name="buckColorButtonSecondaryContainerPressed">#0267C1</color>
45+
3846
<color name="daxOnboardingDialogBackgroundColorLight">#FEFEFE</color>
3947
<color name="daxOnboardingDialogBackgroundColorDark">#011D34</color>
4048

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,53 @@
643643
<item name="android:minHeight">@dimen/checkListItemHeight</item>
644644
</style>
645645

646+
<style name="Typography.DuckDuckGo.BuckButton">
647+
<item name="fontFamily">@font/pangea_bold</item>
648+
<item name="android:textSize">16sp</item>
649+
<item name="lineHeight">11sp</item>
650+
</style>
651+
652+
<style name="Widget.DuckDuckGo.BuckButton.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
653+
<item name="cornerRadius">30dp</item>
654+
<item name="android:textAppearance">@style/Typography.DuckDuckGo.BuckButton</item>
655+
<item name="android:includeFontPadding">false</item>
656+
<item name="android:paddingLeft">0dp</item>
657+
<item name="android:paddingTop">0dp</item>
658+
<item name="android:paddingBottom">0dp</item>
659+
<item name="android:paddingRight">0dp</item>
660+
<item name="android:insetTop">0dp</item>
661+
<item name="android:insetBottom">0dp</item>
662+
<item name="iconPadding">@dimen/keyline_2</item>
663+
<item name="rippleColor">@color/buckColorButtonPrimaryContainerPressed</item>
664+
<item name="android:stateListAnimator">@animator/buck_button_animator_set</item>
665+
</style>
666+
667+
<style name="Widget.DuckDuckGo.BuckButton.TextButton.Primary">
668+
<item name="android:textColor">@color/buckColorButtonPrimaryText</item>
669+
<item name="backgroundTint">@color/buckColorButtonPrimaryContainer</item>
670+
<item name="iconTint">@color/buckColorButtonPrimaryText</item>
671+
</style>
672+
673+
<style name="Widget.DuckDuckGo.BuckButton.Secondary" parent="Widget.MaterialComponents.Button.OutlinedButton">
674+
<item name="cornerRadius">30dp</item>
675+
<item name="android:textAppearance">@style/Typography.DuckDuckGo.BuckButton</item>
676+
<item name="android:textColor">@color/buckColorButtonSecondaryText</item>
677+
<item name="android:includeFontPadding">false</item>
678+
<item name="android:paddingLeft">24dp</item>
679+
<item name="android:paddingTop">0dp</item>
680+
<item name="android:paddingBottom">0dp</item>
681+
<item name="android:paddingRight">20dp</item>
682+
<item name="iconGravity">end</item>
683+
<item name="iconSize">24dp</item>
684+
<item name="android:textSize">13sp</item>
685+
<item name="android:insetTop">0dp</item>
686+
<item name="android:insetBottom">0dp</item>
687+
<item name="rippleColor">@color/buckColorButtonSecondaryContainerPressed</item>
688+
<item name="android:gravity">start|center_vertical</item>
689+
<item name="android:stateListAnimator">@animator/buck_button_animator_set</item>
690+
<item name="strokeColor">@color/buckColorButtonSecondaryBorder</item>
691+
<item name="iconTint">@color/buckColorButtonSecondaryText</item>
692+
<item name="iconPadding">@dimen/keyline_2</item>
693+
</style>
694+
646695
</resources>

0 commit comments

Comments
 (0)