Fixes #941: Add radar effect in Hints and solution (#1475)

* -Added animation to "Hints Icon"

* -Some nit changes

app/src/main/java/org/oppia/app/databinding/ViewBindingAdapter.kt

@@ -0,0 +1,41 @@
+package org.oppia.app.databinding
+
+import android.animation.AnimatorSet
+import android.animation.ValueAnimator
+import android.view.View
+import androidx.core.animation.doOnEnd
+import androidx.databinding.BindingAdapter
+
+private val appearAnimator: ValueAnimator = ValueAnimator.ofFloat(0f, 1f)
+private val disappearAnimator: ValueAnimator = ValueAnimator.ofFloat(1f, 2f)
+private val animatorSet = AnimatorSet()
+
+@BindingAdapter("app:flashingAnimation")
+fun setFlashingAnimation(view: View, isFlashing: Boolean) {
+  appearAnimator.addUpdateListener {
+    view.scaleX = it.animatedValue as Float
+    view.scaleY = it.animatedValue as Float
+    view.alpha = it.animatedValue as Float
+  }
+  appearAnimator.duration = 1500
+
+  disappearAnimator.addUpdateListener {
+    view.scaleX = it.animatedValue as Float
+    view.scaleY = it.animatedValue as Float
+    view.alpha = 2f - it.animatedValue as Float
+  }
+  disappearAnimator.duration = 500
+
+  if (isFlashing) {
+    animatorSet.playSequentially(appearAnimator, disappearAnimator)
+    animatorSet.start()
+    animatorSet.doOnEnd {
+      animatorSet.start()
+    }
+  } else {
+    animatorSet.cancel()
+    view.scaleX = 0f
+    view.scaleY = 0f
+    view.alpha = 0f
+  }
+}

app/src/main/res/drawable/radar_moving_circle.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <stroke
+    android:width="0.5dp"
+    android:color="@color/radarColor" />
+</shape>

app/src/main/res/layout/state_fragment.xml

@@ -56,6 +56,16 @@
       android:visibility="@{viewModel.isHintBulbVisible() ? View.VISIBLE : View.GONE}"
       android:layout_gravity="bottom|start">
 
+      <ImageView
+        android:layout_width="16dp"
+        android:layout_height="16dp"
+        android:layout_gravity="top|end"
+        android:layout_marginTop="3dp"
+        android:layout_marginEnd="4dp"
+        android:visibility="@{viewModel.isHintOpenedAndUnRevealed() ? View.VISIBLE : View.GONE}"
+        android:src="@drawable/radar_moving_circle"
+        app:flashingAnimation="@{viewModel.isHintOpenedAndUnRevealed()}" />
+
       <ImageView
         android:id="@+id/dot_hint"
         android:layout_width="8dp"

app/src/main/res/values/colors.xml

@@ -156,4 +156,5 @@
   <!-- ICON COLORS -->
   <color name="mergeIconEnabled">#FF000000</color>
   <color name="mergeIconDisabled">#999999</color>
+  <color name="radarColor">#FFCD2A</color>
 </resources>