Use overlays instead of changing the foreground

3 files changed, 69 insertions, 12 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt
index 9c0c79348d..6446bd07b5 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt
@@ -8,6 +8,7 @@ import android.view.View
 import android.view.View.OnFocusChangeListener
 import android.widget.EditText
 import android.widget.ImageButton
+import net.mullvad.mullvadvpn.AccountInputContainer.BorderState
 
 const val MIN_ACCOUNT_TOKEN_LENGTH = 10
 
@@ -18,9 +19,6 @@ class AccountInput(val parentView: View, val resources: Resources) {
     private val enabledTextColor = resources.getColor(R.color.blue)
     private val errorTextColor = resources.getColor(R.color.red)
 
-    private val focusedBorder = resources.getDrawable(R.drawable.account_input_border_focused, null)
-    private val errorBorder = resources.getDrawable(R.drawable.account_input_border_error, null)
-
     private var inputHasFocus = false
         set(value) {
             field = value
@@ -42,7 +40,7 @@ class AccountInput(val parentView: View, val resources: Resources) {
             }
         }
 
-    val container: View = parentView.findViewById(R.id.account_input_container)
+    val container: AccountInputContainer = parentView.findViewById(R.id.account_input_container)
     val input: EditText = parentView.findViewById(R.id.account_input)
     val button: ImageButton = parentView.findViewById(R.id.login_button)
 
@@ -120,13 +118,11 @@ class AccountInput(val parentView: View, val resources: Resources) {
 
     private fun updateBorder() {
         if (usingErrorColor) {
-            container.foreground = errorBorder
+            container.borderState = BorderState.ERROR
+        } else if (inputHasFocus) {
+            container.borderState = BorderState.FOCUSED
         } else {
-            if (inputHasFocus) {
-                container.foreground = focusedBorder
-            } else {
-                container.foreground = null
-            }
+            container.borderState = BorderState.UNFOCUSED
         }
     }
 
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInputContainer.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInputContainer.kt
new file mode 100644
index 0000000000..19d58c9608
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInputContainer.kt
@@ -0,0 +1,61 @@
+package net.mullvad.mullvadvpn
+
+import android.content.Context
+import android.util.AttributeSet
+import android.widget.LinearLayout
+
+class AccountInputContainer : LinearLayout {
+    enum class BorderState {
+        UNFOCUSED,
+        FOCUSED,
+        ERROR
+    }
+
+    private val errorBorder = resources.getDrawable(R.drawable.account_input_border_error, null)
+    private val focusedBorder = resources.getDrawable(R.drawable.account_input_border_focused, null)
+
+    var borderState = BorderState.UNFOCUSED
+        set(value) {
+            field = value
+
+            overlay.clear()
+
+            when (value) {
+                BorderState.FOCUSED -> overlay.add(focusedBorder)
+                BorderState.ERROR -> overlay.add(errorBorder)
+            }
+        }
+
+    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) {
+    }
+
+    protected override fun onLayout(
+        changed: Boolean,
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int
+    ) {
+        super.onLayout(changed, left, top, right, bottom)
+
+        if (changed) {
+            val width = right - left
+            val height = bottom - top
+
+            errorBorder.setBounds(0, 0, width, height)
+            focusedBorder.setBounds(0, 0, width, height)
+        }
+    }
+}
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
index ce35d56525..8ebf04c8b4 100644
--- a/android/src/main/res/layout/login.xml
+++ b/android/src/main/res/layout/login.xml
@@ -107,7 +107,7 @@
                 android:textSize="13sp"
                 android:text="@string/login_description"
                 />
-        <LinearLayout android:id="@+id/account_input_container"
+        <net.mullvad.mullvadvpn.AccountInputContainer android:id="@+id/account_input_container"
                 android:layout_width="match_parent"
                 android:layout_height="48dp"
                 android:orientation="horizontal"
@@ -137,7 +137,7 @@
                     android:background="@drawable/login_button_background"
                     android:src="@drawable/login_button_arrow"
                     />
-        </LinearLayout>
+        </net.mullvad.mullvadvpn.AccountInputContainer>
         <Space
                 android:layout_width="match_parent"
                 android:layout_height="0dp"