Implement new account history animation

2 files changed, 48 insertions, 4 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt
index ee57fba4bb..04d330be2d 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt
@@ -1,9 +1,11 @@
 package net.mullvad.mullvadvpn.ui.widget
 
+import android.animation.ValueAnimator
 import android.content.Context
 import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.View
+import android.view.View.OnLayoutChangeListener
 import android.widget.ArrayAdapter
 import android.widget.ListView
 import android.widget.RelativeLayout
@@ -24,6 +26,33 @@ class AccountLogin : RelativeLayout {
     private val accountHistoryList: ListView = container.findViewById(R.id.history)
     private val input: AccountInput = container.findViewById(R.id.input)
 
+    private val dividerHeight = resources.getDimensionPixelSize(R.dimen.account_history_divider)
+    private val historyEntryHeight =
+        resources.getDimensionPixelSize(R.dimen.account_history_entry_height)
+
+    private val historyAnimation = ValueAnimator.ofInt(0, 0).apply {
+        addUpdateListener { animation ->
+            val layoutParams = container.layoutParams
+
+            layoutParams.height = animation.animatedValue as Int
+
+            container.layoutParams = layoutParams
+        }
+
+        duration = 350
+    }
+
+    private val expandedHeight: Int
+        get() = collapsedHeight + historyHeight
+
+    private var historyHeight by observable(0) { _, _, _ ->
+        historyAnimation.setIntValues(collapsedHeight, expandedHeight)
+    }
+
+    private var collapsedHeight by observable(0) { _, _, newCollapsedHeight ->
+        historyAnimation.setIntValues(newCollapsedHeight, expandedHeight)
+    }
+
     private var inputHasFocus by observable(false) { _, _, hasFocus ->
         updateBorder()
 
@@ -32,11 +61,20 @@ class AccountLogin : RelativeLayout {
         }
     }
 
-    private var shouldShowAccountHistory by observable(false) { _, _, _ ->
-        updateAccountHistory()
+    private var shouldShowAccountHistory by observable(false) { _, isShown, show ->
+        if (isShown != show) {
+            if (show) {
+                historyAnimation.start()
+            } else {
+                historyAnimation.reverse()
+            }
+        }
     }
 
-    var accountHistory by observable<ArrayList<String>?>(null) { _, _, _ ->
+    var accountHistory by observable<ArrayList<String>?>(null) { _, _, history ->
+        val entryCount = history?.size ?: 0
+
+        historyHeight = entryCount * (historyEntryHeight + dividerHeight)
         updateAccountHistory()
     }
 
@@ -85,6 +123,12 @@ class AccountLogin : RelativeLayout {
                     state = LoginState.Initial
                 }
             }
+
+            addOnLayoutChangeListener(
+                OnLayoutChangeListener { _, _, top, _, bottom, _, _, _, _ ->
+                    collapsedHeight = bottom - top
+                }
+            )
         }
     }
 
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
index 4510d0c627..7181fe6673 100644
--- a/android/src/main/res/layout/login.xml
+++ b/android/src/main/res/layout/login.xml
@@ -66,7 +66,7 @@
                       android:text="@string/login_description" />
             <net.mullvad.mullvadvpn.ui.widget.AccountLogin android:id="@+id/account_login"
                                                            android:layout_width="match_parent"
-                                                           android:layout_height="wrap_content" />
+                                                           android:layout_height="@dimen/account_history_entry_height" />
             <Space android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="3" />