Add scroll animation to WireGuard Key screen

2 files changed, 147 insertions, 108 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WireguardKeyFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WireguardKeyFragment.kt
index 067600fcfd..25537b76a5 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WireguardKeyFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WireguardKeyFragment.kt
@@ -32,6 +32,7 @@ class WireguardKeyFragment : ServiceDependentFragment(OnNoService.GoToLaunchScre
     }
 
     private lateinit var timeAgoFormatter: TimeAgoFormatter
+    private lateinit var titleController: CollapsibleTitleController
 
     private var greenColor: Int = 0
     private var redColor: Int = 0
@@ -135,6 +136,8 @@ class WireguardKeyFragment : ServiceDependentFragment(OnNoService.GoToLaunchScre
             prepare(daemon, jobTracker)
         }
 
+        titleController = CollapsibleTitleController(view)
+
         return view
     }
 
@@ -175,6 +178,10 @@ class WireguardKeyFragment : ServiceDependentFragment(OnNoService.GoToLaunchScre
         }
     }
 
+    override fun onSafelyDestroyView() {
+        titleController.onDestroy()
+    }
+
     private fun updateKeySpinners() {
         when (actionState) {
             is ActionState.Generating -> {
diff --git a/android/src/main/res/layout/wireguard_key.xml b/android/src/main/res/layout/wireguard_key.xml
index 8e6384eefb..0abbdb526e 100644
--- a/android/src/main/res/layout/wireguard_key.xml
+++ b/android/src/main/res/layout/wireguard_key.xml
@@ -1,110 +1,142 @@
-<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:elevation="3dp"
-              android:gravity="left"
-              android:orientation="vertical">
-    <LinearLayout android:id="@+id/back"
-                  android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_weight="0"
-                  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_advanced" />
-    </LinearLayout>
-    <TextView android:layout_width="wrap_content"
+<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:elevation="3dp"
+             android:gravity="left">
+    <TextView android:id="@+id/title"
+              android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:layout_weight="0"
-              android:layout_marginLeft="24dp"
-              android:layout_marginTop="4dp"
-              android:layout_marginBottom="12dp"
-              android:text="@string/wireguard_key"
               android:textColor="@color/white"
-              android:textSize="32sp"
-              android:textStyle="bold" />
-    <net.mullvad.mullvadvpn.ui.widget.CopyableInformationView android:id="@+id/public_key"
-                                                              android:layout_width="match_parent"
-                                                              android:layout_height="wrap_content"
-                                                              android:layout_weight="0"
-                                                              android:paddingHorizontal="24dp"
-                                                              android:paddingVertical="12dp"
-                                                              mullvad:clipboardLabel="@string/wireguard_public_key"
-                                                              mullvad:copiedToast="@string/copied_wireguard_public_key"
-                                                              mullvad:description="@string/public_key"
-                                                              mullvad:maxLength="20"
-                                                              mullvad:whenMissing="showSpinner" />
-    <net.mullvad.mullvadvpn.ui.widget.InformationView android:id="@+id/key_age"
-                                                      android:layout_width="match_parent"
-                                                      android:layout_height="wrap_content"
-                                                      android:layout_weight="0"
-                                                      android:paddingHorizontal="24dp"
-                                                      android:paddingVertical="12dp"
-                                                      mullvad:description="@string/wireguard_key_generated"
-                                                      mullvad:whenMissing="showSpinner" />
-    <FrameLayout android:layout_width="wrap_content"
-                 android:layout_height="wrap_content"
-                 android:paddingHorizontal="24dp"
-                 android:paddingVertical="12dp">
-        <TextView android:id="@+id/wireguard_key_status"
-                  android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:textColor="@color/red"
-                  android:textSize="13sp"
-                  android:textStyle="bold"
-                  android:visibility="gone" />
-        <ProgressBar android:id="@+id/verifying_key_spinner"
-                     android:layout_width="20dp"
-                     android:layout_height="20dp"
-                     android:layout_gravity="center"
-                     android:indeterminate="true"
-                     android:indeterminateOnly="true"
-                     android:indeterminateDuration="600"
-                     android:indeterminateDrawable="@drawable/icon_spinner"
-                     android:visibility="gone" />
-    </FrameLayout>
-    <Space android:layout_width="match_parent"
-           android:layout_height="0dp"
-           android:layout_weight="1" />
-    <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/generate_key"
-                                             android:layout_width="match_parent"
-                                             android:layout_height="wrap_content"
-                                             android:layout_weight="0"
-                                             android:layout_marginHorizontal="24dp"
-                                             mullvad:buttonColor="green"
-                                             mullvad:text="@string/wireguard_generate_key"
-                                             mullvad:showSpinner="true" />
-    <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/verify_key"
-                                             android:layout_width="match_parent"
-                                             android:layout_height="wrap_content"
-                                             android:layout_weight="0"
-                                             android:layout_marginTop="24dp"
-                                             android:layout_marginHorizontal="24dp"
-                                             mullvad:buttonColor="blue"
-                                             mullvad:text="@string/wireguard_verify_key"
-                                             mullvad:showSpinner="true" />
-    <net.mullvad.mullvadvpn.ui.widget.UrlButton android:id="@+id/manage_keys"
-                                                android:layout_width="match_parent"
-                                                android:layout_height="wrap_content"
-                                                android:layout_weight="0"
-                                                android:layout_marginTop="24dp"
-                                                android:layout_marginBottom="24dp"
-                                                android:layout_marginHorizontal="24dp"
-                                                mullvad:text="@string/wireguard_manage_keys"
-                                                mullvad:buttonColor="blue"
-                                                mullvad:url="@string/wg_key_url"
-                                                mullvad:withToken="true" />
-</LinearLayout>
+              android:textSize="16sp"
+              android:textStyle="bold"
+              android:text="@string/wireguard_key" />
+    <LinearLayout android:layout_width="match_parent"
+                  android:layout_height="match_parent"
+                  android:orientation="vertical">
+        <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:layout_weight="0"
+                          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_advanced" />
+            </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/wireguard_key" />
+        </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:orientation="vertical">
+                <TextView android:id="@+id/expanded_title"
+                          android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:layout_weight="0"
+                          android:layout_marginLeft="24dp"
+                          android:layout_marginTop="4dp"
+                          android:layout_marginBottom="12dp"
+                          android:text="@string/wireguard_key"
+                          android:textColor="@color/white"
+                          android:textSize="32sp"
+                          android:textStyle="bold" />
+                <net.mullvad.mullvadvpn.ui.widget.CopyableInformationView android:id="@+id/public_key"
+                                                                          android:layout_width="match_parent"
+                                                                          android:layout_height="wrap_content"
+                                                                          android:layout_weight="0"
+                                                                          android:paddingHorizontal="24dp"
+                                                                          android:paddingVertical="12dp"
+                                                                          mullvad:clipboardLabel="@string/wireguard_public_key"
+                                                                          mullvad:copiedToast="@string/copied_wireguard_public_key"
+                                                                          mullvad:description="@string/public_key"
+                                                                          mullvad:maxLength="20"
+                                                                          mullvad:whenMissing="showSpinner" />
+                <net.mullvad.mullvadvpn.ui.widget.InformationView android:id="@+id/key_age"
+                                                                  android:layout_width="match_parent"
+                                                                  android:layout_height="wrap_content"
+                                                                  android:layout_weight="0"
+                                                                  android:paddingHorizontal="24dp"
+                                                                  android:paddingVertical="12dp"
+                                                                  mullvad:description="@string/wireguard_key_generated"
+                                                                  mullvad:whenMissing="showSpinner" />
+                <FrameLayout android:layout_width="wrap_content"
+                             android:layout_height="wrap_content"
+                             android:paddingHorizontal="24dp"
+                             android:paddingVertical="12dp">
+                    <TextView android:id="@+id/wireguard_key_status"
+                              android:layout_width="wrap_content"
+                              android:layout_height="wrap_content"
+                              android:textColor="@color/red"
+                              android:textSize="13sp"
+                              android:textStyle="bold"
+                              android:visibility="gone" />
+                    <ProgressBar android:id="@+id/verifying_key_spinner"
+                                 android:layout_width="20dp"
+                                 android:layout_height="20dp"
+                                 android:layout_gravity="center"
+                                 android:indeterminate="true"
+                                 android:indeterminateOnly="true"
+                                 android:indeterminateDuration="600"
+                                 android:indeterminateDrawable="@drawable/icon_spinner"
+                                 android:visibility="gone" />
+                </FrameLayout>
+                <Space android:layout_width="match_parent"
+                       android:layout_height="0dp"
+                       android:layout_weight="1" />
+                <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/generate_key"
+                                                         android:layout_width="match_parent"
+                                                         android:layout_height="wrap_content"
+                                                         android:layout_weight="0"
+                                                         android:layout_marginHorizontal="24dp"
+                                                         mullvad:buttonColor="green"
+                                                         mullvad:text="@string/wireguard_generate_key"
+                                                         mullvad:showSpinner="true" />
+                <net.mullvad.mullvadvpn.ui.widget.Button android:id="@+id/verify_key"
+                                                         android:layout_width="match_parent"
+                                                         android:layout_height="wrap_content"
+                                                         android:layout_weight="0"
+                                                         android:layout_marginTop="24dp"
+                                                         android:layout_marginHorizontal="24dp"
+                                                         mullvad:buttonColor="blue"
+                                                         mullvad:text="@string/wireguard_verify_key"
+                                                         mullvad:showSpinner="true" />
+                <net.mullvad.mullvadvpn.ui.widget.UrlButton android:id="@+id/manage_keys"
+                                                            android:layout_width="match_parent"
+                                                            android:layout_height="wrap_content"
+                                                            android:layout_weight="0"
+                                                            android:layout_marginTop="24dp"
+                                                            android:layout_marginBottom="24dp"
+                                                            android:layout_marginHorizontal="24dp"
+                                                            mullvad:text="@string/wireguard_manage_keys"
+                                                            mullvad:buttonColor="blue"
+                                                            mullvad:url="@string/wg_key_url"
+                                                            mullvad:withToken="true" />
+            </LinearLayout>
+        </net.mullvad.mullvadvpn.ui.widget.ListenableScrollView>
+    </LinearLayout>
+</FrameLayout>