Merge branch 'settings-scroll-animation'

16 files changed, 1185 insertions, 685 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff057c6346..6f5e3e6cb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ Line wrap the file at 100 chars.                                              Th
 #### Android
 - Show the remaining account time in the Settings screen in days if it's less than 3 months.
 - Prevent commands to connect or disconnect to be sent when the device is locked.
+- Make settings screens scrollable.
 
 ### Fixed
 - Show both WireGuard and OpenVPN servers in location list when protocol is set to automatic on Linux and macOS.
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/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/kotlin/net/mullvad/mullvadvpn/ui/CollapsibleTitleController.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/CollapsibleTitleController.kt
new file mode 100644
index 0000000000..ab0b01c92e
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/CollapsibleTitleController.kt
@@ -0,0 +1,199 @@
+package net.mullvad.mullvadvpn.ui
+
+import android.view.View
+import android.view.View.OnLayoutChangeListener
+import android.view.ViewGroup.MarginLayoutParams
+import kotlin.properties.Delegates.observable
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.ui.widget.ListenableScrollView
+import net.mullvad.mullvadvpn.util.LinearInterpolation
+
+// In order to use this view controller, the parent view must contain four views with specific IDs:
+//
+// 1. A `ListenableScrollView` with the ID `scroll_area`, which is used to animate the title based
+//    on the scroll offset.
+// 2. A view inside the `scroll_area` with the ID `expanded_title`. This view is made invisible so
+//    that it's not drawn, but it is used to measure the layout and the animation positions.
+// 3. A view outside the `scroll_area` with the ID `collapsed_title`. This view is also made
+//    invisible just like the `expanded_view`.
+// 4. A view with the ID `title`. This is the view that's actually drawn, and it's position and size
+//    are interpolated from the expanded title to the collapsed title. This view should be placed
+//    somewhere where it is drawn over all other views.
+//
+// The animation interpolation is calculated based on the Y scroll offset of the scroll area. Once
+// the offset reaches a value that completely hides the expanded title inside the scroll view, the
+// animation finishes with the title being in the collapsed state.
+class CollapsibleTitleController(val parentView: View) {
+    private inner class LayoutListener(val listener: () -> Unit) : OnLayoutChangeListener {
+        override fun onLayoutChange(
+            view: View,
+            left: Int,
+            top: Int,
+            right: Int,
+            bottom: Int,
+            oldLeft: Int,
+            oldTop: Int,
+            oldRight: Int,
+            oldBottom: Int
+        ) {
+            listener.invoke()
+            update()
+        }
+    }
+
+    private val scaleInterpolation = LinearInterpolation()
+    private val scrollInterpolation = LinearInterpolation()
+    private val xOffsetInterpolation = LinearInterpolation()
+    private val yOffsetInterpolation = LinearInterpolation()
+
+    private val collapsedTitleLayoutListener: LayoutListener = LayoutListener() {
+        val (x, y) = calculateViewCoordinates(collapsedTitle)
+
+        collapsedTitleHeight = collapsedTitle.height.toFloat()
+
+        scaleInterpolation.end = collapsedTitleHeight / maxOf(1.0f, titleHeight)
+        xOffsetInterpolation.end = x
+        yOffsetInterpolation.end = y
+    }
+
+    private val collapsedTitle = parentView.findViewById<View>(R.id.collapsed_title).apply {
+        addOnLayoutChangeListener(collapsedTitleLayoutListener)
+        visibility = View.INVISIBLE
+    }
+
+    private val expandedTitleLayoutListener: LayoutListener = LayoutListener() {
+        val (x, y) = calculateViewCoordinates(expandedTitle)
+
+        val expandedTitleMarginTop = when (val layoutParams = expandedTitle.layoutParams) {
+            is MarginLayoutParams -> layoutParams.topMargin
+            else -> 0
+        }
+
+        expandedTitleHeight = expandedTitle.height.toFloat()
+
+        scaleInterpolation.start = expandedTitleHeight / maxOf(1.0f, titleHeight)
+        xOffsetInterpolation.start = x
+        yOffsetInterpolation.start = y
+
+        scrollInterpolation.end = expandedTitleHeight + expandedTitleMarginTop
+    }
+
+    private val expandedTitle = parentView.findViewById<View>(R.id.expanded_title).apply {
+        addOnLayoutChangeListener(expandedTitleLayoutListener)
+        visibility = View.INVISIBLE
+    }
+
+    private val titleLayoutListener: LayoutListener = LayoutListener() {
+        val (x, y) = calculateViewCoordinates(title)
+
+        titleWidth = title.width.toFloat()
+        titleHeight = title.height.toFloat()
+
+        scaleInterpolation.start = expandedTitleHeight / maxOf(1.0f, titleHeight)
+        scaleInterpolation.end = collapsedTitleHeight / maxOf(1.0f, titleHeight)
+        xOffsetInterpolation.reference = x
+        yOffsetInterpolation.reference = y
+    }
+
+    private val title = parentView.findViewById<View>(R.id.title).apply {
+        addOnLayoutChangeListener(titleLayoutListener)
+
+        // Setting the scale pivot point to the left corner simplifies the calculations
+        pivotX = 0.0f
+        pivotY = 0.0f
+    }
+
+    private val scrollAreaLayoutListener: LayoutListener = LayoutListener() {
+        scrollOffset = scrollArea.scrollY.toFloat()
+    }
+
+    private val scrollArea = parentView.findViewById<ListenableScrollView>(R.id.scroll_area).apply {
+        onScrollListener = { _, top, _, _ ->
+            scrollOffset = top.toFloat()
+            update()
+        }
+
+        addOnLayoutChangeListener(scrollAreaLayoutListener)
+    }
+
+    private var scrollOffsetUpdated = false
+        get() {
+            if (field == true) {
+                field = false
+                return true
+            } else {
+                return false
+            }
+        }
+
+    private var collapsedTitleHeight = 0.0f
+    private var expandedTitleHeight = 0.0f
+    private var titleWidth = 0.0f
+    private var titleHeight = 0.0f
+
+    private var scrollOffset: Float by observable(0.0f) { _, old, new ->
+        if (scrollOffsetUpdated == false && old != new) {
+            scrollOffsetUpdated = true
+        }
+    }
+
+    val fullCollapseScrollOffset: Float
+        get() = scrollInterpolation.end
+
+    init {
+        update()
+    }
+
+    fun onDestroy() {
+        scrollArea.onScrollListener = null
+        scrollArea.removeOnLayoutChangeListener(scrollAreaLayoutListener)
+
+        collapsedTitle.removeOnLayoutChangeListener(collapsedTitleLayoutListener)
+        expandedTitle.removeOnLayoutChangeListener(expandedTitleLayoutListener)
+        title.removeOnLayoutChangeListener(titleLayoutListener)
+    }
+
+    private fun update() {
+        val shouldUpdate =
+            scrollOffsetUpdated ||
+            scaleInterpolation.updated ||
+            xOffsetInterpolation.updated ||
+            yOffsetInterpolation.updated
+
+        if (shouldUpdate) {
+            val progress = maxOf(0.0f, minOf(1.0f, scrollInterpolation.progress(scrollOffset)))
+
+            val scale = scaleInterpolation.interpolate(progress)
+            val offsetX = xOffsetInterpolation.interpolate(progress)
+            val offsetY = yOffsetInterpolation.interpolate(progress)
+
+            title.apply {
+                scaleX = scale
+                scaleY = scale
+                translationX = offsetX
+                translationY = offsetY
+            }
+        }
+    }
+
+    private fun calculateViewCoordinates(view: View): Pair<Float, Float> {
+        var currentView = view
+        var x = 0.0f
+        var y = 0.0f
+
+        while (currentView != parentView) {
+            val parent = currentView.parent
+
+            x += currentView.x - currentView.translationX
+            y += currentView.y - currentView.translationY
+
+            if (parent is View) {
+                currentView = parent
+            } else {
+                break
+            }
+        }
+
+        return Pair(x, y)
+    }
+}
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/PreferencesFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/PreferencesFragment.kt
index 787ddf4d9e..f996994e03 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/PreferencesFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/PreferencesFragment.kt
@@ -10,6 +10,7 @@ import net.mullvad.mullvadvpn.model.Settings
 class PreferencesFragment : ServiceDependentFragment(OnNoService.GoBack) {
     private lateinit var allowLanToggle: CellSwitch
     private lateinit var autoConnectToggle: CellSwitch
+    private lateinit var titleController: CollapsibleTitleController
 
     override fun onSafelyCreateView(
         inflater: LayoutInflater,
@@ -48,6 +49,8 @@ class PreferencesFragment : ServiceDependentFragment(OnNoService.GoBack) {
             updateUi(settings)
         }
 
+        titleController = CollapsibleTitleController(view)
+
         return view
     }
 
@@ -59,6 +62,7 @@ class PreferencesFragment : ServiceDependentFragment(OnNoService.GoBack) {
     }
 
     override fun onSafelyDestroyView() {
+        titleController.onDestroy()
         settingsListener.unsubscribe(this)
     }
 
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ProblemReportFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ProblemReportFragment.kt
index b106e2925b..0cf2c61c84 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ProblemReportFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ProblemReportFragment.kt
@@ -10,6 +10,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
 import android.widget.EditText
+import android.widget.ScrollView
 import android.widget.TextView
 import android.widget.ViewSwitcher
 import kotlinx.coroutines.CompletableDeferred
@@ -39,6 +40,9 @@ class ProblemReportFragment : Fragment() {
     private lateinit var editMessageButton: Button
     private lateinit var tryAgainButton: Button
 
+    private lateinit var scrollArea: ScrollView
+    private lateinit var titleController: CollapsibleTitleController
+
     override fun onAttach(context: Context) {
         super.onAttach(context)
 
@@ -98,6 +102,9 @@ class ProblemReportFragment : Fragment() {
         setSendButtonEnabled(!userMessageInput.text.isEmpty())
         userMessageInput.addTextChangedListener(InputWatcher())
 
+        scrollArea = view.findViewById(R.id.scroll_area)
+        titleController = CollapsibleTitleController(view)
+
         return view
     }
 
@@ -106,6 +113,8 @@ class ProblemReportFragment : Fragment() {
         problemReport.userMessage = userMessageInput.text.toString()
         problemReport.deleteReportFile()
 
+        titleController.onDestroy()
+
         super.onDestroyView()
     }
 
@@ -189,6 +198,8 @@ class ProblemReportFragment : Fragment() {
 
         sendStatusLabel.setText(R.string.sent)
         sendDetailsLabel.setText(R.string.sent_thanks)
+
+        scrollArea.scrollTo(0, titleController.fullCollapseScrollOffset.toInt())
     }
 
     private fun showErrorScreen() {
@@ -203,6 +214,8 @@ class ProblemReportFragment : Fragment() {
 
         editMessageButton.visibility = View.VISIBLE
         tryAgainButton.visibility = View.VISIBLE
+
+        scrollArea.scrollTo(0, titleController.fullCollapseScrollOffset.toInt())
     }
 
     private fun setSendButtonEnabled(enabled: Boolean) {
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/SettingsFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/SettingsFragment.kt
index e4955a44d0..edc8bf518a 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/SettingsFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/SettingsFragment.kt
@@ -22,6 +22,7 @@ class SettingsFragment : ServiceAwareFragment() {
     private lateinit var preferencesMenu: View
     private lateinit var advancedMenu: View
     private lateinit var remainingTimeLabel: RemainingTimeLabel
+    private lateinit var titleController: CollapsibleTitleController
 
     private var active = false
 
@@ -87,6 +88,7 @@ class SettingsFragment : ServiceAwareFragment() {
         appVersionLabel = view.findViewById<TextView>(R.id.app_version_label)
         appVersionFooter = view.findViewById(R.id.app_version_footer)
         remainingTimeLabel = RemainingTimeLabel(parentActivity, view)
+        titleController = CollapsibleTitleController(view)
 
         return view
     }
@@ -110,6 +112,11 @@ class SettingsFragment : ServiceAwareFragment() {
         super.onPause()
     }
 
+    override fun onDestroyView() {
+        super.onDestroyView()
+        titleController.onDestroy()
+    }
+
     private fun configureListeners() {
         accountCache?.apply {
             onAccountNumberChange.subscribe(this@SettingsFragment) { account ->
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/kotlin/net/mullvad/mullvadvpn/ui/widget/ListenableScrollView.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/ListenableScrollView.kt
new file mode 100644
index 0000000000..95fdeebc63
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/ListenableScrollView.kt
@@ -0,0 +1,30 @@
+package net.mullvad.mullvadvpn.ui.widget
+
+import android.content.Context
+import android.util.AttributeSet
+import android.widget.ScrollView
+
+class ListenableScrollView : ScrollView {
+    var onScrollListener: ((Int, Int, Int, Int) -> Unit)? = null
+
+    constructor(context: Context) : super(context) {}
+
+    constructor(context: Context, attributes: AttributeSet) : super(context, attributes) {}
+
+    constructor(context: Context, attributes: AttributeSet, defaultStyleAttribute: Int) :
+        super(context, attributes, defaultStyleAttribute) {
+    }
+
+    constructor(
+        context: Context,
+        attributes: AttributeSet,
+        defaultStyleAttribute: Int,
+        defaultStyleResource: Int
+    ) : super(context, attributes, defaultStyleAttribute, defaultStyleResource) {
+    }
+
+    override fun onScrollChanged(left: Int, top: Int, oldLeft: Int, oldTop: Int) {
+        super.onScrollChanged(left, top, oldLeft, oldTop)
+        onScrollListener?.invoke(left, top, oldLeft, oldTop)
+    }
+}
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/util/LinearInterpolation.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/util/LinearInterpolation.kt
new file mode 100644
index 0000000000..ea0f21ad49
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/util/LinearInterpolation.kt
@@ -0,0 +1,46 @@
+package net.mullvad.mullvadvpn.util
+
+import kotlin.properties.Delegates.observable
+import kotlin.reflect.KProperty
+
+class LinearInterpolation {
+    private val observer = { property: KProperty<*>, oldValue: Float, newValue: Float ->
+        if (!updated && oldValue != newValue) {
+            updated = true
+        }
+    }
+
+    private val realStart
+        get() = start - reference
+
+    private val realEnd
+        get() = end - reference
+
+    var reference by observable(0.0f, observer)
+    var start by observable(0.0f, observer)
+    var end by observable(0.0f, observer)
+
+    var updated = true
+        get() {
+            if (field == true) {
+                field = false
+                return true
+            } else {
+                return false
+            }
+        }
+
+    fun interpolate(progress: Float): Float {
+        return progress * (realEnd - realStart) + realStart
+    }
+
+    fun progress(interpolation: Float): Float {
+        val length = realEnd - realStart
+
+        if (length == 0.0f) {
+            return 0.0f
+        }
+
+        return (interpolation - realStart) / length
+    }
+}
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>
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>
diff --git a/android/src/main/res/layout/preferences.xml b/android/src/main/res/layout/preferences.xml
index 33845d4e09..ad51a62277 100644
--- a/android/src/main/res/layout/preferences.xml
+++ b/android/src/main/res/layout/preferences.xml
@@ -1,93 +1,126 @@
-<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"
+             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_preferences" />
-    <LinearLayout android:id="@+id/auto_connect"
-                  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/auto_connect" />
-        <net.mullvad.mullvadvpn.ui.CellSwitch android:id="@+id/auto_connect_toggle"
-                                              android:layout_width="52dp"
-                                              android:layout_height="32dp"
-                                              android:layout_weight="0" />
-    </LinearLayout>
-    <TextView android:id="@+id/auto_connect_footer"
-              android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:paddingTop="8dp"
-              android:paddingHorizontal="24dp"
-              android:textColor="@color/white60"
-              android:textSize="13sp"
-              android:text="@string/auto_connect_footer" />
-    <LinearLayout android:id="@+id/allow_lan"
-                  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/local_network_sharing" />
-        <net.mullvad.mullvadvpn.ui.CellSwitch android:id="@+id/allow_lan_toggle"
-                                              android:layout_width="52dp"
-                                              android:layout_height="32dp"
-                                              android:layout_weight="0" />
+    <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: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_preferences" />
+        </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_preferences" />
+                <LinearLayout android:id="@+id/auto_connect"
+                              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/auto_connect" />
+                    <net.mullvad.mullvadvpn.ui.CellSwitch android:id="@+id/auto_connect_toggle"
+                                                          android:layout_width="52dp"
+                                                          android:layout_height="32dp"
+                                                          android:layout_weight="0" />
+                </LinearLayout>
+                <TextView android:id="@+id/auto_connect_footer"
+                          android:layout_width="match_parent"
+                          android:layout_height="wrap_content"
+                          android:paddingTop="8dp"
+                          android:paddingHorizontal="24dp"
+                          android:textColor="@color/white60"
+                          android:textSize="13sp"
+                          android:text="@string/auto_connect_footer" />
+                <LinearLayout android:id="@+id/allow_lan"
+                              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/local_network_sharing" />
+                    <net.mullvad.mullvadvpn.ui.CellSwitch android:id="@+id/allow_lan_toggle"
+                                                          android:layout_width="52dp"
+                                                          android:layout_height="32dp"
+                                                          android:layout_weight="0" />
+                </LinearLayout>
+                <TextView android:id="@+id/allow_lan_footer"
+                          android:layout_width="match_parent"
+                          android:layout_height="wrap_content"
+                          android:paddingTop="8dp"
+                          android:paddingHorizontal="24dp"
+                          android:textColor="@color/white60"
+                          android:textSize="13sp"
+                          android:text="@string/allow_lan_footer" />
+            </LinearLayout>
+        </net.mullvad.mullvadvpn.ui.widget.ListenableScrollView>
     </LinearLayout>
-    <TextView android:id="@+id/allow_lan_footer"
-              android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:paddingTop="8dp"
-              android:paddingHorizontal="24dp"
-              android:textColor="@color/white60"
-              android:textSize="13sp"
-              android:text="@string/allow_lan_footer" />
-</LinearLayout>
+</FrameLayout>
diff --git a/android/src/main/res/layout/problem_report.xml b/android/src/main/res/layout/problem_report.xml
index 93ea844249..38ac852949 100644
--- a/android/src/main/res/layout/problem_report.xml
+++ b/android/src/main/res/layout/problem_report.xml
@@ -1,158 +1,190 @@
-<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"
+             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_weight="0"
-              android:layout_marginTop="4dp"
-              android:layout_marginBottom="8dp"
-              android:layout_marginHorizontal="24dp"
               android:textColor="@color/white"
-              android:textSize="32sp"
+              android:textSize="16sp"
               android:textStyle="bold"
               android:text="@string/report_a_problem" />
-    <ViewSwitcher android:id="@+id/body_container"
-                  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:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:layout_weight="0"
-                      android:layout_marginBottom="24dp"
-                      android:layout_marginHorizontal="24dp"
-                      android:textColor="@color/white80"
-                      android:textSize="13sp"
-                      android:text="@string/problem_report_description" />
-            <EditText android:id="@+id/user_email"
-                      android:layout_width="match_parent"
-                      android:layout_height="wrap_content"
-                      android:layout_weight="0"
-                      android:layout_marginBottom="12dp"
-                      android:layout_marginHorizontal="22dp"
-                      android:singleLine="true"
-                      android:hint="@string/user_email_hint"
-                      style="@style/InputText" />
-            <EditText android:id="@+id/user_message"
-                      android:layout_width="match_parent"
-                      android:layout_height="0dp"
-                      android:layout_weight="1"
-                      android:layout_marginHorizontal="22dp"
-                      android:singleLine="false"
-                      android:hint="@string/user_message_hint"
-                      android:gravity="top"
-                      style="@style/InputText" />
-            <Button android:id="@+id/send_button"
-                    android:layout_marginHorizontal="24dp"
-                    android:layout_marginVertical="16dp"
-                    android:enabled="false"
-                    android:text="@string/send"
-                    style="@style/GreenButton" />
-        </LinearLayout>
-        <LinearLayout android:layout_width="match_parent"
-                      android:layout_height="match_parent"
-                      android:layout_marginVertical="16dp"
-                      android:layout_marginHorizontal="24dp"
-                      android:orientation="vertical">
-            <FrameLayout android:layout_width="60dp"
-                         android:layout_height="60dp"
-                         android:layout_gravity="center_horizontal"
-                         android:layout_marginBottom="32dp">
-                <ProgressBar android:id="@+id/sending_spinner"
-                             android:layout_width="match_parent"
-                             android:layout_height="match_parent"
-                             android:layout_gravity="center"
-                             android:indeterminate="true"
-                             android:indeterminateOnly="true"
-                             android:indeterminateDuration="600"
-                             android:indeterminateDrawable="@drawable/icon_spinner" />
-                <ImageView android:id="@+id/sent_successfully_icon"
-                           android:layout_width="match_parent"
-                           android:layout_height="match_parent"
-                           android:layout_gravity="center"
-                           android:src="@drawable/icon_success"
-                           android:visibility="gone" />
-                <ImageView android:id="@+id/failed_to_send_icon"
-                           android:layout_width="match_parent"
-                           android:layout_height="match_parent"
-                           android:layout_gravity="center"
-                           android:src="@drawable/icon_fail"
-                           android:visibility="gone" />
-            </FrameLayout>
-            <TextView android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:layout_marginBottom="4dp"
-                      android:textColor="@color/green"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/secure_connection"
-                      android:textAllCaps="true" />
-            <TextView android:id="@+id/send_status"
-                      android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:layout_marginBottom="4dp"
-                      android:textColor="@color/white"
-                      android:textSize="34sp"
-                      android:textStyle="bold"
-                      android:text="@string/sending" />
-            <TextView android:id="@+id/send_details"
-                      android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:textColor="@color/white60"
-                      android:textSize="13sp"
-                      android:text="@string/sent_thanks"
-                      android:visibility="gone" />
-            <TextView android:id="@+id/response_message"
-                      android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:textColor="@color/white60"
-                      android:textSize="13sp"
-                      android:text="@string/sent_contact"
-                      android:visibility="gone" />
-            <TextView android:id="@+id/response_email"
+    <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: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="13sp"
+                      android:textSize="16sp"
                       android:textStyle="bold"
-                      android:visibility="gone" />
-            <Space android:layout_width="match_parent"
-                   android:layout_height="0dp"
-                   android:layout_weight="1" />
-            <Button android:id="@+id/edit_message_button"
-                    android:layout_marginTop="16dp"
-                    android:text="@string/edit_message"
-                    android:visibility="gone"
-                    style="@style/BlueButton" />
-            <Button android:id="@+id/try_again_button"
-                    android:layout_marginTop="16dp"
-                    android:text="@string/try_again"
-                    android:visibility="gone"
-                    style="@style/GreenButton" />
-        </LinearLayout>
-    </ViewSwitcher>
-</LinearLayout>
+                      android:text="@string/report_a_problem" />
+        </FrameLayout>
+        <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
+                                                               android:layout_width="match_parent"
+                                                               android:layout_height="match_parent"
+                                                               android:fillViewport="true">
+            <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_marginTop="4dp"
+                          android:layout_marginBottom="8dp"
+                          android:layout_marginHorizontal="24dp"
+                          android:textColor="@color/white"
+                          android:textSize="32sp"
+                          android:textStyle="bold"
+                          android:text="@string/report_a_problem" />
+                <ViewSwitcher android:id="@+id/body_container"
+                              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:layout_width="wrap_content"
+                                  android:layout_height="wrap_content"
+                                  android:layout_weight="0"
+                                  android:layout_marginBottom="24dp"
+                                  android:layout_marginHorizontal="24dp"
+                                  android:textColor="@color/white80"
+                                  android:textSize="13sp"
+                                  android:text="@string/problem_report_description" />
+                        <EditText android:id="@+id/user_email"
+                                  android:layout_width="match_parent"
+                                  android:layout_height="wrap_content"
+                                  android:layout_weight="0"
+                                  android:layout_marginBottom="12dp"
+                                  android:layout_marginHorizontal="22dp"
+                                  android:singleLine="true"
+                                  android:hint="@string/user_email_hint"
+                                  style="@style/InputText" />
+                        <EditText android:id="@+id/user_message"
+                                  android:layout_width="match_parent"
+                                  android:layout_height="0dp"
+                                  android:layout_weight="1"
+                                  android:layout_marginHorizontal="22dp"
+                                  android:singleLine="false"
+                                  android:hint="@string/user_message_hint"
+                                  android:gravity="top"
+                                  style="@style/InputText" />
+                        <Button android:id="@+id/send_button"
+                                android:layout_marginHorizontal="24dp"
+                                android:layout_marginVertical="16dp"
+                                android:enabled="false"
+                                android:text="@string/send"
+                                style="@style/GreenButton" />
+                    </LinearLayout>
+                    <LinearLayout android:layout_width="match_parent"
+                                  android:layout_height="match_parent"
+                                  android:layout_marginVertical="16dp"
+                                  android:layout_marginHorizontal="24dp"
+                                  android:orientation="vertical">
+                        <FrameLayout android:layout_width="60dp"
+                                     android:layout_height="60dp"
+                                     android:layout_gravity="center_horizontal"
+                                     android:layout_marginBottom="32dp">
+                            <ProgressBar android:id="@+id/sending_spinner"
+                                         android:layout_width="match_parent"
+                                         android:layout_height="match_parent"
+                                         android:layout_gravity="center"
+                                         android:indeterminate="true"
+                                         android:indeterminateOnly="true"
+                                         android:indeterminateDuration="600"
+                                         android:indeterminateDrawable="@drawable/icon_spinner" />
+                            <ImageView android:id="@+id/sent_successfully_icon"
+                                       android:layout_width="match_parent"
+                                       android:layout_height="match_parent"
+                                       android:layout_gravity="center"
+                                       android:src="@drawable/icon_success"
+                                       android:visibility="gone" />
+                            <ImageView android:id="@+id/failed_to_send_icon"
+                                       android:layout_width="match_parent"
+                                       android:layout_height="match_parent"
+                                       android:layout_gravity="center"
+                                       android:src="@drawable/icon_fail"
+                                       android:visibility="gone" />
+                        </FrameLayout>
+                        <TextView android:layout_width="wrap_content"
+                                  android:layout_height="wrap_content"
+                                  android:layout_marginBottom="4dp"
+                                  android:textColor="@color/green"
+                                  android:textSize="16sp"
+                                  android:textStyle="bold"
+                                  android:text="@string/secure_connection"
+                                  android:textAllCaps="true" />
+                        <TextView android:id="@+id/send_status"
+                                  android:layout_width="wrap_content"
+                                  android:layout_height="wrap_content"
+                                  android:layout_marginBottom="4dp"
+                                  android:textColor="@color/white"
+                                  android:textSize="34sp"
+                                  android:textStyle="bold"
+                                  android:text="@string/sending" />
+                        <TextView android:id="@+id/send_details"
+                                  android:layout_width="wrap_content"
+                                  android:layout_height="wrap_content"
+                                  android:textColor="@color/white60"
+                                  android:textSize="13sp"
+                                  android:text="@string/sent_thanks"
+                                  android:visibility="gone" />
+                        <TextView android:id="@+id/response_message"
+                                  android:layout_width="wrap_content"
+                                  android:layout_height="wrap_content"
+                                  android:textColor="@color/white60"
+                                  android:textSize="13sp"
+                                  android:text="@string/sent_contact"
+                                  android:visibility="gone" />
+                        <TextView android:id="@+id/response_email"
+                                  android:layout_width="wrap_content"
+                                  android:layout_height="wrap_content"
+                                  android:textColor="@color/white"
+                                  android:textSize="13sp"
+                                  android:textStyle="bold"
+                                  android:visibility="gone" />
+                        <Space android:layout_width="match_parent"
+                               android:layout_height="0dp"
+                               android:layout_weight="1" />
+                        <Button android:id="@+id/edit_message_button"
+                                android:layout_marginTop="16dp"
+                                android:text="@string/edit_message"
+                                android:visibility="gone"
+                                style="@style/BlueButton" />
+                        <Button android:id="@+id/try_again_button"
+                                android:layout_marginTop="16dp"
+                                android:text="@string/try_again"
+                                android:visibility="gone"
+                                style="@style/GreenButton" />
+                    </LinearLayout>
+                </ViewSwitcher>
+            </LinearLayout>
+        </net.mullvad.mullvadvpn.ui.widget.ListenableScrollView>
+    </LinearLayout>
+</FrameLayout>
diff --git a/android/src/main/res/layout/settings.xml b/android/src/main/res/layout/settings.xml
index a516111dc5..13488a2b43 100644
--- a/android/src/main/res/layout/settings.xml
+++ b/android/src/main/res/layout/settings.xml
@@ -1,190 +1,214 @@
-<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="1dp">
-    <ImageButton android:id="@+id/close"
-                 android:layout_width="wrap_content"
-                 android:layout_height="wrap_content"
-                 android:padding="12dp"
-                 android:background="?android:attr/selectableItemBackground"
-                 android:src="@drawable/icon_close" />
-    <TextView android:layout_width="wrap_content"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+             android:layout_width="match_parent"
+             android:layout_height="match_parent"
+             android:background="@color/darkBlue"
+             android:gravity="left"
+             android:elevation="1dp">
+    <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" />
-    <ScrollView android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="12dp">
-        <LinearLayout android:layout_width="match_parent"
+    <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">
+            <ImageButton android:id="@+id/close"
+                         android:layout_width="wrap_content"
+                         android:layout_height="wrap_content"
+                         android:padding="12dp"
+                         android:background="?android:attr/selectableItemBackground"
+                         android:src="@drawable/icon_close" />
+            <TextView android:id="@+id/collapsed_title"
+                      android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
-                      android:orientation="vertical">
-            <LinearLayout android:id="@+id/account"
-                          android:layout_width="match_parent"
-                          android:layout_height="wrap_content"
-                          android:layout_marginTop="12dp"
-                          android:paddingHorizontal="16dp"
-                          android:background="@drawable/cell_button_background"
-                          android:clickable="true"
-                          android:gravity="center"
-                          android:visibility="gone">
-                <TextView android:layout_width="wrap_content"
+                      android:layout_marginHorizontal="4dp"
+                      android:layout_gravity="center"
+                      android:textColor="@color/white"
+                      android:textSize="16sp"
+                      android:textStyle="bold"
+                      android:text="@string/settings" />
+        </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="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/settings_account" />
-                <TextView android:id="@+id/remaining_time"
+                          android:orientation="vertical">
+                <TextView android:id="@+id/expanded_title"
                           android:layout_width="wrap_content"
                           android:layout_height="wrap_content"
-                          android:layout_weight="1"
-                          android:paddingHorizontal="8dp"
-                          android:gravity="right"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text=""
-                          android:textAllCaps="true" />
-                <ImageView android:layout_width="14dp"
-                           android:layout_height="24dp"
-                           android:layout_weight="0"
-                           android:alpha="0.6"
-                           android:src="@drawable/icon_chevron" />
-            </LinearLayout>
-            <LinearLayout android:id="@+id/preferences"
-                          android:layout_width="match_parent"
-                          android:layout_height="wrap_content"
-                          android:layout_marginTop="1dp"
-                          android:paddingHorizontal="16dp"
-                          android:background="@drawable/cell_button_background"
-                          android:clickable="true"
-                          android:gravity="center"
-                          android:visibility="gone">
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:layout_weight="1"
-                          android:paddingHorizontal="8dp"
-                          android:paddingVertical="17dp"
+                          android:layout_marginTop="4dp"
+                          android:layout_marginLeft="24dp"
                           android:textColor="@color/white"
-                          android:textSize="20sp"
+                          android:textSize="32sp"
                           android:textStyle="bold"
-                          android:text="@string/settings_preferences" />
-                <ImageView android:layout_width="14dp"
-                           android:layout_height="24dp"
-                           android:layout_weight="0"
-                           android:alpha="0.6"
-                           android:src="@drawable/icon_chevron" />
-            </LinearLayout>
-            <LinearLayout android:id="@+id/advanced"
+                          android:text="@string/settings" />
+                <LinearLayout android:id="@+id/account"
+                              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"
+                              android:visibility="gone">
+                    <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/settings_account" />
+                    <TextView android:id="@+id/remaining_time"
+                              android:layout_width="wrap_content"
+                              android:layout_height="wrap_content"
+                              android:layout_weight="1"
+                              android:paddingHorizontal="8dp"
+                              android:gravity="right"
+                              android:textColor="@color/white60"
+                              android:textSize="13sp"
+                              android:textStyle="bold"
+                              android:text=""
+                              android:textAllCaps="true" />
+                    <ImageView android:layout_width="14dp"
+                               android:layout_height="24dp"
+                               android:layout_weight="0"
+                               android:alpha="0.6"
+                               android:src="@drawable/icon_chevron" />
+                </LinearLayout>
+                <LinearLayout android:id="@+id/preferences"
+                              android:layout_width="match_parent"
+                              android:layout_height="wrap_content"
+                              android:layout_marginTop="1dp"
+                              android:paddingHorizontal="16dp"
+                              android:background="@drawable/cell_button_background"
+                              android:clickable="true"
+                              android:gravity="center"
+                              android:visibility="gone">
+                    <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/settings_preferences" />
+                    <ImageView android:layout_width="14dp"
+                               android:layout_height="24dp"
+                               android:layout_weight="0"
+                               android:alpha="0.6"
+                               android:src="@drawable/icon_chevron" />
+                </LinearLayout>
+                <LinearLayout android:id="@+id/advanced"
+                              android:layout_width="match_parent"
+                              android:layout_height="wrap_content"
+                              android:layout_marginTop="1dp"
+                              android:paddingHorizontal="16dp"
+                              android:background="@drawable/cell_button_background"
+                              android:clickable="true"
+                              android:gravity="center"
+                              android:visibility="gone">
+                    <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/settings_advanced" />
+                    <ImageView android:layout_width="14dp"
+                               android:layout_height="24dp"
+                               android:layout_weight="0"
+                               android:alpha="0.6"
+                               android:src="@drawable/icon_chevron" />
+                </LinearLayout>
+                <LinearLayout android:id="@+id/app_version"
+                              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">
+                    <ImageView android:id="@+id/app_version_warning"
+                               android:layout_width="wrap_content"
+                               android:layout_height="wrap_content"
+                               android:layout_weight="0"
+                               android:paddingLeft="8dp"
+                               android:src="@drawable/icon_alert" />
+                    <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/app_version" />
+                    <TextView android:id="@+id/app_version_label"
+                              android:layout_width="wrap_content"
+                              android:layout_height="wrap_content"
+                              android:layout_weight="1"
+                              android:paddingHorizontal="8dp"
+                              android:gravity="right"
+                              android:textColor="@color/white60"
+                              android:textSize="13sp"
+                              android:textStyle="bold"
+                              android:text="" />
+                    <ImageView android:layout_width="16dp"
+                               android:layout_height="16dp"
+                               android:layout_weight="0"
+                               android:alpha="0.6"
+                               android:src="@drawable/icon_extlink" />
+                </LinearLayout>
+                <TextView android:id="@+id/app_version_footer"
                           android:layout_width="match_parent"
                           android:layout_height="wrap_content"
-                          android:layout_marginTop="1dp"
-                          android:paddingHorizontal="16dp"
-                          android:background="@drawable/cell_button_background"
-                          android:clickable="true"
-                          android:gravity="center"
-                          android:visibility="gone">
-                <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/settings_advanced" />
-                <ImageView android:layout_width="14dp"
-                           android:layout_height="24dp"
-                           android:layout_weight="0"
-                           android:alpha="0.6"
-                           android:src="@drawable/icon_chevron" />
-            </LinearLayout>
-            <LinearLayout android:id="@+id/app_version"
-                          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">
-                <ImageView android:id="@+id/app_version_warning"
-                           android:layout_width="wrap_content"
-                           android:layout_height="wrap_content"
-                           android:layout_weight="0"
-                           android:paddingLeft="8dp"
-                           android:src="@drawable/icon_alert" />
-                <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/app_version" />
-                <TextView android:id="@+id/app_version_label"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:layout_weight="1"
-                          android:paddingHorizontal="8dp"
-                          android:gravity="right"
+                          android:paddingTop="8dp"
+                          android:paddingHorizontal="24dp"
                           android:textColor="@color/white60"
                           android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="" />
-                <ImageView android:layout_width="16dp"
-                           android:layout_height="16dp"
-                           android:layout_weight="0"
-                           android:alpha="0.6"
-                           android:src="@drawable/icon_extlink" />
-            </LinearLayout>
-            <TextView android:id="@+id/app_version_footer"
-                      android:layout_width="match_parent"
-                      android:layout_height="wrap_content"
-                      android:paddingTop="8dp"
-                      android:paddingHorizontal="24dp"
-                      android:textColor="@color/white60"
-                      android:textSize="13sp"
-                      android:text="@string/update_available_footer" />
-            <LinearLayout android:id="@+id/report_a_problem"
-                          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/report_a_problem" />
-                <ImageView android:layout_width="14dp"
-                           android:layout_height="24dp"
-                           android:layout_weight="0"
-                           android:alpha="0.6"
-                           android:src="@drawable/icon_chevron" />
+                          android:text="@string/update_available_footer" />
+                <LinearLayout android:id="@+id/report_a_problem"
+                              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/report_a_problem" />
+                    <ImageView android:layout_width="14dp"
+                               android:layout_height="24dp"
+                               android:layout_weight="0"
+                               android:alpha="0.6"
+                               android:src="@drawable/icon_chevron" />
+                </LinearLayout>
+                <Button android:id="@+id/quit_button"
+                        android:layout_marginTop="24dp"
+                        android:layout_marginLeft="24dp"
+                        android:layout_marginRight="24dp"
+                        android:layout_marginBottom="24dp"
+                        android:text="@string/quit"
+                        style="@style/RedButton" />
             </LinearLayout>
-            <Button android:id="@+id/quit_button"
-                    android:layout_marginTop="24dp"
-                    android:layout_marginLeft="24dp"
-                    android:layout_marginRight="24dp"
-                    android:layout_marginBottom="24dp"
-                    android:text="@string/quit"
-                    style="@style/RedButton" />
-        </LinearLayout>
-    </ScrollView>
-</LinearLayout>
+        </net.mullvad.mullvadvpn.ui.widget.ListenableScrollView>
+    </LinearLayout>
+</FrameLayout>
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>