implement new gateway selection UI, using same UX principles as for desktop

7 files changed, 166 insertions, 86 deletions

diff --git a/app/src/main/res/drawable/check_bold.xml b/app/src/main/res/drawable/check_bold.xml
new file mode 100644
index 00000000..836bd3bf
--- /dev/null
+++ b/app/src/main/res/drawable/check_bold.xml
@@ -0,0 +1,8 @@
+<!-- drawable/check_bold.xml -->

+<vector xmlns:android="http://schemas.android.com/apk/res/android"

+    android:height="24dp"

+    android:width="24dp"

+    android:viewportWidth="24"

+    android:viewportHeight="24">

+    <path android:fillColor="#000" android:pathData="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />

+</vector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/cust_checkbox.xml b/app/src/main/res/drawable/cust_checkbox.xml
new file mode 100644
index 00000000..1fa45d09
--- /dev/null
+++ b/app/src/main/res/drawable/cust_checkbox.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item android:state_pressed="true" >
+        <shape android:shape="rectangle"  >
+            <corners android:radius="4dp" />
+            <padding android:left="8dp" android:right="8dp"/>
+            <solid android:color="@color/black800_high_transparent"/>
+            <stroke android:width="1dp" android:color="@color/colorPrimaryDark"/>
+        </shape>
+    </item>
+    <item android:state_focused="true">
+        <shape android:shape="rectangle"  >
+            <corners android:radius="4dp" />
+            <padding android:left="8dp" android:right="8dp"/>
+            <solid android:color="@color/black_transparent"/>
+            <stroke android:width="1dp" android:color="@color/black800_transparent"/>
+        </shape>
+    </item>
+    <item >
+        <shape android:shape="rectangle"  >
+            <corners android:radius="4dp" />
+            <padding android:left="8dp" android:right="8dp"/>
+            <solid android:color="@android:color/transparent"/>
+            <stroke android:width="1dp" android:color="@color/black800_transparent"/>
+        </shape>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/layout/f_gateway_selection.xml b/app/src/main/res/layout/f_gateway_selection.xml
index a5034182..643ae988 100644
--- a/app/src/main/res/layout/f_gateway_selection.xml
+++ b/app/src/main/res/layout/f_gateway_selection.xml
@@ -3,7 +3,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:padding="@dimen/stdpadding"
     tools:context=".base.fragments.GatewaySelectionFragment">
 
     <LinearLayout
@@ -15,39 +15,53 @@
         tools:visibility="visible"
         android:layout_alignParentTop="true"
         >
-        <androidx.appcompat.widget.AppCompatTextView
-            android:id="@+id/current_location_description"
+        <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:textAppearance="?android:attr/textAppearanceMedium"
-            android:paddingTop="@dimen/activity_vertical_margin"
-            android:paddingStart="@dimen/activity_horizontal_margin"
-            android:paddingLeft="@dimen/activity_horizontal_margin"
-            android:paddingEnd="@dimen/activity_horizontal_margin"
-            android:paddingRight="@dimen/activity_horizontal_margin"
-            android:paddingBottom="@dimen/activity_vertical_margin"
+            android:orientation="horizontal">
+            <androidx.appcompat.widget.AppCompatTextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:id="@+id/recommended_title"
+                android:textAppearance="?android:attr/textAppearanceLarge"
+                android:textStyle="bold"
+                android:text="@string/gateway_selection_recommended"
+                android:layout_gravity="bottom"
+                />
+            <androidx.appcompat.widget.AppCompatImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/ic_lightning_bolt"
+                />
 
-            android:text="@string/gateway_selection_automatic_location" />
+        </LinearLayout>
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:id="@+id/current_location"
+        <se.leap.bitmaskclient.base.views.SelectLocationEntry
+            android:id="@+id/recommended_location"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:gravity="center"
-            android:textAppearance="?android:attr/textAppearanceLarge"
-            android:paddingStart="@dimen/activity_horizontal_margin"
-            android:paddingLeft="@dimen/activity_horizontal_margin"
-            android:paddingEnd="@dimen/activity_horizontal_margin"
-            android:paddingRight="@dimen/activity_horizontal_margin"
-            android:paddingBottom="@dimen/activity_vertical_margin"
-            tools:text="Paris" />
+            android:layout_marginStart="4dp"
+            android:layout_marginLeft="4dp"
+            android:clickable="true"
+            android:focusable="true"
+            />
 
+        <androidx.appcompat.widget.AppCompatTextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:id="@+id/manual_title"
+            android:textAppearance="?android:attr/textAppearanceLarge"
+            android:textStyle="normal"
+            android:paddingTop="15dp"
+            android:text="@string/gateway_selection_manually"
+            android:layout_gravity="bottom"
+            />
     </LinearLayout>
 
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/gatewaySelection_list"
         android:layout_below="@id/current_location_container"
-        android:layout_above="@+id/vpn_button_container"
+        android:layout_alignParentBottom="true"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:paddingStart="@dimen/stdpadding"
@@ -58,28 +72,8 @@
         android:visibility="gone"
         tools:visibility="visible"
         android:scrollbars="vertical"
+        tools:listitem="@layout/v_select_text_list_item"
         >
-
     </androidx.recyclerview.widget.RecyclerView>
 
-    <LinearLayout
-        android:id="@+id/vpn_button_container"
-        android:orientation="horizontal"
-        android:gravity="end"
-        android:layout_alignParentBottom="true"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:padding="@dimen/activity_margin"
-        >
-
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/automatic_gateway_selection_btn"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="@string/gateway_selection_recommended_location"
-            android:textColor="@color/button_state_font_color"
-            />
-    </LinearLayout>
-
-
 </RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/s_layout.xml b/app/src/main/res/layout/s_layout.xml
deleted file mode 100644
index d5717a5b..00000000
--- a/app/src/main/res/layout/s_layout.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <Button
-        android:id="@+id/buttontest"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:text="A"/>
-
-</ScrollView>
diff --git a/app/src/main/res/layout/v_select_text_list_item.xml b/app/src/main/res/layout/v_select_text_list_item.xml
index b0cfac34..a6f78b3f 100644
--- a/app/src/main/res/layout/v_select_text_list_item.xml
+++ b/app/src/main/res/layout/v_select_text_list_item.xml
@@ -1,75 +1,107 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/item_container"
-    android:layout_height="?android:attr/listPreferredItemHeightSmall"
+    android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:orientation="horizontal"
-    android:clickable="true"
-    android:focusable="true"
     android:background="?attr/selectableItemBackground">
 
     <!-- views are composed right to left -->
 
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/selected"
-        android:layout_width="40dp"
-        android:layout_height="match_parent"
-        android:layout_alignParentRight="true"
-        android:layout_alignParentEnd="true"
-        android:src="@drawable/ic_check_bold"
-        android:tint="@color/green200"
-        android:visibility="invisible"
-        android:paddingTop="10dp"
-        android:paddingBottom="10dp"
-        android:paddingRight="10dp"
-        android:paddingEnd="10dp"
-        tools:visibility="visible"
-        />
     <se.leap.bitmaskclient.base.views.LocationIndicator
         android:id="@+id/quality"
         android:layout_width="30dp"
-        android:layout_height="match_parent"
-        android:layout_toLeftOf="@id/selected"
-        android:layout_toStartOf="@id/selected"
-        android:layout_margin="10dp"
+        android:layout_height="25dp"
+        android:layout_alignParentEnd="true"
+        android:layout_alignParentRight="true"
+        android:layout_marginBottom="12dp"
+        android:layout_marginLeft="@dimen/standard_margin"
+        android:layout_marginRight="@dimen/standard_margin"
         tools:visibility="visible"
+        android:visibility="visible"
+        android:layout_alignBottom="@+id/location"
         />
 
     <androidx.appcompat.widget.AppCompatImageView
         android:id="@+id/bridge_image"
         android:layout_width="wrap_content"
-        android:layout_height="match_parent"
+        android:layout_height="40dp"
+        android:paddingBottom="5dp"
         android:scaleType="fitXY"
         android:layout_toStartOf="@id/quality"
         android:layout_toLeftOf="@id/quality"
         android:src="@drawable/ic_bridge_36"
         tools:visibility="visible"
         android:visibility="gone"
+        android:layout_alignBottom="@+id/location"
+        />
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_toEndOf="@+id/selected"
+        android:layout_toRightOf="@+id/selected"
+        android:layout_toStartOf="@id/bridge_image"
+        android:layout_toLeftOf="@id/bridge_image"
+        android:layout_alignParentTop="true"
+        android:ellipsize="end"
+        android:gravity="center_vertical"
+        android:paddingStart="@dimen/standard_margin"
+        android:paddingLeft="@dimen/standard_margin"
+        android:paddingEnd="@dimen/standard_margin"
+        android:paddingRight="@dimen/standard_margin"
+        android:paddingTop="10dp"
+        android:textAppearance="?android:attr/textAppearanceListItemSmall"
+        tools:text="this is an interesting text"
+        android:visibility="gone"
+        tools:visibility="gone"
         />
 
     <androidx.appcompat.widget.AppCompatTextView
         android:id="@+id/location"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignParentStart="true"
-        android:layout_alignParentLeft="true"
+        android:layout_toEndOf="@+id/selected"
+        android:layout_toRightOf="@+id/selected"
         android:layout_toStartOf="@id/bridge_image"
         android:layout_toLeftOf="@id/bridge_image"
+        android:layout_below="@id/title"
         android:ellipsize="end"
         android:gravity="center_vertical"
-        android:minHeight="?android:attr/listPreferredItemHeightLarge"
+        android:minHeight="?android:attr/listPreferredItemHeightSmall"
         android:paddingStart="@dimen/standard_margin"
         android:paddingLeft="@dimen/standard_margin"
         android:paddingEnd="@dimen/standard_margin"
         android:paddingRight="@dimen/standard_margin"
+        android:paddingTop="8dp"
         android:textAppearance="?android:attr/textAppearanceListItem"
         android:textStyle="bold"
+        tools:visibility="visible"
+        android:visibility="visible"
         tools:text="Paris" />
 
+
+      <se.leap.bitmaskclient.base.views.SimpleCheckBox
+          android:id="@+id/selected"
+          android:layout_width="32dp"
+          android:layout_height="32dp"
+          android:layout_marginStart="4dp"
+          android:layout_marginLeft="4dp"
+          android:layout_marginBottom="@dimen/stdpadding"
+          android:layout_centerVertical="true"
+          android:src="@drawable/ic_check_bold"
+          android:tint="@color/green200"
+          android:visibility="visible"
+          tools:visibility="visible" />
+
+
     <View
+        android:id="@+id/divider"
         android:layout_width="match_parent"
         android:layout_height="1px"
         android:background="@android:color/darker_gray"
-        android:layout_alignParentBottom="true"
+        android:layout_below="@id/location"
+        android:visibility="visible"
         />
 </RelativeLayout>
diff --git a/app/src/main/res/layout/v_simple_checkbox.xml b/app/src/main/res/layout/v_simple_checkbox.xml
new file mode 100644
index 00000000..57f6f816
--- /dev/null
+++ b/app/src/main/res/layout/v_simple_checkbox.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout 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"
+    >
+
+    <View
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignTop="@+id/check_view"
+        android:layout_alignBottom="@+id/check_view"
+        android:layout_alignLeft="@+id/check_view"
+        android:layout_alignRight="@+id/check_view"
+        android:layout_alignStart="@+id/check_view"
+        android:layout_alignEnd="@+id/check_view"
+        android:layout_marginTop="8dp"
+        android:layout_marginLeft="2dp"
+        android:layout_marginRight="8dp"
+        android:layout_marginBottom="2dp"
+        android:background="@drawable/cust_checkbox"
+        />
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/check_view"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:srcCompat="@drawable/check_bold"
+        android:tint="@color/colorSuccess"
+        android:layout_centerInParent="true"
+        />
+
+
+</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 7c0c46f0..9d62cc3b 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -153,11 +153,10 @@
   <string name="gateway_selection_title">Select location</string>
   <string name="gateway_selection_warning">%s will find the best connection for you.</string>
   <string name="gateway_selection_recommended_location">Use recommended location</string>
+  <string name="gateway_selection_recommended">Recommended</string>
+  <string name="gateway_selection_manually">Manually select</string>
+  <string name="gateway_selection_automatic_location">Automatically use best connection.</string>
   <string name="gateway_selection_automatic">Automatic</string>
-  <string name="gateway_selection_manual_location">Your traffic is currently routed through: </string>
-  <string name="gateway_selection_manual_not_connected">Your traffic will be routed through: </string>
-  <string name="gateway_selection_automatic_location">Your traffic is automatically routed through the best location:</string>
-  <string name="gateway_selection_automatic_not_connected">Your traffic will be automatically routed through the best location.</string>
   <string name="finding_best_connection">Finding best connection…</string>
   <string name="reconnecting">Reconnecting…</string>
   <string name="tor_starting">Starting bridges for censorship circumvention…</string>