Skip to content

Commit c550cd2

Browse files
0nko0nko
authored
Post visual update: Update the shadows for message cards (#6699)
Task/Issue URL: https://app.asana.com/1/137249556945/project/488551667048375/task/1211170754517884?focus=true ### Description This PR updates the message components: - Updated corner radius to 16dp - Updated background shadow (For API >= 28) Figma design: https://www.figma.com/design/triNDLtPcx4by8Hsw9CzYt/%F0%9F%96%8D%EF%B8%8F-2025-Visual-Design-Update---1-Tap-AI-ChatOS---Android?node-id=9026-13597&t=SDA77UdXNkaAqBAr-1 ### Steps to test this PR _Device with API >= 28_ - [ ] Open the ADS preview screen in developer settings - [ ] Verify the message card style matches the Figma design _Device with API < 28_ - [ ] Open the ADS preview screen in developer settings - [ ] Verify the message card corner radius is 16dp - [ ] Verify the shadow looks like before ### UI changes <img width="350" height="2400" alt="image" src="https://github.com/user-attachments/assets/917399b1-9aff-4903-ab05-21721fed6ac6" /> <img width="350" height="2400" alt="image" src="https://github.com/user-attachments/assets/4bcf6f66-f217-4d0d-b558-6f0d04d97b65" />
1 parent 4c1fb2f commit c550cd2

File tree

7 files changed

+252
-241
lines changed

7 files changed

+252
-241
lines changed

‎app-tracking-protection/vpn-impl/src/main/java/com/duckduckgo/mobile/android/vpn/ui/newtab/AppTrackingProtectionStateView.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@
1717
package com.duckduckgo.mobile.android.vpn.ui.newtab
1818

1919
import android.content.Context
20+
import android.os.Build
2021
import android.util.AttributeSet
2122
import android.view.View
2223
import android.widget.FrameLayout
2324
import androidx.core.text.HtmlCompat
2425
import androidx.lifecycle.*
2526
import com.duckduckgo.anvil.annotations.ContributesActivePlugin
2627
import com.duckduckgo.anvil.annotations.InjectWith
28+
import com.duckduckgo.common.ui.view.addBottomShadow
2729
import com.duckduckgo.common.ui.view.gone
2830
import com.duckduckgo.common.ui.view.show
2931
import com.duckduckgo.common.ui.viewbinding.viewBinding
@@ -90,6 +92,10 @@ class AppTrackingProtectionStateView @JvmOverloads constructor(
9092
deviceShieldPixels.didShowNewTabSummary()
9193

9294
configureViewReferences()
95+
96+
if (Build.VERSION.SDK_INT >= 28) {
97+
binding.root.addBottomShadow()
98+
}
9399
}
94100

95101
override fun onDetachedFromWindow() {

‎app-tracking-protection/vpn-impl/src/main/res/layout/fragment_device_shield_cta.xml‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,49 @@
1-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2-
android:id="@+id/deviceShieldCtaLayout"
1+
<com.google.android.material.card.MaterialCardView
2+
xmlns:android="http://schemas.android.com/apk/res/android"
33
xmlns:app="http://schemas.android.com/apk/res-auto"
44
xmlns:tools="http://schemas.android.com/tools"
5-
android:layout_width="match_parent"
6-
android:layout_height="wrap_content"
7-
android:orientation="horizontal"
5+
android:id="@+id/deviceShieldCtaLayout"
6+
style="@style/Widget.DuckDuckGo.MessageCta"
7+
android:clipChildren="false"
88
tools:visibility="visible"
9-
android:visibility="gone"
10-
style="@style/Widget.DuckDuckGo.Card">
9+
android:visibility="gone">
1110

12-
<com.duckduckgo.common.ui.view.text.DaxTextView
13-
android:id="@+id/deviceShieldCtaHeader"
14-
android:layout_width="0dp"
11+
<LinearLayout
12+
android:layout_width="match_parent"
1513
android:layout_height="wrap_content"
16-
android:layout_weight="1"
17-
android:layout_marginStart="22dp"
18-
android:layout_marginTop="16dp"
19-
android:layout_marginEnd="16dp"
20-
app:layout_constraintBottom_toBottomOf="parent"
21-
app:layout_constraintEnd_toStartOf="@+id/deviceShieldCtaImage"
22-
app:layout_constraintStart_toStartOf="parent"
23-
app:layout_constraintTop_toTopOf="parent"
24-
app:typography="body2"
25-
tools:text="App Tracking Protection is enabled and blocking tracking attempts across your apps" />
14+
android:orientation="horizontal">
15+
16+
<com.duckduckgo.common.ui.view.text.DaxTextView
17+
android:id="@+id/deviceShieldCtaHeader"
18+
android:layout_width="0dp"
19+
android:layout_height="wrap_content"
20+
android:layout_weight="1"
21+
android:layout_marginStart="22dp"
22+
android:layout_marginTop="16dp"
23+
android:layout_marginEnd="16dp"
24+
android:layout_marginBottom="16dp"
25+
app:layout_constraintBottom_toBottomOf="parent"
26+
app:layout_constraintEnd_toStartOf="@+id/deviceShieldCtaImage"
27+
app:layout_constraintStart_toStartOf="parent"
28+
app:layout_constraintTop_toTopOf="parent"
29+
app:typography="body2"
30+
tools:text="App Tracking Protection is enabled and blocking tracking attempts across your apps" />
31+
32+
<ImageView
33+
android:id="@+id/deviceShieldCtaImage"
34+
android:layout_width="48dp"
35+
android:layout_height="48dp"
36+
android:layout_marginTop="16dp"
37+
android:layout_marginEnd="16dp"
38+
android:layout_marginBottom="16dp"
39+
android:scaleType="centerCrop"
40+
android:src="@drawable/ic_apptp_default"
41+
app:layout_constraintBottom_toBottomOf="parent"
42+
app:layout_constraintEnd_toEndOf="parent"
43+
app:layout_constraintTop_toTopOf="parent"
44+
tools:ignore="ContentDescription" />
2645

27-
<ImageView
28-
android:id="@+id/deviceShieldCtaImage"
29-
android:layout_width="48dp"
30-
android:layout_height="48dp"
31-
android:layout_marginTop="16dp"
32-
android:layout_marginEnd="16dp"
33-
android:scaleType="centerCrop"
34-
android:src="@drawable/ic_apptp_default"
35-
app:layout_constraintBottom_toBottomOf="parent"
36-
app:layout_constraintEnd_toEndOf="parent"
37-
app:layout_constraintTop_toTopOf="parent"
38-
tools:ignore="ContentDescription" />
3946

47+
</LinearLayout>
4048

41-
</LinearLayout>
49+
</com.google.android.material.card.MaterialCardView>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
package com.duckduckgo.common.ui.view
1818

1919
import android.content.Context
20+
import android.os.Build
2021
import android.util.AttributeSet
2122
import android.widget.FrameLayout
2223
import androidx.annotation.DrawableRes
@@ -61,6 +62,11 @@ class MessageCta : FrameLayout {
6162
) : super(context, attrs, defStyle) {
6263

6364
layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
65+
66+
if (Build.VERSION.SDK_INT >= 28) {
67+
binding.remoteMessage.remoteMessage.addBottomShadow()
68+
binding.promoRemoteMessage.promoMessage.addBottomShadow()
69+
}
6470
}
6571

6672
fun setMessage(message: Message) {

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

Lines changed: 0 additions & 20 deletions
This file was deleted.

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

Lines changed: 73 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -14,72 +14,84 @@
1414
~ limitations under the License.
1515
-->
1616

17-
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
<com.google.android.material.card.MaterialCardView
18+
xmlns:android="http://schemas.android.com/apk/res/android"
1819
xmlns:app="http://schemas.android.com/apk/res-auto"
1920
xmlns:tools="http://schemas.android.com/tools"
20-
style="@style/Widget.DuckDuckGo.MessageCta">
21+
android:id="@+id/promoMessage"
22+
style="@style/Widget.DuckDuckGo.MessageCta"
23+
android:clipChildren="false"
24+
tools:visibility="visible"
25+
android:visibility="gone">
2126

22-
<ImageView
23-
android:id="@+id/close"
24-
android:layout_width="@dimen/messageCtaCloseButtonSize"
25-
android:layout_height="@dimen/messageCtaCloseButtonSize"
26-
android:background="?selectableItemBackground"
27-
android:padding="@dimen/keyline_2"
28-
android:src="@drawable/ic_close_24"
29-
app:layout_constraintEnd_toEndOf="parent"
30-
app:layout_constraintTop_toTopOf="parent" />
31-
32-
<com.duckduckgo.common.ui.view.text.DaxTextView
33-
android:id="@+id/messageTitle"
34-
android:layout_width="0dp"
27+
<androidx.constraintlayout.widget.ConstraintLayout
28+
android:layout_width="match_parent"
3529
android:layout_height="wrap_content"
36-
android:layout_marginStart="@dimen/keyline_2"
37-
android:layout_marginTop="@dimen/keyline_1"
38-
android:layout_marginEnd="@dimen/keyline_2"
39-
android:gravity="center"
40-
app:layout_constraintEnd_toEndOf="parent"
41-
app:layout_constraintStart_toStartOf="parent"
42-
app:layout_constraintTop_toBottomOf="@id/close"
43-
app:layout_goneMarginTop="@dimen/keyline_4"
44-
app:typography="h2"
45-
tools:text="Placeholder Title" />
30+
android:paddingBottom="@dimen/keyline_4">
4631

47-
<ImageView
48-
android:id="@+id/illustration"
49-
android:layout_width="wrap_content"
50-
android:layout_height="wrap_content"
51-
android:layout_marginTop="@dimen/keyline_3"
52-
android:layout_marginBottom="@dimen/keyline_2"
53-
app:layout_constraintBottom_toTopOf="@id/messageSubtitle"
54-
app:layout_constraintEnd_toEndOf="parent"
55-
app:layout_constraintStart_toStartOf="parent"
56-
app:layout_constraintTop_toBottomOf="@id/messageTitle"
57-
tools:src="@drawable/desktop_promo_artwork" />
32+
<ImageView
33+
android:id="@+id/close"
34+
android:layout_width="@dimen/messageCtaCloseButtonSize"
35+
android:layout_height="@dimen/messageCtaCloseButtonSize"
36+
android:background="?selectableItemBackground"
37+
android:padding="@dimen/keyline_2"
38+
android:src="@drawable/ic_close_24"
39+
app:layout_constraintEnd_toEndOf="parent"
40+
app:layout_constraintTop_toTopOf="parent" />
5841

59-
<com.duckduckgo.common.ui.view.text.DaxTextView
60-
android:id="@+id/messageSubtitle"
61-
android:layout_width="0dp"
62-
android:layout_height="wrap_content"
63-
android:layout_marginStart="@dimen/keyline_4"
64-
android:layout_marginEnd="@dimen/keyline_4"
65-
android:gravity="center"
66-
app:layout_constraintBottom_toTopOf="@id/actionButton"
67-
app:layout_constraintEnd_toEndOf="parent"
68-
app:layout_constraintStart_toStartOf="parent"
69-
app:layout_constraintTop_toBottomOf="@+id/illustration"
70-
app:typography="body1"
71-
tools:text="Body text goes here. This component can be used with one or two buttons." />
42+
<com.duckduckgo.common.ui.view.text.DaxTextView
43+
android:id="@+id/messageTitle"
44+
android:layout_width="0dp"
45+
android:layout_height="wrap_content"
46+
android:layout_marginStart="@dimen/keyline_2"
47+
android:layout_marginTop="@dimen/keyline_1"
48+
android:layout_marginEnd="@dimen/keyline_2"
49+
android:gravity="center"
50+
app:layout_constraintEnd_toEndOf="parent"
51+
app:layout_constraintStart_toStartOf="parent"
52+
app:layout_constraintTop_toBottomOf="@id/close"
53+
app:layout_goneMarginTop="@dimen/keyline_4"
54+
app:typography="h2"
55+
tools:text="Placeholder Title" />
7256

73-
<com.duckduckgo.common.ui.view.button.DaxButtonSecondary
74-
android:id="@+id/actionButton"
75-
android:layout_width="wrap_content"
76-
android:layout_height="wrap_content"
77-
android:layout_marginTop="@dimen/keyline_2"
78-
app:layout_constraintBottom_toBottomOf="parent"
79-
app:layout_constraintEnd_toEndOf="parent"
80-
app:layout_constraintStart_toStartOf="parent"
81-
app:layout_constraintTop_toBottomOf="@id/messageSubtitle"
82-
app:layout_goneMarginStart="0dp"
83-
tools:text="action button" />
57+
<ImageView
58+
android:id="@+id/illustration"
59+
android:layout_width="wrap_content"
60+
android:layout_height="wrap_content"
61+
android:layout_marginTop="@dimen/keyline_3"
62+
android:layout_marginBottom="@dimen/keyline_2"
63+
app:layout_constraintBottom_toTopOf="@id/messageSubtitle"
64+
app:layout_constraintEnd_toEndOf="parent"
65+
app:layout_constraintStart_toStartOf="parent"
66+
app:layout_constraintTop_toBottomOf="@id/messageTitle"
67+
tools:src="@drawable/desktop_promo_artwork" />
68+
69+
<com.duckduckgo.common.ui.view.text.DaxTextView
70+
android:id="@+id/messageSubtitle"
71+
android:layout_width="0dp"
72+
android:layout_height="wrap_content"
73+
android:layout_marginStart="@dimen/keyline_4"
74+
android:layout_marginEnd="@dimen/keyline_4"
75+
android:gravity="center"
76+
app:layout_constraintBottom_toTopOf="@id/actionButton"
77+
app:layout_constraintEnd_toEndOf="parent"
78+
app:layout_constraintStart_toStartOf="parent"
79+
app:layout_constraintTop_toBottomOf="@+id/illustration"
80+
app:typography="body1"
81+
tools:text="Body text goes here. This component can be used with one or two buttons." />
82+
83+
<com.duckduckgo.common.ui.view.button.DaxButtonSecondary
84+
android:id="@+id/actionButton"
85+
android:layout_width="wrap_content"
86+
android:layout_height="wrap_content"
87+
android:layout_marginTop="@dimen/keyline_2"
88+
app:layout_constraintBottom_toBottomOf="parent"
89+
app:layout_constraintEnd_toEndOf="parent"
90+
app:layout_constraintStart_toStartOf="parent"
91+
app:layout_constraintTop_toBottomOf="@id/messageSubtitle"
92+
app:layout_goneMarginStart="0dp"
93+
tools:text="action button" />
94+
95+
</androidx.constraintlayout.widget.ConstraintLayout>
8496

85-
</androidx.constraintlayout.widget.ConstraintLayout>
97+
</com.google.android.material.card.MaterialCardView>

0 commit comments

Comments
 (0)