Merge pull request #4 from HabitRPG/hafiz/stats-ui-updates

Stats UI Updates - Loading animation and truncate larger stat values

wearos/src/main/java/com/habitrpg/wearos/habitica/ui/activities/StatsActivity.kt

@@ -1,16 +1,20 @@
 package com.habitrpg.wearos.habitica.ui.activities
 
+import android.animation.ValueAnimator
 import android.os.Bundle
-import android.view.View
+import android.view.View.*
 import androidx.activity.viewModels
+import androidx.core.content.ContextCompat
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.databinding.ActivityStatsBinding
 import com.habitrpg.common.habitica.views.HabiticaIconsHelper
 import com.habitrpg.wearos.habitica.models.user.Stats
 import com.habitrpg.wearos.habitica.models.user.User
 import com.habitrpg.wearos.habitica.ui.viewmodels.StatsViewModel
+import com.habitrpg.wearos.habitica.ui.views.StatValue
 import dagger.hilt.android.AndroidEntryPoint
 
+
 @AndroidEntryPoint
 class StatsActivity : BaseActivity<ActivityStatsBinding, StatsViewModel>() {
     override val viewModel: StatsViewModel by viewModels()
@@ -18,15 +22,44 @@ class StatsActivity : BaseActivity<ActivityStatsBinding, StatsViewModel>() {
     override fun onCreate(savedInstanceState: Bundle?) {
         binding = ActivityStatsBinding.inflate(layoutInflater)
         super.onCreate(savedInstanceState)
-
-        setStatViews()
+        setViews()
         viewModel.user.observe(this) {
-            updateStats(it)
+            loadViews(it)
         }
     }
 
+    private fun setViews() {
+        binding.statsImageview.setColorFilter(ContextCompat.getColor(this, R.color.watch_purple_200))
+        binding.statsImageview.visibility = VISIBLE
+        loadingManager.startLoading()
+        setBarViews()
+        setStatViews()
+    }
+
+    private fun loadViews(user: User) {
+        binding.statsImageview.visibility = GONE
+        loadingManager.endLoading()
+        updateStats(user)
+    }
+
+    private fun setBarViews() {
+        binding.hpBar.setPercentageValues(1f, 100f)
+        binding.hpBar.animateProgress()
+
+        binding.expBar.setPercentageValues(1f, 100f)
+        binding.expBar.animateProgress()
+
+        binding.mpBar.setPercentageValues(1f, 100f)
+        binding.mpBar.animateProgress()
+
+    }
+
     private fun setStatViews() {
-        binding.hpStatValue.setStatValueResources(HabiticaIconsHelper.imageOfHeartLightBg(), R.color.hp_bar_color)
+        binding.hpStatValue.visibility = INVISIBLE
+        binding.expStatValue.visibility = INVISIBLE
+        binding.mpStatValue.visibility = INVISIBLE
+
+        binding.hpStatValue.setStatValueResources(HabiticaIconsHelper.imageOfHeartLarge(), R.color.hp_bar_color)
         binding.expStatValue.setStatValueResources(HabiticaIconsHelper.imageOfExperience(), R.color.exp_bar_color)
         binding.mpStatValue.setStatValueResources(HabiticaIconsHelper.imageOfMagic(), R.color.mpColor)
     }
@@ -38,6 +71,10 @@ class StatsActivity : BaseActivity<ActivityStatsBinding, StatsViewModel>() {
     }
 
     private fun updateBarViews(stats: Stats) {
+        binding.hpBar.visibility = VISIBLE
+        binding.expBar.visibility = VISIBLE
+        binding.mpBar.visibility = VISIBLE
+
         binding.hpBar.setPercentageValues(stats.hp?.toFloat() ?: 0f, stats.maxHealth?.toFloat() ?: 0f)
         binding.hpBar.animateProgress()
 
@@ -45,7 +82,7 @@ class StatsActivity : BaseActivity<ActivityStatsBinding, StatsViewModel>() {
         binding.expBar.animateProgress()
 
         if ((stats.lvl ?: 0) < 10) {
-            binding.mpBar.visibility = View.GONE
+            binding.mpBar.visibility = GONE
         } else {
             binding.mpBar.setPercentageValues(stats.mp?.toFloat() ?: 0f, stats.maxMP?.toFloat() ?: 0f)
             binding.mpBar.animateProgress()
@@ -53,14 +90,19 @@ class StatsActivity : BaseActivity<ActivityStatsBinding, StatsViewModel>() {
     }
 
     private fun updateStatViews(stats: Stats) {
-        binding.hpStatValue.setStatValue(stats.maxHealth ?: 0, stats.hp?.toInt() ?: 0)
-        binding.expStatValue.setStatValue(stats.toNextLevel ?: 0, stats.exp?.toInt() ?: 0)
+        binding.hpStatValue.visibility = VISIBLE
+        binding.expStatValue.visibility = VISIBLE
+        binding.mpStatValue.visibility = VISIBLE
+
+        binding.hpStatValue.setStatValues(stats.maxHealth ?: 0, stats.hp?.toInt() ?: 0)
+        binding.expStatValue.setStatValues(stats.toNextLevel ?: 0, stats.exp?.toInt() ?: 0)
         if ((stats.lvl ?: 0) < 10) {
-            binding.mpStatValue.visibility = View.GONE
+            binding.mpStatValue.visibility = GONE
         } else {
-            binding.mpStatValue.setStatValue(stats.maxMP ?: 0, stats.mp?.toInt() ?: 0)
+            binding.mpStatValue.setStatValues(stats.maxMP ?: 0, stats.mp?.toInt() ?: 0)
         }
     }
+
 }
 
 

wearos/src/main/java/com/habitrpg/wearos/habitica/ui/views/CircularProgressView.kt

@@ -39,14 +39,14 @@ class CircularProgressView(
         style = Paint.Style.STROKE
         isAntiAlias = true
         color = backgroundArcColor
-        strokeWidth = 5f.dpToPx(context)
+        strokeWidth = 4f.dpToPx(context)
     }
 
     private var fillArcPaint = Paint().apply {
         style = Paint.Style.STROKE
         isAntiAlias = true
         color = fillArcColor
-        strokeWidth = 5f.dpToPx(context)
+        strokeWidth = 4f.dpToPx(context)
         strokeCap = Paint.Cap.ROUND
     }
 

wearos/src/main/java/com/habitrpg/wearos/habitica/ui/views/StatValue.kt

@@ -1,5 +1,6 @@
 package com.habitrpg.wearos.habitica.ui.views
 
+import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.Color
@@ -7,8 +8,16 @@ import android.util.AttributeSet
 import androidx.constraintlayout.widget.ConstraintLayout
 import com.habitrpg.android.habitica.databinding.StatValueLayoutBinding
 import com.habitrpg.common.habitica.extensions.layoutInflater
+import com.habitrpg.common.habitica.helpers.NumberAbbreviator
+import kotlin.math.abs
+import kotlin.math.ln
+import kotlin.math.pow
 
-class StatValue @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0) :
+class StatValue @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyle: Int = 0
+) :
     ConstraintLayout(
         context,
         attrs,
@@ -17,10 +26,12 @@ class StatValue @JvmOverloads constructor(context: Context, attrs: AttributeSet?
 
     var binding = StatValueLayoutBinding.inflate(context.layoutInflater, this)
 
-    fun setStatValue(maxValue: Int, currentValue: Int) {
+    fun setStatValues(maxValue: Int, currentValue: Int) {
         binding.currentValue.text = currentValue.toString()
         binding.maxValue.text = "/$maxValue"
         invalidate()
+
+        startUpdateCountAnimation(currentValue)
     }
 
     fun setStatValueResources(bitmap: Bitmap, bitmapColor: Int) {
@@ -30,5 +41,14 @@ class StatValue @JvmOverloads constructor(context: Context, attrs: AttributeSet?
         )
     }
 
+    private fun startUpdateCountAnimation(statValue: Int) {
+        val animator = ValueAnimator.ofInt(0, statValue)
+        animator.duration = 1000
+        animator.addUpdateListener { animation ->
+            binding.currentValue.text =
+                (NumberAbbreviator.abbreviate(context, animation.animatedValue.toString().toDouble(), 0))
+        }
+        animator.start()
+    }
 
 }

wearos/src/main/res/layout/activity_stats.xml

@@ -4,12 +4,20 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
+    <ImageView
+        android:id="@+id/stats_imageview"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/icon_stats"
+        android:layout_centerInParent="true"
+        />
+
     <com.habitrpg.wearos.habitica.ui.views.CircularProgressView
         android:id="@+id/hp_bar"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:arcFillColor="@color/hp_bar_color"
-        app:backgroundArcColor="@color/bar_background_color"
+        app:backgroundArcColor="@color/watch_gray_1"
         app:offset="5dp" />
 
     <com.habitrpg.wearos.habitica.ui.views.CircularProgressView
@@ -17,7 +25,7 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:arcFillColor="@color/exp_bar_color"
-        app:backgroundArcColor="@color/bar_background_color"
+        app:backgroundArcColor="@color/watch_gray_1"
         app:offset="14dp" />
 
     <com.habitrpg.wearos.habitica.ui.views.CircularProgressView
@@ -25,29 +33,31 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:arcFillColor="@color/mp_bar_color"
-        app:backgroundArcColor="@color/bar_background_color"
+        app:backgroundArcColor="@color/watch_gray_1"
         app:offset="23dp" />
 
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true"
-        android:layout_marginStart="16dp"
         android:orientation="vertical">
 
         <com.habitrpg.wearos.habitica.ui.views.StatValue
             android:id="@+id/hp_stat_value"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content" />
+            android:layout_width="match_parent"
+            android:layout_marginTop="5dp"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="8dp"/>
 
         <com.habitrpg.wearos.habitica.ui.views.StatValue
             android:id="@+id/exp_stat_value"
-            android:layout_width="wrap_content"
+            android:layout_width="match_parent"
+            android:layout_marginBottom="8dp"
             android:layout_height="wrap_content" />
 
         <com.habitrpg.wearos.habitica.ui.views.StatValue
             android:id="@+id/mp_stat_value"
-            android:layout_width="wrap_content"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content" />
 
     </LinearLayout>

wearos/src/main/res/layout/stat_value_layout.xml

@@ -4,8 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="wrap_content"
     android:layout_height="30dp"
-    android:layout_marginStart="4dp"
-    android:layout_marginTop="4dp"
+    android:paddingStart="16dp"
     tools:parentTag="com.habitrpg.wearos.habitica.ui.views.StatValue">
 
     <View
@@ -21,9 +20,10 @@
 
     <ImageView
         android:id="@+id/bitmap"
-        android:layout_width="22dp"
-        android:layout_height="22dp"
-        android:layout_marginBottom="2dp"
+        android:layout_width="17dp"
+        android:layout_height="17dp"
+        android:layout_marginBottom="8dp"
+        android:layout_marginEnd="6dp"
         app:layout_constraintBottom_toBottomOf="@+id/current_value"
         app:layout_constraintEnd_toStartOf="@+id/current_value"
         app:layout_constraintTop_toTopOf="parent" />