Add scroll animation to Advanced screen

2 files changed, 129 insertions, 91 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AdvancedFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AdvancedFragment.kt
index 1a43098547..4f51012759 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AdvancedFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AdvancedFragment.kt
@@ -15,6 +15,7 @@ private const val MAX_MTU_VALUE = 1420
 class AdvancedFragment : ServiceDependentFragment(OnNoService.GoBack) {
     private lateinit var wireguardMtuInput: CellInput
     private lateinit var wireguardKeysMenu: View
+    private lateinit var titleController: CollapsibleTitleController
 
     override fun onSafelyCreateView(
         inflater: LayoutInflater,
@@ -50,6 +51,8 @@ class AdvancedFragment : ServiceDependentFragment(OnNoService.GoBack) {
             updateUi(settings)
         }
 
+        titleController = CollapsibleTitleController(view)
+
         return view
     }
 
@@ -62,6 +65,7 @@ class AdvancedFragment : ServiceDependentFragment(OnNoService.GoBack) {
     }
 
     override fun onSafelyDestroyView() {
+        titleController.onDestroy()
         settingsListener.unsubscribe(this)
     }
 
diff --git a/android/src/main/res/layout/advanced.xml b/android/src/main/res/layout/advanced.xml
index 3264c2d619..990784ac80 100644
--- a/android/src/main/res/layout/advanced.xml
+++ b/android/src/main/res/layout/advanced.xml
@@ -1,97 +1,131 @@
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              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>
-    <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:gravity="left"
+             android:elevation="2dp">
+    <TextView android:id="@+id/title"
+              android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:layout_marginTop="4dp"
-              android:layout_marginLeft="24dp"
               android:textColor="@color/white"
-              android:textSize="32sp"
+              android:textSize="16sp"
               android:textStyle="bold"
               android:text="@string/settings_advanced" />
     <LinearLayout android:layout_width="match_parent"
-                  android:layout_height="wrap_content"
-                  android:layout_marginTop="24dp"
-                  android:paddingHorizontal="16dp"
-                  android:background="@drawable/cell_button_background"
-                  android:gravity="center">
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_weight="1"
-                  android:paddingHorizontal="8dp"
-                  android:paddingVertical="17dp"
-                  android:textColor="@color/white"
-                  android:textSize="20sp"
-                  android:textStyle="bold"
-                  android:text="@string/wireguard_mtu" />
-        <EditText android:id="@+id/wireguard_mtu_input"
-                  android:layout_width="80dp"
-                  android:layout_height="34dp"
-                  android:layout_weight="0"
-                  android:paddingHorizontal="4dp"
-                  android:background="@drawable/cell_input_background"
-                  android:digits="0123456789"
-                  android:inputType="number"
-                  android:singleLine="true"
-                  android:imeOptions="flagNoPersonalizedLearning"
-                  android:textCursorDrawable="@drawable/cell_input_cursor"
-                  android:gravity="center"
-                  android:hint="@string/hint_default"
-                  android:textColorHint="@color/white80"
-                  android:textColor="@color/white"
-                  android:textSize="20sp" />
-    </LinearLayout>
-    <TextView android:id="@+id/wireguard_mtu_footer"
-              android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:paddingTop="8dp"
-              android:paddingHorizontal="24dp"
-              android:textColor="@color/white60"
-              android:textSize="13sp" />
-    <LinearLayout android:id="@+id/wireguard_keys"
-                  android:layout_width="match_parent"
-                  android:layout_height="wrap_content"
-                  android:layout_marginTop="24dp"
-                  android:paddingHorizontal="16dp"
-                  android:background="@drawable/cell_button_background"
-                  android:clickable="true"
-                  android:gravity="center">
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_weight="1"
-                  android:paddingHorizontal="8dp"
-                  android:paddingVertical="17dp"
-                  android:textColor="@color/white"
-                  android:textSize="20sp"
-                  android:textStyle="bold"
-                  android:text="@string/wireguard_key" />
-        <ImageView android:layout_width="14dp"
-                   android:layout_height="24dp"
-                   android:layout_weight="0"
-                   android:alpha="0.6"
-                   android:src="@drawable/icon_chevron" />
+                  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: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_advanced" />
+        </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:paddingBottom="24dp"
+                          android:orientation="vertical">
+                <TextView android:id="@+id/expanded_title"
+                          android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:layout_marginTop="4dp"
+                          android:layout_marginLeft="24dp"
+                          android:textColor="@color/white"
+                          android:textSize="32sp"
+                          android:textStyle="bold"
+                          android:text="@string/settings_advanced" />
+                <LinearLayout android:layout_width="match_parent"
+                              android:layout_height="wrap_content"
+                              android:layout_marginTop="24dp"
+                              android:paddingHorizontal="16dp"
+                              android:background="@drawable/cell_button_background"
+                              android:gravity="center">
+                    <TextView android:layout_width="wrap_content"
+                              android:layout_height="wrap_content"
+                              android:layout_weight="1"
+                              android:paddingHorizontal="8dp"
+                              android:paddingVertical="17dp"
+                              android:textColor="@color/white"
+                              android:textSize="20sp"
+                              android:textStyle="bold"
+                              android:text="@string/wireguard_mtu" />
+                    <EditText android:id="@+id/wireguard_mtu_input"
+                              android:layout_width="80dp"
+                              android:layout_height="34dp"
+                              android:layout_weight="0"
+                              android:paddingHorizontal="4dp"
+                              android:background="@drawable/cell_input_background"
+                              android:digits="0123456789"
+                              android:inputType="number"
+                              android:singleLine="true"
+                              android:imeOptions="flagNoPersonalizedLearning"
+                              android:textCursorDrawable="@drawable/cell_input_cursor"
+                              android:gravity="center"
+                              android:hint="@string/hint_default"
+                              android:textColorHint="@color/white80"
+                              android:textColor="@color/white"
+                              android:textSize="20sp" />
+                </LinearLayout>
+                <TextView android:id="@+id/wireguard_mtu_footer"
+                          android:layout_width="match_parent"
+                          android:layout_height="wrap_content"
+                          android:paddingTop="8dp"
+                          android:paddingHorizontal="24dp"
+                          android:textColor="@color/white60"
+                          android:textSize="13sp" />
+                <LinearLayout android:id="@+id/wireguard_keys"
+                              android:layout_width="match_parent"
+                              android:layout_height="wrap_content"
+                              android:layout_marginTop="24dp"
+                              android:paddingHorizontal="16dp"
+                              android:background="@drawable/cell_button_background"
+                              android:clickable="true"
+                              android:gravity="center">
+                    <TextView android:layout_width="wrap_content"
+                              android:layout_height="wrap_content"
+                              android:layout_weight="1"
+                              android:paddingHorizontal="8dp"
+                              android:paddingVertical="17dp"
+                              android:textColor="@color/white"
+                              android:textSize="20sp"
+                              android:textStyle="bold"
+                              android:text="@string/wireguard_key" />
+                    <ImageView android:layout_width="14dp"
+                               android:layout_height="24dp"
+                               android:layout_weight="0"
+                               android:alpha="0.6"
+                               android:src="@drawable/icon_chevron" />
+                </LinearLayout>
+            </LinearLayout>
+        </net.mullvad.mullvadvpn.ui.widget.ListenableScrollView>
     </LinearLayout>
-</LinearLayout>
+</FrameLayout>