From f8f1c7f0d4c61d4347201b0b632c69a75cbbf10f Mon Sep 17 00:00:00 2001
From: Torsten Grote <t@grobox.de>
Date: Thu, 4 Aug 2016 18:22:48 -0300
Subject: [PATCH] Show Explanatory Graphic Before Scanning QR Codes

Closes #429
---
 .../res/drawable/border_explanation.xml       | 13 +++++
 ...{spinner_border.xml => border_spinner.xml} |  0
 .../res/drawable/qr_code_explanation.xml      | 28 ++++++++++
 .../layout-land/fragment_keyagreement_id.xml  | 53 +++++++++++++------
 .../invitation_bluetooth_start.xml            |  2 +-
 .../res/layout/fragment_keyagreement_id.xml   | 30 +++++++++--
 .../res/layout/invitation_bluetooth_start.xml |  2 +-
 7 files changed, 105 insertions(+), 23 deletions(-)
 create mode 100644 briar-android/res/drawable/border_explanation.xml
 rename briar-android/res/drawable/{spinner_border.xml => border_spinner.xml} (100%)
 create mode 100644 briar-android/res/drawable/qr_code_explanation.xml

diff --git a/briar-android/res/drawable/border_explanation.xml b/briar-android/res/drawable/border_explanation.xml
new file mode 100644
index 000000000..b2e380fbc
--- /dev/null
+++ b/briar-android/res/drawable/border_explanation.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+
+	<solid
+		android:color="@android:color/transparent"/>
+
+	<stroke
+		android:width="2dp"
+		android:color="@color/briar_text_primary"/>
+
+</shape>
\ No newline at end of file
diff --git a/briar-android/res/drawable/spinner_border.xml b/briar-android/res/drawable/border_spinner.xml
similarity index 100%
rename from briar-android/res/drawable/spinner_border.xml
rename to briar-android/res/drawable/border_spinner.xml
diff --git a/briar-android/res/drawable/qr_code_explanation.xml b/briar-android/res/drawable/qr_code_explanation.xml
new file mode 100644
index 000000000..157025c22
--- /dev/null
+++ b/briar-android/res/drawable/qr_code_explanation.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="400dp"
+        android:height="100dp"
+        android:viewportHeight="49.5"
+        android:viewportWidth="194.8">
+	<path
+		android:fillColor="#000000"
+		android:pathData="M30.1 16.5l-9 0 0 -5c0 -2.4 -2 -4.4 -4.4 -4.4L4.4 7.1C2 7.1 0 9.1 0 11.5l0 24.2c0 2.4 2 4.4 4.4 4.4l9 0 0 5c0 2.4 2 4.4 4.4 4.4l12.2 0c2.4 0 4.4 -2 4.4 -4.4l0 -24.2c0.1 -2.4 -1.9 -4.4 -4.3 -4.4zm-27.4 16.1l0 -20.9 15.8 0 0 20.9 -15.8 0zm10.7 4.6l-5.8 0 0 -1.5 5.8 0 0 1.5zm13.5 9.4l-5.8 0 0 -1.5 5.8 0 0 1.5zm5 -4.6l-15.8 0 0 -1.9 0.5 0c2.4 0 4.4 -2 4.4 -4.4l0 -14.6 10.8 0 0 20.9z"/>
+	<path
+		android:fillColor="#000000"
+		android:pathData="M101.2 16.5l-8.3 0 0 -4.4c0 -1.4 -1.2 -2.6 -2.6 -2.6l-3.9 0 -2.1 -2.5 -6.9 0 -2.2 2.5 -3.8 0c-1.4 0 -2.6 1.2 -2.6 2.6l0 13.3c0 1.4 1.2 2.6 2.6 2.6l13.1 0 0 17.2c0 2.4 2 4.4 4.4 4.4l12.2 0c2.4 0 4.4 -2 4.4 -4.4l0 -24.3c0.2 -2.4 -1.8 -4.4 -4.3 -4.4zm-26.4 2.4c0 -3.3 2.7 -6 6 -6 3.3 0 6 2.7 6 6 0 3.3 -2.7 6 -6 6 -3.3 0 -6 -2.7 -6 -6zm23.2 27.7l-5.8 0 0 -1.5 5.8 0 0 1.5zm5 -4.6l-15.8 0 0 -14.1 3.1 0c1.4 0 2.6 -1.2 2.6 -2.6l0 -4.2 10.1 0 0 20.9z"/>
+	<path
+		android:fillColor="#000000"
+		android:pathData="M84.600003 18.9a3.8 3.8 0 0 1 -3.8 3.8 3.8 3.8 0 0 1 -3.8 -3.8 3.8 3.8 0 0 1 3.8 -3.8 3.8 3.8 0 0 1 3.8 3.8z"/>
+	<path
+		android:fillColor="#000000"
+		android:pathData="M175.3 16.5l-9.8 0 0 -5.7c0 -1.4 -1.2 -2.6 -2.6 -2.6l-19.3 0c-1.4 0 -2.6 1.2 -2.6 2.6l0 14.4c0 1.4 1.2 2.6 2.6 2.6l15.1 0 0 17.3c0 2.4 2 4.4 4.4 4.4l12.2 0c2.4 0 4.4 -2 4.4 -4.4l0 -24.2c0.1 -2.4 -1.9 -4.4 -4.4 -4.4zm-12.4 -5.9l-9.6 6 -9.6 -6 19.2 0zm-19.4 14.8l0 -12.3 9.8 6.1 9.8 -6.1 0 12.3 -19.6 0zm28.6 21.2l-5.8 0 0 -1.5 5.8 0 0 1.5zm5 -4.6l-15.8 0 0 -14.2 1.6 0c1.4 0 2.6 -1.2 2.6 -2.6l0 -4.1 11.6 0 0 20.9z"/>
+	<path
+		android:fillColor="#ff0000"
+		android:pathData="M101.4 17.8l2 2 7.4 -7.3 7.3 7.3 2.1 -2 -7.4 -7.4 7.4 -7.3 -2.1 -2.1 -7.3 7.4 -7.4 -7.4 -2 2.1 7.3 7.3z"/>
+	<path
+		android:fillColor="#ff0000"
+		android:pathData="M176 17.8l2.1 2 7.3 -7.3 7.4 7.3 2 -2 -7.3 -7.4 7.3 -7.3 -2 -2.1 -7.4 7.4 -7.3 -7.4 -2.1 2.1 7.3 7.3z"/>
+	<path
+		android:fillColor="#08b124"
+		android:pathData="M35.8 18.8l0 0L52.5 2.1 50.5 0 35.6 14.8 28.5 7.7l-2.1 2.1 9.2 9.1z"/>
+</vector>
\ No newline at end of file
diff --git a/briar-android/res/layout-land/fragment_keyagreement_id.xml b/briar-android/res/layout-land/fragment_keyagreement_id.xml
index 01351cd1f..492c77892 100644
--- a/briar-android/res/layout-land/fragment_keyagreement_id.xml
+++ b/briar-android/res/layout-land/fragment_keyagreement_id.xml
@@ -3,23 +3,21 @@
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	android:layout_width="match_parent"
 	android:layout_height="match_parent"
-	android:orientation="horizontal"
-	android:paddingBottom="@dimen/margin_activity_vertical"
-	android:paddingEnd="@dimen/margin_activity_horizontal"
-	android:paddingLeft="@dimen/margin_activity_horizontal"
-	android:paddingRight="@dimen/margin_activity_horizontal"
-	android:paddingStart="@dimen/margin_activity_horizontal"
-	android:paddingTop="@dimen/margin_activity_vertical">
+	android:orientation="horizontal">
 
 	<ImageView
 		android:id="@+id/imageView"
 		android:layout_width="0dp"
 		android:layout_height="wrap_content"
 		android:layout_gravity="center_vertical"
-		android:layout_marginEnd="@dimen/margin_medium"
-		android:layout_marginRight="@dimen/margin_medium"
 		android:layout_weight="1"
 		android:adjustViewBounds="true"
+		android:paddingBottom="@dimen/margin_activity_vertical"
+		android:paddingEnd="@dimen/margin_activity_horizontal"
+		android:paddingLeft="@dimen/margin_activity_horizontal"
+		android:paddingRight="@dimen/margin_activity_horizontal"
+		android:paddingStart="@dimen/margin_activity_horizontal"
+		android:paddingTop="@dimen/margin_activity_vertical"
 		android:scaleType="fitCenter"
 		android:src="@drawable/qr_code_intro"/>
 
@@ -31,7 +29,13 @@
 		<LinearLayout
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
-			android:orientation="vertical">
+			android:orientation="vertical"
+			android:paddingBottom="@dimen/margin_activity_vertical"
+			android:paddingEnd="@dimen/margin_activity_horizontal"
+			android:paddingLeft="@dimen/margin_activity_horizontal"
+			android:paddingRight="@dimen/margin_activity_horizontal"
+			android:paddingStart="@dimen/margin_activity_horizontal"
+			android:paddingTop="@dimen/margin_activity_vertical">
 
 			<TextView
 				android:id="@+id/yourNicknameView"
@@ -46,17 +50,34 @@
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginTop="@dimen/margin_medium"
-				android:background="@drawable/spinner_border"
+				android:background="@drawable/border_spinner"
 				android:spinnerMode="dropdown"
 				android:visibility="gone"/>
 
-			<TextView
-				android:id="@+id/faceToFaceView"
-				style="@style/BriarTextBody"
+			<LinearLayout
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
-				android:layout_marginTop="@dimen/margin_medium"
-				android:text="@string/face_to_face"/>
+				android:background="@drawable/border_explanation"
+				android:orientation="vertical"
+				android:padding="@dimen/margin_large">
+
+				<ImageView
+					android:id="@+id/explanationView"
+					android:layout_width="match_parent"
+					android:layout_height="wrap_content"
+					android:adjustViewBounds="true"
+					android:padding="@dimen/margin_medium"
+					android:src="@drawable/qr_code_explanation"/>
+
+				<TextView
+					android:id="@+id/faceToFaceView"
+					style="@style/BriarTextBody"
+					android:layout_width="match_parent"
+					android:layout_height="wrap_content"
+					android:layout_marginTop="@dimen/margin_medium"
+					android:text="@string/face_to_face"/>
+
+			</LinearLayout>
 
 			<Button
 				android:id="@+id/continueButton"
diff --git a/briar-android/res/layout-land/invitation_bluetooth_start.xml b/briar-android/res/layout-land/invitation_bluetooth_start.xml
index 977e8dfda..84d0945e6 100644
--- a/briar-android/res/layout-land/invitation_bluetooth_start.xml
+++ b/briar-android/res/layout-land/invitation_bluetooth_start.xml
@@ -46,7 +46,7 @@
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginTop="@dimen/margin_medium"
-				android:background="@drawable/spinner_border"
+				android:background="@drawable/border_spinner"
 				android:spinnerMode="dropdown"
 				android:visibility="gone"/>
 
diff --git a/briar-android/res/layout/fragment_keyagreement_id.xml b/briar-android/res/layout/fragment_keyagreement_id.xml
index a1c0e2130..643109dd0 100644
--- a/briar-android/res/layout/fragment_keyagreement_id.xml
+++ b/briar-android/res/layout/fragment_keyagreement_id.xml
@@ -28,7 +28,7 @@
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
 			android:layout_marginTop="@dimen/margin_medium"
-			android:background="@drawable/spinner_border"
+			android:background="@drawable/border_spinner"
 			android:spinnerMode="dropdown"
 			android:visibility="gone"/>
 
@@ -41,13 +41,33 @@
 			android:scaleType="fitCenter"
 			android:src="@drawable/qr_code_intro"/>
 
-		<TextView
-			android:id="@+id/faceToFaceView"
-			style="@style/BriarTextBody"
+		<LinearLayout
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
+			android:layout_marginLeft="@dimen/margin_small"
+			android:layout_marginRight="@dimen/margin_small"
 			android:layout_marginTop="@dimen/margin_xlarge"
-			android:text="@string/face_to_face"/>
+			android:background="@drawable/border_explanation"
+			android:orientation="vertical"
+			android:padding="@dimen/margin_large">
+
+			<ImageView
+				android:id="@+id/explanationView"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:adjustViewBounds="true"
+				android:padding="@dimen/margin_medium"
+				android:src="@drawable/qr_code_explanation"/>
+
+			<TextView
+				android:id="@+id/faceToFaceView"
+				style="@style/BriarTextBody"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginTop="@dimen/margin_medium"
+				android:text="@string/face_to_face"/>
+
+		</LinearLayout>
 
 		<Button
 			android:id="@+id/continueButton"
diff --git a/briar-android/res/layout/invitation_bluetooth_start.xml b/briar-android/res/layout/invitation_bluetooth_start.xml
index ef517bf07..84490caa5 100644
--- a/briar-android/res/layout/invitation_bluetooth_start.xml
+++ b/briar-android/res/layout/invitation_bluetooth_start.xml
@@ -27,7 +27,7 @@
 			android:id="@+id/spinner"
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
-			android:background="@drawable/spinner_border"
+			android:background="@drawable/border_spinner"
 			android:layout_marginTop="@dimen/margin_medium"
 			android:spinnerMode="dropdown"
 			android:visibility="gone"/>