Add scroll animation to Account screen

2 files changed, 107 insertions, 73 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountFragment.kt
index f7606ea737..eae581a243 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountFragment.kt
@@ -43,6 +43,7 @@ class AccountFragment : ServiceDependentFragment(OnNoService.GoBack) {
     private lateinit var accountNumberView: CopyableInformationView
     private lateinit var buyCreditButton: Button
     private lateinit var redeemVoucherButton: Button
+    private lateinit var titleController: CollapsibleTitleController
 
     override fun onSafelyCreateView(
         inflater: LayoutInflater,
@@ -77,6 +78,8 @@ class AccountFragment : ServiceDependentFragment(OnNoService.GoBack) {
 
         accountExpiryView = view.findViewById(R.id.account_expiry)
 
+        titleController = CollapsibleTitleController(view)
+
         return view
     }
 
@@ -112,6 +115,10 @@ class AccountFragment : ServiceDependentFragment(OnNoService.GoBack) {
         accountCache.onAccountExpiryChange.unsubscribe(this)
     }
 
+    override fun onSafelyDestroyView() {
+        titleController.onDestroy()
+    }
+
     private fun checkForAddedTime() {
         currentAccountExpiry?.let { expiry ->
             oldAccountExpiry = expiry
diff --git a/android/src/main/res/layout/account.xml b/android/src/main/res/layout/account.xml
index 6356d3ae70..d827e77acd 100644
--- a/android/src/main/res/layout/account.xml
+++ b/android/src/main/res/layout/account.xml
@@ -1,82 +1,109 @@
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              xmlns:mullvad="http://schemas.android.com/apk/res-auto"
-              android:layout_width="match_parent"
-              android:layout_height="match_parent"
-              android:background="@color/darkBlue"
-              android:orientation="vertical"
-              android:gravity="left"
-              android:elevation="2dp">
-    <LinearLayout android:id="@+id/back"
-                  android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:padding="12dp"
-                  android:orientation="horizontal"
-                  android:gravity="center_vertical | left"
-                  android:clickable="true"
-                  android:background="?android:attr/selectableItemBackground">
-        <ImageView android:layout_width="24dp"
-                   android:layout_height="24dp"
-                   android:layout_marginRight="8dp"
-                   android:src="@drawable/icon_back" />
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:textColor="@color/white60"
-                  android:textSize="13sp"
-                  android:textStyle="bold"
-                  android:text="@string/settings" />
-    </LinearLayout>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+             xmlns:mullvad="http://schemas.android.com/apk/res-auto"
+             android:layout_width="match_parent"
+             android:layout_height="match_parent"
+             android:background="@color/darkBlue"
+             android:gravity="left"
+             android:elevation="2dp">
+    <TextView android:id="@+id/title"
+              android:layout_width="wrap_content"
+              android:layout_height="wrap_content"
+              android:textColor="@color/white"
+              android:textSize="16sp"
+              android:textStyle="bold"
+              android:text="@string/settings_account" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
-                  android:layout_marginTop="4dp"
-                  android:layout_marginBottom="24dp"
                   android:orientation="vertical">
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_marginBottom="12dp"
-                  android:layout_marginHorizontal="24dp"
-                  android:textColor="@color/white"
-                  android:textSize="32sp"
-                  android:textStyle="bold"
-                  android:text="@string/settings_account" />
-        <net.mullvad.mullvadvpn.ui.widget.CopyableInformationView android:id="@+id/account_number"
+        <FrameLayout android:layout_width="match_parent"
+                     android:layout_height="wrap_content">
+            <LinearLayout android:id="@+id/back"
+                          android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:padding="12dp"
+                          android:orientation="horizontal"
+                          android:gravity="center_vertical | left"
+                          android:clickable="true"
+                          android:background="?android:attr/selectableItemBackground">
+                <ImageView android:layout_width="24dp"
+                           android:layout_height="24dp"
+                           android:layout_marginRight="8dp"
+                           android:src="@drawable/icon_back" />
+                <TextView android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:textColor="@color/white60"
+                          android:textSize="13sp"
+                          android:textStyle="bold"
+                          android:text="@string/settings" />
+            </LinearLayout>
+            <TextView android:id="@+id/collapsed_title"
+                      android:layout_width="wrap_content"
+                      android:layout_height="wrap_content"
+                      android:layout_marginHorizontal="4dp"
+                      android:layout_gravity="center"
+                      android:textColor="@color/white"
+                      android:textSize="16sp"
+                      android:textStyle="bold"
+                      android:text="@string/settings_account" />
+        </FrameLayout>
+        <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
+                                                               android:layout_width="match_parent"
+                                                               android:layout_height="match_parent">
+
+            <LinearLayout android:layout_width="match_parent"
+                          android:layout_height="match_parent"
+                          android:layout_marginTop="4dp"
+                          android:layout_marginBottom="24dp"
+                          android:orientation="vertical">
+                <TextView android:id="@+id/expanded_title"
+                          android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:layout_marginBottom="12dp"
+                          android:layout_marginHorizontal="24dp"
+                          android:textColor="@color/white"
+                          android:textSize="32sp"
+                          android:textStyle="bold"
+                          android:text="@string/settings_account" />
+                <net.mullvad.mullvadvpn.ui.widget.CopyableInformationView android:id="@+id/account_number"
+                                                                          android:layout_width="match_parent"
+                                                                          android:layout_height="wrap_content"
+                                                                          android:paddingHorizontal="24dp"
+                                                                          android:paddingVertical="12dp"
+                                                                          mullvad:clipboardLabel="@string/mullvad_account_number"
+                                                                          mullvad:copiedToast="@string/copied_mullvad_account_number"
+                                                                          mullvad:description="@string/account_number"
+                                                                          mullvad:whenMissing="hide" />
+                <net.mullvad.mullvadvpn.ui.widget.InformationView android:id="@+id/account_expiry"
                                                                   android:layout_width="match_parent"
                                                                   android:layout_height="wrap_content"
                                                                   android:paddingHorizontal="24dp"
                                                                   android:paddingVertical="12dp"
-                                                                  mullvad:clipboardLabel="@string/mullvad_account_number"
-                                                                  mullvad:copiedToast="@string/copied_mullvad_account_number"
-                                                                  mullvad:description="@string/account_number"
+                                                                  mullvad:description="@string/paid_until"
                                                                   mullvad:whenMissing="hide" />
-        <net.mullvad.mullvadvpn.ui.widget.InformationView android:id="@+id/account_expiry"
-                                                          android:layout_width="match_parent"
-                                                          android:layout_height="wrap_content"
-                                                          android:paddingHorizontal="24dp"
-                                                          android:paddingVertical="12dp"
-                                                          mullvad:description="@string/paid_until"
-                                                          mullvad:whenMissing="hide" />
-        <net.mullvad.mullvadvpn.ui.widget.UrlButton android:id="@+id/buy_credit"
-                                                    android:layout_width="match_parent"
-                                                    android:layout_height="wrap_content"
-                                                    android:layout_marginTop="12dp"
-                                                    android:layout_marginHorizontal="24dp"
-                                                    mullvad:showSpinner="true"
-                                                    mullvad:url="@string/account_url"
-                                                    mullvad:withToken="true"
-                                                    mullvad:text="@string/buy_more_credit"
-                                                    mullvad:buttonColor="green" />
-        <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/redeem_voucher"
-                                                 android:layout_width="match_parent"
-                                                 android:layout_height="wrap_content"
-                                                 android:layout_marginTop="24dp"
-                                                 android:layout_marginHorizontal="24dp"
-                                                 mullvad:text="@string/redeem_voucher"
-                                                 mullvad:buttonColor="green" />
-        <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/logout"
-                                                 android:layout_width="match_parent"
-                                                 android:layout_height="wrap_content"
-                                                 android:layout_marginTop="24dp"
-                                                 android:layout_marginHorizontal="24dp"
-                                                 mullvad:text="@string/log_out"
-                                                 mullvad:buttonColor="red" />
+                <net.mullvad.mullvadvpn.ui.widget.UrlButton android:id="@+id/buy_credit"
+                                                            android:layout_width="match_parent"
+                                                            android:layout_height="wrap_content"
+                                                            android:layout_marginTop="12dp"
+                                                            android:layout_marginHorizontal="24dp"
+                                                            mullvad:showSpinner="true"
+                                                            mullvad:url="@string/account_url"
+                                                            mullvad:withToken="true"
+                                                            mullvad:text="@string/buy_more_credit"
+                                                            mullvad:buttonColor="green" />
+                <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/redeem_voucher"
+                                                         android:layout_width="match_parent"
+                                                         android:layout_height="wrap_content"
+                                                         android:layout_marginTop="24dp"
+                                                         android:layout_marginHorizontal="24dp"
+                                                         mullvad:text="@string/redeem_voucher"
+                                                         mullvad:buttonColor="green" />
+                <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/logout"
+                                                         android:layout_width="match_parent"
+                                                         android:layout_height="wrap_content"
+                                                         android:layout_margin="24dp"
+                                                         mullvad:text="@string/log_out"
+                                                         mullvad:buttonColor="red" />
+            </LinearLayout>
+        </net.mullvad.mullvadvpn.ui.widget.ListenableScrollView>
     </LinearLayout>
-</LinearLayout>
+</FrameLayout>