Fix account number ui in account settings

Changes:
* Increases the size of the show/hide and copy buttons.
* Auto-resize the account number if the font scaling makes it too wide.

4 files changed, 60 insertions, 53 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/CopyableInformationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/CopyableInformationView.kt
index 7d9dc711bd..9e5d68d585 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/CopyableInformationView.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/CopyableInformationView.kt
@@ -11,10 +11,6 @@ import net.mullvad.mullvadvpn.R
 
 class CopyableInformationView : InformationView {
     var clipboardLabel: String? = null
-        set(value) {
-            field = value
-            shouldEnable = value != null
-        }
 
     var copiedToast: String? = null
 
@@ -43,6 +39,7 @@ class CopyableInformationView : InformationView {
             visibility = View.VISIBLE
             setOnClickListener { copyToClipboard() }
         }
+        shouldEnable = false
     }
 
     private fun loadAttributes(attributes: AttributeSet) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/InformationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/InformationView.kt
index fec64d9e14..42f78b3b4a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/InformationView.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/InformationView.kt
@@ -92,7 +92,7 @@ open class InformationView : LinearLayout {
 
             is Masking.None -> {
                 informationDisplay.transformationMethod = null
-                toggleMaskingButton.visibility = GONE
+                toggleMaskingButton.visibility = INVISIBLE
             }
         }
 
diff --git a/android/app/src/main/res/layout/information_view.xml b/android/app/src/main/res/layout/information_view.xml
index 88425fef50..eb94d7542b 100644
--- a/android/app/src/main/res/layout/information_view.xml
+++ b/android/app/src/main/res/layout/information_view.xml
@@ -1,56 +1,64 @@
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
-    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-                  android:layout_width="match_parent"
-                  android:layout_height="match_parent"
-                  android:orientation="vertical">
+    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+                                                       xmlns:app="http://schemas.android.com/apk/res-auto"
+                                                       android:layout_width="match_parent"
+                                                       android:layout_height="match_parent"
+                                                       android:orientation="vertical">
         <TextView android:id="@+id/description"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
-                  android:layout_marginBottom="9dp"
                   android:text=""
                   android:textColor="@color/white60"
                   android:textSize="@dimen/text_small"
-                  android:textStyle="bold" />
-        <RelativeLayout android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:orientation="horizontal">
-            <TextView android:id="@+id/information_display"
-                      android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:text=""
-                      android:textColor="@color/white"
-                      android:textSize="@dimen/text_medium"
-                      android:textStyle="bold"
-                      android:layout_alignParentStart="true" />
-            <ProgressBar android:id="@+id/spinner"
-                         android:layout_width="20dp"
-                         android:layout_height="20dp"
-                         android:indeterminate="true"
-                         android:indeterminateDrawable="@drawable/icon_spinner"
-                         android:indeterminateDuration="600"
-                         android:indeterminateOnly="true"
-                         android:visibility="visible"
-                         android:layout_alignParentStart="true" />
-            <ImageButton android:id="@+id/toggle_masking_button"
-                         android:layout_width="24dp"
-                         android:layout_height="24dp"
-                         android:layout_alignWithParentIfMissing="true"
-                         android:layout_marginEnd="20dp"
-                         android:layout_toStartOf="@id/copy_button"
-                         android:background="@drawable/icon_show"
-                         android:visibility="gone"
-                         android:clickable="true"
-                         android:focusable="true"
-                         android:contentDescription="@string/show_account_number" />
-            <ImageButton android:id="@+id/copy_button"
-                         android:layout_width="24dp"
-                         android:layout_height="24dp"
-                         android:layout_alignParentEnd="true"
-                         android:background="@drawable/icon_copy"
-                         android:visibility="gone"
-                         android:clickable="true"
-                         android:focusable="true"
-                         android:contentDescription="@string/copy_account_number" />
-        </RelativeLayout>
-    </LinearLayout>
+                  android:textStyle="bold"
+                  app:layout_constraintTop_toTopOf="parent"
+                  app:layout_constraintStart_toStartOf="parent" />
+        <TextView android:id="@+id/information_display"
+                  android:layout_width="0dp"
+                  android:layout_height="wrap_content"
+                  android:text=""
+                  android:textColor="@color/white"
+                  android:textStyle="bold"
+                  android:maxLines="1"
+                  android:autoSizeTextType="uniform"
+                  android:autoSizeMinTextSize="8dp"
+                  android:layout_marginTop="9dp"
+                  android:layout_marginEnd="@dimen/information_action_margin"
+                  app:layout_constraintTop_toBottomOf="@id/description"
+                  app:layout_constraintStart_toStartOf="parent" />
+        <ProgressBar android:id="@+id/spinner"
+                     android:layout_width="@dimen/information_icon_size"
+                     android:layout_height="@dimen/information_icon_size"
+                     android:indeterminate="true"
+                     android:indeterminateDrawable="@drawable/icon_spinner"
+                     android:indeterminateDuration="600"
+                     android:indeterminateOnly="true"
+                     android:visibility="visible"
+                     app:layout_constraintStart_toStartOf="parent"
+                     app:layout_constraintTop_toBottomOf="@id/description"
+                     app:layout_constraintBottom_toBottomOf="parent"
+                     android:layout_alignEnd="@id/copy_button" />
+        <ImageButton android:id="@+id/toggle_masking_button"
+                     android:layout_width="@dimen/information_icon_size"
+                     android:layout_height="@dimen/information_icon_size"
+                     android:background="@drawable/icon_show"
+                     android:visibility="invisible"
+                     android:focusable="true"
+                     android:contentDescription="@string/show_account_number"
+                     android:layout_marginEnd="@dimen/information_action_margin"
+                     app:layout_constraintTop_toTopOf="@id/information_display"
+                     app:layout_constraintBottom_toBottomOf="@id/information_display"
+                     app:layout_constraintEnd_toStartOf="@id/copy_button" />
+        <ImageButton android:id="@+id/copy_button"
+                     android:layout_width="@dimen/information_icon_size"
+                     android:layout_height="@dimen/information_icon_size"
+                     android:background="@drawable/icon_copy"
+                     android:visibility="invisible"
+                     android:clickable="true"
+                     android:focusable="true"
+                     android:contentDescription="@string/copy_account_number"
+                     app:layout_constraintTop_toTopOf="@id/information_display"
+                     app:layout_constraintBottom_toBottomOf="@id/information_display"
+                     app:layout_constraintEnd_toEndOf="parent" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </merge>
diff --git a/android/app/src/main/res/values/dimensions.xml b/android/app/src/main/res/values/dimensions.xml
index e3f619db33..ca7ff1ac81 100644
--- a/android/app/src/main/res/values/dimensions.xml
+++ b/android/app/src/main/res/values/dimensions.xml
@@ -46,6 +46,8 @@
     <dimen name="icon_size">24dp</dimen>
     <dimen name="widget_padding">16dp</dimen>
     <dimen name="expanded_toolbar_height">104dp</dimen>
+    <dimen name="information_icon_size">28dp</dimen>
+    <dimen name="information_action_margin">20dp</dimen>
     <!-- Switch Dimens-->
     <dimen name="switch_width">46dp</dimen>
     <dimen name="switch_height">30dp</dimen>