Use views to make account input corners round

3 files changed, 56 insertions, 1 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountInputContainer.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountInputContainer.kt
index a18da9216a..59c4acdc70 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountInputContainer.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/AccountInputContainer.kt
@@ -2,6 +2,8 @@ package net.mullvad.mullvadvpn.ui
 
 import android.content.Context
 import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.ImageView
 import android.widget.RelativeLayout
 import net.mullvad.mullvadvpn.R
 
@@ -12,9 +14,22 @@ class AccountInputContainer : RelativeLayout {
         ERROR
     }
 
+    private val container =
+        context.getSystemService(Context.LAYOUT_INFLATER_SERVICE).let { service ->
+            val inflater = service as LayoutInflater
+
+            inflater.inflate(R.layout.account_input_container, this)
+        }
+
+
     private val errorBorder = resources.getDrawable(R.drawable.account_input_border_error, null)
     private val focusedBorder = resources.getDrawable(R.drawable.account_input_border_focused, null)
 
+    private val topLeftCorner: ImageView = container.findViewById(R.id.top_left_corner)
+    private val topRightCorner: ImageView = container.findViewById(R.id.top_right_corner)
+    private val bottomLeftCorner: ImageView = container.findViewById(R.id.bottom_left_corner)
+    private val bottomRightCorner: ImageView = container.findViewById(R.id.bottom_right_corner)
+
     var borderState = BorderState.UNFOCUSED
         set(value) {
             field = value
@@ -28,6 +43,15 @@ class AccountInputContainer : RelativeLayout {
             }
         }
 
+    init {
+        val borderElevation = elevation + 0.1f
+
+        topLeftCorner.elevation = borderElevation
+        topRightCorner.elevation = borderElevation
+        bottomLeftCorner.elevation = borderElevation
+        bottomRightCorner.elevation = borderElevation
+    }
+
     constructor(context: Context) : super(context) {}
 
     constructor(context: Context, attributes: AttributeSet) : super(context, attributes) {}
@@ -60,4 +84,5 @@ class AccountInputContainer : RelativeLayout {
             focusedBorder.setBounds(0, 0, width, height)
         }
     }
+
 }
diff --git a/android/src/main/res/layout/account_input_container.xml b/android/src/main/res/layout/account_input_container.xml
new file mode 100644
index 0000000000..f872bd1bf6
--- /dev/null
+++ b/android/src/main/res/layout/account_input_container.xml
@@ -0,0 +1,29 @@
+<merge xmlns:android="http://schemas.android.com/apk/res/android">
+    <ImageView android:id="@+id/top_left_corner"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:layout_alignParentTop="true"
+               android:layout_alignParentLeft="true"
+               android:src="@drawable/account_input_corner" />
+    <ImageView android:id="@+id/top_right_corner"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:layout_alignParentTop="true"
+               android:layout_alignParentRight="true"
+               android:rotation="90"
+               android:src="@drawable/account_input_corner" />
+    <ImageView android:id="@+id/bottom_right_corner"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:layout_alignParentBottom="true"
+               android:layout_alignParentRight="true"
+               android:rotation="180"
+               android:src="@drawable/account_input_corner" />
+    <ImageView android:id="@+id/bottom_left_corner"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:layout_alignParentBottom="true"
+               android:layout_alignParentLeft="true"
+               android:rotation="270"
+               android:src="@drawable/account_input_corner" />
+</merge>
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
index 5a25eca5c5..87e240928c 100644
--- a/android/src/main/res/layout/login.xml
+++ b/android/src/main/res/layout/login.xml
@@ -66,9 +66,10 @@
                       android:text="@string/login_description" />
             <net.mullvad.mullvadvpn.ui.AccountInputContainer android:id="@+id/account_input_container"
                                                              android:layout_width="match_parent"
-                                                             android:layout_height="wrap_content">
+                                                             android:layout_height="48dp">
                 <LinearLayout android:layout_width="match_parent"
                               android:layout_height="48dp"
+                              android:layout_alignParentTop="true"
                               android:orientation="horizontal">
                     <EditText android:id="@+id/account_input"
                               android:digits="0123456789"