Migrate comparison chart to code (#4577)

Task/Issue URL: https://app.asana.com/0/1201807753394693/1207315451953296/f ### Description Migrate comparison chart to code so it can fetch translations ### Steps to test this PR _Pre steps_ Go to `ExtendedOnboardingExperiment` and set `fun isComparisonChartEnabled()` to always return `true` - [x] Fresh install - [x] Check comparison chart looks correct _Translations_ - [x] Change your device language - [x] Install from branch - [x] Check comparison chart is translated ### No UI changes
duckduckgo · May 23, 2024 · d31450c · d31450c
1 parent ad43235
commit d31450c
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 5 deletions.
diff --git a/app/src/main/java/com/duckduckgo/app/onboarding/ui/page/experiment/ExperimentWelcomePage.kt b/app/src/main/java/com/duckduckgo/app/onboarding/ui/page/experiment/ExperimentWelcomePage.kt
@@ -175,21 +175,21 @@ class ExperimentWelcomePage : OnboardingPageFragment(R.layout.content_onboarding
                     ctaText = it.getString(R.string.preOnboardingDaxDialog2Title)
                     binding.daxDialogCta.hiddenTextCta.text = ctaText.html(it)
                     binding.daxDialogCta.dialogTextCta.textInDialog = ctaText.html(it)
-                    binding.daxDialogCta.experimentDialogContentImage.alpha = MIN_ALPHA
-                    binding.daxDialogCta.experimentDialogContentImage.show()
                     binding.daxDialogCta.primaryCta.alpha = MIN_ALPHA
-                    binding.daxDialogCta.experimentDialogContentImage.setImageResource(R.drawable.comparison_chart)
+                    binding.daxDialogCta.comparisonChart.root.show()
+                    binding.daxDialogCta.comparisonChart.root.alpha = MIN_ALPHA
 
                     scheduleTypingAnimation {
                         binding.daxDialogCta.primaryCta.text = it.getString(R.string.preOnboardingDaxDialog2Button)
                         binding.daxDialogCta.primaryCta.setOnClickListener { viewModel.onPrimaryCtaClicked(COMPARISON_CHART) }
                         ViewCompat.animate(binding.daxDialogCta.primaryCta).alpha(MAX_ALPHA).duration = ANIMATION_DURATION
-                        ViewCompat.animate(binding.daxDialogCta.experimentDialogContentImage).alpha(MAX_ALPHA).duration = ANIMATION_DURATION
+                        ViewCompat.animate(binding.daxDialogCta.comparisonChart.root).alpha(MAX_ALPHA).duration = ANIMATION_DURATION
                     }
                 }
 
                 CELEBRATION -> {
                     binding.daxDialogCta.dialogTextCta.text = ""
+                    binding.daxDialogCta.comparisonChart.root.gone()
                     binding.daxDialogCta.primaryCta.alpha = MIN_ALPHA
                     ctaText = it.getString(R.string.preOnboardingDaxDialog3Title)
                     binding.daxDialogCta.hiddenTextCta.text = ctaText.html(it)

diff --git a/app/src/main/res/drawable-night/comparison_chart.png b/app/src/main/res/drawable-night/comparison_chart.png
diff --git a/app/src/main/res/drawable-nodpi/comparison_chart.png b/app/src/main/res/drawable-nodpi/comparison_chart.png
diff --git a/app/src/main/res/drawable/cross_24.xml b/app/src/main/res/drawable/cross_24.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M12.5,22.8C18.023,22.8 22.5,18.323 22.5,12.8C22.5,7.277 18.023,2.8 12.5,2.8C6.977,2.8 2.5,7.277 2.5,12.8C2.5,18.323 6.977,22.8 12.5,22.8Z"
+      android:fillColor="?attr/daxColorTextDisabled"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M16.707,10.007C17.098,9.617 17.098,8.983 16.707,8.593C16.317,8.202 15.683,8.202 15.293,8.593L12.5,11.386L9.707,8.593C9.317,8.202 8.683,8.202 8.293,8.593C7.902,8.983 7.902,9.617 8.293,10.007L11.086,12.8L8.293,15.593C7.902,15.983 7.902,16.617 8.293,17.007C8.683,17.398 9.317,17.398 9.707,17.007L12.5,14.214L15.293,17.007C15.683,17.398 16.317,17.398 16.707,17.007C17.098,16.617 17.098,15.983 16.707,15.593L13.914,12.8L16.707,10.007Z"
+      android:fillColor="#FAFAFA"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_chrome_comparison_chart.png b/app/src/main/res/drawable/ic_chrome_comparison_chart.png
diff --git a/app/src/main/res/drawable/ic_ddg_comparison_chart.png b/app/src/main/res/drawable/ic_ddg_comparison_chart.png
diff --git a/app/src/main/res/drawable/status_check.xml b/app/src/main/res/drawable/status_check.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="21dp"
+    android:height="21dp"
+    android:viewportWidth="21"
+    android:viewportHeight="21">
+  <path
+      android:pathData="M10.5,20.8C16.023,20.8 20.5,16.323 20.5,10.8C20.5,5.277 16.023,0.8 10.5,0.8C4.977,0.8 0.5,5.277 0.5,10.8C0.5,16.323 4.977,20.8 10.5,20.8Z"
+      android:fillColor="#21C000"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M15.188,7.289C15.573,7.634 15.606,8.227 15.261,8.613L9.949,14.55C9.766,14.754 9.503,14.868 9.229,14.862C8.955,14.856 8.698,14.731 8.524,14.519L5.712,11.081C5.384,10.68 5.443,10.09 5.844,9.762C6.245,9.434 6.835,9.493 7.163,9.894L9.282,12.483L13.864,7.362C14.209,6.977 14.802,6.944 15.188,7.289Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/layout/content_onboarding_welcome_experiment.xml b/app/src/main/res/layout/content_onboarding_welcome_experiment.xml
@@ -83,7 +83,8 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintWidth_max="600dp" />
+        app:layout_constraintWidth_max="600dp"
+        app:layout_constraintHeight_max="672dp"/>
 
     <nl.dionsegijn.konfetti.KonfettiView
         android:id="@+id/setAsDefaultKonfetti"

diff --git a/app/src/main/res/layout/experiment_pre_onboarding_dax_dialog_cta.xml b/app/src/main/res/layout/experiment_pre_onboarding_dax_dialog_cta.xml
@@ -84,6 +84,11 @@
                     android:adjustViewBounds="true"
                     android:visibility="gone" />
 
+                <include
+                    android:id="@+id/comparison_chart"
+                    android:visibility="gone"
+                    layout="@layout/pre_onboarding_comparison_chart" />
+
                 <com.duckduckgo.common.ui.view.button.DaxButtonPrimary
                     android:id="@+id/primaryCta"
                     android:layout_width="match_parent"

diff --git a/app/src/main/res/layout/pre_onboarding_comparison_chart.xml b/app/src/main/res/layout/pre_onboarding_comparison_chart.xml
@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (c) 2024 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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="@dimen/keyline_4"
+    android:alpha="0"
+    tools:alpha="1">
+
+    <ImageView
+        android:id="@+id/ddgLogo"
+        android:layout_width="wrap_content"
+        android:layout_height="55dp"
+        android:adjustViewBounds="true"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_ddg_comparison_chart" />
+
+    <ImageView
+        android:id="@+id/chromeLogo"
+        android:layout_width="wrap_content"
+        android:layout_height="55dp"
+        android:layout_marginEnd="@dimen/keyline_5"
+        android:adjustViewBounds="true"
+        app:layout_constraintEnd_toStartOf="@id/ddgLogo"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_chrome_comparison_chart" />
+
+    <com.duckduckgo.common.ui.view.divider.VerticalDivider
+        android:layout_width="wrap_content"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/ddgLogo"
+        app:layout_constraintStart_toEndOf="@id/chromeLogo"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <ImageView
+        android:id="@+id/check1"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        app:layout_constraintBottom_toBottomOf="@id/feature1"
+        app:layout_constraintEnd_toEndOf="@id/ddgLogo"
+        app:layout_constraintStart_toStartOf="@id/ddgLogo"
+        app:layout_constraintTop_toTopOf="@id/feature1"
+        app:srcCompat="@drawable/status_check" />
+
+    <ImageView
+        android:id="@+id/cross1"
+        android:layout_width="@dimen/keyline_5"
+        android:layout_height="@dimen/keyline_5"
+        app:layout_constraintBottom_toBottomOf="@id/feature1"
+        app:layout_constraintEnd_toEndOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="@id/chromeLogo"
+        app:layout_constraintTop_toTopOf="@id/feature1"
+        app:srcCompat="@drawable/cross_24" />
+
+    <com.duckduckgo.common.ui.view.text.DaxTextView
+        android:id="@+id/feature1"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:paddingVertical="@dimen/keyline_3"
+        android:text="@string/preOnboardingComparisonChartItem1"
+        app:layout_constraintEnd_toStartOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/chromeLogo"
+        app:typography="body2" />
+
+    <com.duckduckgo.common.ui.view.divider.HorizontalDivider
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toTopOf="@id/feature2"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/feature1" />
+
+    <ImageView
+        android:id="@+id/check2"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        app:layout_constraintBottom_toBottomOf="@id/feature2"
+        app:layout_constraintEnd_toEndOf="@id/ddgLogo"
+        app:layout_constraintStart_toStartOf="@id/ddgLogo"
+        app:layout_constraintTop_toTopOf="@id/feature2"
+        app:srcCompat="@drawable/status_check" />
+
+    <ImageView
+        android:id="@+id/cross2"
+        android:layout_width="@dimen/keyline_5"
+        android:layout_height="@dimen/keyline_5"
+        app:layout_constraintBottom_toBottomOf="@id/feature2"
+        app:layout_constraintEnd_toEndOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="@id/chromeLogo"
+        app:layout_constraintTop_toTopOf="@id/feature2"
+        app:srcCompat="@drawable/cross_24" />
+
+    <com.duckduckgo.common.ui.view.text.DaxTextView
+        android:id="@+id/feature2"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:paddingVertical="@dimen/keyline_3"
+        android:text="@string/preOnboardingComparisonChartItem2"
+        app:layout_constraintEnd_toStartOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/feature1"
+        app:typography="body2" />
+
+    <com.duckduckgo.common.ui.view.divider.HorizontalDivider
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toTopOf="@id/feature3"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/feature2" />
+
+    <ImageView
+        android:id="@+id/check3"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        app:layout_constraintBottom_toBottomOf="@id/feature3"
+        app:layout_constraintEnd_toEndOf="@id/ddgLogo"
+        app:layout_constraintStart_toStartOf="@id/ddgLogo"
+        app:layout_constraintTop_toTopOf="@id/feature3"
+        app:srcCompat="@drawable/status_check" />
+
+    <ImageView
+        android:id="@+id/cross3"
+        android:layout_width="@dimen/keyline_5"
+        android:layout_height="@dimen/keyline_5"
+        app:layout_constraintBottom_toBottomOf="@id/feature3"
+        app:layout_constraintEnd_toEndOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="@id/chromeLogo"
+        app:layout_constraintTop_toTopOf="@id/feature3"
+        app:srcCompat="@drawable/cross_24" />
+
+    <com.duckduckgo.common.ui.view.text.DaxTextView
+        android:id="@+id/feature3"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:paddingVertical="@dimen/keyline_3"
+        android:text="@string/preOnboardingComparisonChartItem3"
+        app:layout_constraintEnd_toStartOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/feature2"
+        app:typography="body2" />
+
+    <com.duckduckgo.common.ui.view.divider.HorizontalDivider
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toTopOf="@id/feature4"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/feature3" />
+
+    <ImageView
+        android:id="@+id/check4"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        app:layout_constraintBottom_toBottomOf="@id/feature4"
+        app:layout_constraintEnd_toEndOf="@id/ddgLogo"
+        app:layout_constraintStart_toStartOf="@id/ddgLogo"
+        app:layout_constraintTop_toTopOf="@id/feature4"
+        app:srcCompat="@drawable/status_check" />
+
+    <ImageView
+        android:id="@+id/cross4"
+        android:layout_width="@dimen/keyline_5"
+        android:layout_height="@dimen/keyline_5"
+        app:layout_constraintBottom_toBottomOf="@id/feature4"
+        app:layout_constraintEnd_toEndOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="@id/chromeLogo"
+        app:layout_constraintTop_toTopOf="@id/feature4"
+        app:srcCompat="@drawable/cross_24" />
+
+    <com.duckduckgo.common.ui.view.text.DaxTextView
+        android:id="@+id/feature4"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:paddingVertical="@dimen/keyline_3"
+        android:text="@string/preOnboardingComparisonChartItem4"
+        app:layout_constraintEnd_toStartOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/feature3"
+        app:typography="body2" />
+
+    <com.duckduckgo.common.ui.view.divider.HorizontalDivider
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toTopOf="@id/feature5"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/feature4" />
+
+    <ImageView
+        android:id="@+id/check5"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        app:layout_constraintBottom_toBottomOf="@id/feature5"
+        app:layout_constraintEnd_toEndOf="@id/ddgLogo"
+        app:layout_constraintStart_toStartOf="@id/ddgLogo"
+        app:layout_constraintTop_toTopOf="@id/feature5"
+        app:srcCompat="@drawable/status_check" />
+
+    <ImageView
+        android:id="@+id/cross5"
+        android:layout_width="@dimen/keyline_5"
+        android:layout_height="@dimen/keyline_5"
+        app:layout_constraintBottom_toBottomOf="@id/feature5"
+        app:layout_constraintEnd_toEndOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="@id/chromeLogo"
+        app:layout_constraintTop_toTopOf="@id/feature5"
+        app:srcCompat="@drawable/cross_24" />
+
+    <com.duckduckgo.common.ui.view.text.DaxTextView
+        android:id="@+id/feature5"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:paddingVertical="@dimen/keyline_3"
+        android:text="@string/preOnboardingComparisonChartItem5"
+        app:layout_constraintEnd_toStartOf="@id/chromeLogo"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/feature4"
+        app:typography="body2" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>