From b1a3d25609fd455ec1bf4f6c9468849a08ab2ac4 Mon Sep 17 00:00:00 2001
From: Gino Miceli <gmiceli@google.com>
Date: Fri, 8 Sep 2023 15:07:18 -0400
Subject: [PATCH] Offline area map selector mask and outline

---
 .../offline_area_viewport_outline.xml         | 22 +++++++++
 .../layout/offline_base_map_selector_frag.xml | 47 +++++++++++++++++++
 ground/src/main/res/values/colors.xml         |  1 +
 3 files changed, 70 insertions(+)
 create mode 100644 ground/src/main/res/drawable/offline_area_viewport_outline.xml

diff --git a/ground/src/main/res/drawable/offline_area_viewport_outline.xml b/ground/src/main/res/drawable/offline_area_viewport_outline.xml
new file mode 100644
index 0000000000..b523238e64
--- /dev/null
+++ b/ground/src/main/res/drawable/offline_area_viewport_outline.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright 2023 Google LLC
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
+    <solid android:color="@android:color/transparent" />
+    <stroke android:width="3dp" android:color="@color/md_theme_inversePrimary"/>
+  </shape>
diff --git a/ground/src/main/res/layout/offline_base_map_selector_frag.xml b/ground/src/main/res/layout/offline_base_map_selector_frag.xml
index ea6f2f61eb..80a100129a 100644
--- a/ground/src/main/res/layout/offline_base_map_selector_frag.xml
+++ b/ground/src/main/res/layout/offline_base_map_selector_frag.xml
@@ -74,6 +74,53 @@
           app:layout_constraintEnd_toEndOf="parent"
           app:useCompatPadding="true" />
       </com.google.android.ground.ui.common.TwoLineToolbar>
+
+      <View
+        android:id="@+id/top_mask"
+        android:layout_width="match_parent"
+        android:layout_height="24dp"
+        android:background="@color/blackMapOverlay"
+        android:alpha="0.4"
+        app:layout_constraintTop_toBottomOf="@+id/offline_area_selector_toolbar" />
+
+      <View
+        android:id="@+id/bottom_mask"
+        android:layout_width="match_parent"
+        android:layout_height="80dp"
+        android:background="@color/blackMapOverlay"
+        android:alpha="0.4"
+        app:layout_constraintBottom_toBottomOf="parent" />
+
+      <View
+        android:id="@+id/right_mask"
+        android:layout_width="24dp"
+        android:layout_height="0dp"
+        android:alpha="0.4"
+        android:background="@color/blackMapOverlay"
+        app:layout_constraintTop_toBottomOf="@id/top_mask"
+        app:layout_constraintBottom_toTopOf="@id/bottom_mask"
+        app:layout_constraintRight_toRightOf="parent" />
+
+      <View
+        android:id="@+id/left_mask"
+        android:layout_width="24dp"
+        android:layout_height="0dp"
+        android:background="@color/blackMapOverlay"
+        android:alpha="0.4"
+        app:layout_constraintTop_toBottomOf="@id/top_mask"
+        app:layout_constraintBottom_toTopOf="@id/bottom_mask"
+        app:layout_constraintLeft_toLeftOf="parent" />
+
+      <View
+        android:id="@+id/viewport_outline"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:background="@drawable/offline_area_viewport_outline"
+        app:layout_constraintTop_toBottomOf="@id/top_mask"
+        app:layout_constraintBottom_toTopOf="@id/bottom_mask"
+        app:layout_constraintLeft_toRightOf="@id/left_mask"
+        app:layout_constraintRight_toLeftOf="@id/right_mask"/>
+
     </androidx.constraintlayout.widget.ConstraintLayout>
   </FrameLayout>
 </layout>
diff --git a/ground/src/main/res/values/colors.xml b/ground/src/main/res/values/colors.xml
index 43db6c4cec..a00e4036ee 100644
--- a/ground/src/main/res/values/colors.xml
+++ b/ground/src/main/res/values/colors.xml
@@ -20,6 +20,7 @@
   <color name="colorMapAccent">#ff9131</color>
   <color name="clusterColor">#6DDD81</color>
   <color name="polyLineColor">#55ffffff</color>
+  <color name="blackMapOverlay">#000000</color>
 
   <!-- Updated Color palette -->
   <color name="md_theme_primary">#006E2C</color>