ANDROID-13311 Evolve Feedback Screen (#300)

* ANDROID-13311 Remove duplicated resources * ANDROID-13311 Evolve Feedback Screen * ANDROID-13311 Update vivo new success animation * ANDROID-13311 Update cascading opacity effect for screen content * Fix comment * ANDROID-13311 Update VivoNew success feedback lottie --------- Co-authored-by: yamal <[email protected]>
Telefonica · Sep 21, 2023 · b23fdee · b23fdee
1 parent 58c2b1d
commit b23fdee
Show file tree

Hide file tree

Showing 8 changed files with 2,502 additions and 1,139 deletions.
diff --git a/catalog/src/main/res/layout/headers_fragment_catalog_sample_bottom_layout.xml b/catalog/src/main/res/layout/headers_fragment_catalog_sample_bottom_layout.xml
@@ -13,7 +13,7 @@
 			android:id="@+id/sample_icon"
 			android:layout_width="wrap_content"
 			android:layout_height="wrap_content"
-			android:src="@drawable/feedback_info_telefonica"
+			android:src="@drawable/feedback_info"
 			app:layout_constraintTop_toTopOf="parent"
 			app:layout_constraintBottom_toBottomOf="parent"
 			app:layout_constraintLeft_toLeftOf="parent"

diff --git a/library/src/main/java/com/telefonica/mistica/feedback/screen/view/FeedbackScreenView.kt b/library/src/main/java/com/telefonica/mistica/feedback/screen/view/FeedbackScreenView.kt
@@ -74,8 +74,11 @@ class FeedbackScreenView : ConstraintLayout {
     private var firstButtonClickListener: OnClickListener? = null
     private var secondButtonClickListener: OnClickListener? = null
 
-    @RawRes private var customAnimation: Int? = null
-    @DrawableRes private var customIcon: Int? = null
+    @RawRes
+    private var customAnimation: Int? = null
+
+    @DrawableRes
+    private var customIcon: Int? = null
 
     constructor(context: Context) : super(context) {
         init(context)
@@ -337,17 +340,12 @@ class FeedbackScreenView : ConstraintLayout {
             else -> icon.visibility = View.GONE
         }
         isIconAnimated = animationResource != null
-        icon.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
-            icon.translationX = -(icon.width - context.convertDpToPx(64).toFloat()) / 2
-        }
     }
 
     private fun configureTexts() {
-        @ColorInt val titleTextColor: Int =
-            context.getThemeColor(if (isInversePresentation()) R.attr.colorTextPrimaryInverse else R.attr.colorTextPrimary)
+        @ColorInt val titleTextColor: Int = context.getThemeColor(if (isInversePresentation()) R.attr.colorTextPrimaryInverse else R.attr.colorTextPrimary)
         title.setTextColor(titleTextColor)
-        @ColorInt val subtitleTextColor: Int =
-            context.getThemeColor(if (isInversePresentation()) R.attr.colorTextPrimaryInverse else R.attr.colorTextSecondary)
+        @ColorInt val subtitleTextColor: Int = context.getThemeColor(if (isInversePresentation()) R.attr.colorTextPrimaryInverse else R.attr.colorTextSecondary)
         subtitle.setTextColor(subtitleTextColor)
         setFeedbackTitle(titleText)
         setFeedbackSubtitle(subtitleText)
@@ -395,29 +393,46 @@ class FeedbackScreenView : ConstraintLayout {
 
     fun animateViews() {
         if (isIconAnimated) {
-            val animation = AnimatorSet().apply {
+            val titleAnimation = AnimatorSet().apply {
                 playTogether(
                     getFadeInAnim(title),
+                    getTranslationYAnim(title)
+                )
+                interpolator = getCubicBezierInterpolator()
+                duration = TEXTS_ANIMATION_DURATION
+                startDelay = TITLE_ANIMATION_DELAY
+            }
+            val subtitleAnimation = AnimatorSet().apply {
+                playTogether(
                     getFadeInAnim(subtitle),
+                    getTranslationYAnim(subtitle)
+                )
+                interpolator = getCubicBezierInterpolator()
+                duration = TEXTS_ANIMATION_DURATION
+                startDelay = SUBTITLE_ANIMATION_DELAY
+            }
+
+            val extraAnimation = AnimatorSet().apply {
+                playTogether(
                     getFadeInAnim(customContentContainer),
-                    getFadeInAnim(errorReference),
-                    getTranslationYAnim(title),
-                    getTranslationYAnim(subtitle),
                     getTranslationYAnim(customContentContainer),
+                    getFadeInAnim(errorReference),
                     getTranslationYAnim(errorReference),
                 )
                 interpolator = getCubicBezierInterpolator()
                 duration = TEXTS_ANIMATION_DURATION
-                startDelay = TEXTS_ANIMATION_DELAY
+                startDelay = if (subtitleText.isEmpty()) SUBTITLE_ANIMATION_DELAY else EXTRAS_ANIMATION_DELAY
             }
 
             title.alpha = 0F
             subtitle.alpha = 0F
             errorReference.alpha = 0F
             customContentContainer.alpha = 0F
 
-            animation.start()
             icon.playAnimation()
+            titleAnimation.start()
+            subtitleAnimation.start()
+            extraAnimation.start()
             executeHapticFeedback()
         }
     }
@@ -462,7 +477,9 @@ class FeedbackScreenView : ConstraintLayout {
         const val TYPE_INFO = 2
 
         const val TEXTS_ANIMATION_DURATION = 800L
-        const val TEXTS_ANIMATION_DELAY = 200L
+        const val TITLE_ANIMATION_DELAY = 600L
+        const val SUBTITLE_ANIMATION_DELAY = 900L
+        const val EXTRAS_ANIMATION_DELAY = 1_200L
 
         const val HAPTIC_FEEDBACK_DEFAULT_DELAY = 450L
         const val HAPTIC_FEEDBACK_ERROR_DELAY = 500L

diff --git a/library/src/main/res/drawable/feedback_info_telefonica.xml b/library/src/main/res/drawable/feedback_info_telefonica.xml
diff --git a/library/src/main/res/layout/screen_feedback.xml b/library/src/main/res/layout/screen_feedback.xml
@@ -14,16 +14,15 @@
             android:layout_height="wrap_content"
             android:focusable="true"
             android:orientation="vertical"
-            android:paddingTop="24dp" >
+            android:paddingTop="64dp"
+            android:layout_marginStart="16dp"
+            android:layout_marginEnd="16dp">
 
             <com.airbnb.lottie.LottieAnimationView
                 android:id="@+id/icon"
                 android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="24dp"
-                android:layout_marginTop="24dp"
-                android:scaleType="center"
-                app:layout_constraintStart_toStartOf="parent"
+                android:layout_height="48dp"
+                android:scaleType="fitStart"
                 app:lottie_enableMergePathsForKitKatAndAbove="true"
                 app:lottie_progress="0" />
 
@@ -32,36 +31,28 @@
                 style="@style/AppTheme.TextAppearance.Preset6"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="24dp"
-                android:layout_marginTop="24dp"
-                android:layout_marginEnd="24dp" />
+                android:layout_marginTop="24dp" />
 
             <TextView
                 android:id="@+id/subtitle"
                 style="@style/AppTheme.TextAppearance.Preset3"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="24dp"
-                android:layout_marginTop="16dp"
-                android:layout_marginEnd="24dp" />
+                android:layout_marginTop="16dp" />
 
             <FrameLayout
                 android:id="@+id/custom_content"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="24dp"
-                android:layout_marginEnd="24dp"
-                android:layout_marginTop="24dp"
+                android:layout_marginTop="16dp"
                 android:visibility="gone" />
 
             <TextView
                 android:id="@+id/error_reference"
                 style="@style/AppTheme.TextAppearance.Preset2"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginStart="24dp"
                 android:layout_marginTop="16dp"
-                android:layout_marginEnd="24dp"
                 android:textColor="?colorTextSecondary"
                 android:visibility="gone" />