Implement Connecting screen

6 files changed, 103 insertions, 6 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ConnectFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ConnectFragment.kt
index ab3890a185..eaf086d604 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ConnectFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ConnectFragment.kt
@@ -5,9 +5,16 @@ import android.support.v4.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.Button
 import android.widget.TextView
 
 class ConnectFragment : Fragment() {
+    private lateinit var actionButton: Button
+    private lateinit var connectingSpinner: View
+    private lateinit var headerBar: View
+    private lateinit var notificationBanner: View
+    private lateinit var status: TextView
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -15,6 +22,27 @@ class ConnectFragment : Fragment() {
     ): View {
         val view = inflater.inflate(R.layout.connect, container, false)
 
+        actionButton = view.findViewById(R.id.action_button)
+        connectingSpinner = view.findViewById(R.id.connecting_spinner)
+        headerBar = view.findViewById(R.id.header_bar)
+        notificationBanner = view.findViewById(R.id.notification_banner)
+        status = view.findViewById(R.id.connection_status)
+
+        actionButton.setOnClickListener { connect() }
+
         return view
     }
+
+    private fun connect() {
+        actionButton.setBackgroundResource(R.drawable.transparent_red_button_background)
+        actionButton.setText(R.string.cancel)
+
+        connectingSpinner.visibility = View.VISIBLE
+        notificationBanner.visibility = View.VISIBLE
+
+        headerBar.setBackgroundColor(context!!.getColor(R.color.green))
+
+        status.setTextColor(context!!.getColor(R.color.white))
+        status.setText(R.string.creating_secure_connection)
+    }
 }
diff --git a/android/src/main/res/drawable/icon_notification_error.xml b/android/src/main/res/drawable/icon_notification_error.xml
new file mode 100644
index 0000000000..d285967fe6
--- /dev/null
+++ b/android/src/main/res/drawable/icon_notification_error.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="oval"
+        >
+    <solid android:color="@color/red"/>
+    <size android:width="10dp" android:height="10dp"/>
+</shape>
diff --git a/android/src/main/res/drawable/transparent_red_button_background.xml b/android/src/main/res/drawable/transparent_red_button_background.xml
new file mode 100644
index 0000000000..6f5a86b205
--- /dev/null
+++ b/android/src/main/res/drawable/transparent_red_button_background.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="false">
+        <shape android:shape="rectangle">
+            <corners android:radius="4dp"/>
+            <solid android:color="@color/red40"/>
+        </shape>
+    </item>
+
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <corners android:radius="4dp"/>
+            <solid android:color="@color/red45"/>
+        </shape>
+    </item>
+</selector>
diff --git a/android/src/main/res/layout/connect.xml b/android/src/main/res/layout/connect.xml
index 882b9f5c7e..8163a9a297 100644
--- a/android/src/main/res/layout/connect.xml
+++ b/android/src/main/res/layout/connect.xml
@@ -5,7 +5,7 @@
         android:layout_height="match_parent"
         android:orientation="vertical"
         >
-    <LinearLayout
+    <LinearLayout android:id="@+id/header_bar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_weight="0"
@@ -31,10 +31,50 @@
                 />
     </LinearLayout>
 
+    <LinearLayout android:id="@+id/notification_banner"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:paddingVertical="8dp"
+            android:background="@color/darkBlue"
+            android:orientation="horizontal"
+            android:gravity="center"
+            android:visibility="gone"
+            >
+        <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_weight="0"
+                android:layout_marginLeft="19dp"
+                android:src="@drawable/icon_notification_error"
+                />
+        <TextView
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:layout_marginLeft="7dp"
+                android:textSize="13sp"
+                android:textStyle="bold"
+                android:text="@string/blocking_internet"
+                android:textAllCaps="true"
+                />
+    </LinearLayout>
+
     <Space
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:layout_weight="4"
+            android:layout_weight="1"
+            />
+
+    <ProgressBar android:id="@+id/connecting_spinner"
+            android:layout_width="60dp"
+            android:layout_height="60dp"
+            android:layout_gravity="center"
+            android:layout_marginBottom="14dp"
+            android:indeterminate="true"
+            android:indeterminateOnly="true"
+            android:indeterminateDuration="600"
+            android:indeterminateDrawable="@drawable/icon_spinner"
+            android:visibility="invisible"
             />
 
     <LinearLayout
@@ -45,7 +85,7 @@
             android:padding="24dp"
             android:gravity="start"
             >
-        <TextView
+        <TextView android:id="@+id/connection_status"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="4dp"
@@ -85,8 +125,8 @@
 
     <Space
             android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:layout_weight="1"
+            android:layout_height="32dp"
+            android:layout_weight="0"
             />
 
     <LinearLayout
@@ -103,7 +143,7 @@
                 android:paddingRight="8dp"
                 style="@style/White20Button"
                 />
-        <Button
+        <Button android:id="@+id/action_button"
                 android:text="@string/connect"
                 style="@style/GreenButton"
                 />
diff --git a/android/src/main/res/values/colors.xml b/android/src/main/res/values/colors.xml
index 430756720a..905f1e497c 100644
--- a/android/src/main/res/values/colors.xml
+++ b/android/src/main/res/values/colors.xml
@@ -11,6 +11,8 @@
     <color name="green">#44AD4D</color>
     <color name="green90">#E644AD4D</color>
     <color name="red">#D0021B</color>
+    <color name="red45">#73021B</color>
+    <color name="red40">#66021B</color>
 
     <color name="textInputBorder">#234161</color>
 </resources>
diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml
index a643ef2150..18da2803c8 100644
--- a/android/src/main/res/values/strings.xml
+++ b/android/src/main/res/values/strings.xml
@@ -11,7 +11,10 @@
     <string name="login_fail_description">Invalid account number, try again</string>
 
     <string name="unsecured_connection">Unsecured connection</string>
+    <string name="creating_secure_connection">Creating secure connection</string>
+    <string name="blocking_internet">Blocking internet</string>
     <string name="country">Country</string>
     <string name="connect">Secure my connection</string>
+    <string name="cancel">Cancel</string>
     <string name="switch_location">Switch location</string>
 </resources>