Fixes issue #5841: Nearby pins: Make it easier to understand what the colors mean (#5881)

* UI design for legend to explain the colors of the nearby pins

* Add listener for the button to toggle the visibility of the legend (make it hideable)

* Change wording for legend and make text localizable

* Fixed typo

* Fixed typo

---------

Co-authored-by: Nicolas Raoul <nicolas.raoul@gmail.com>

app/src/main/java/fr/free/nrw/commons/nearby/fragments/NearbyParentFragment.java

@@ -43,6 +43,7 @@ import android.view.ViewGroup;
 import android.view.ViewGroup.LayoutParams;
 import android.view.animation.Animation;
 import android.view.animation.AnimationUtils;
+import android.widget.Button;
 import android.widget.Toast;
 import androidx.activity.result.ActivityResultCallback;
 import androidx.activity.result.ActivityResultLauncher;
@@ -52,6 +53,7 @@ import androidx.annotation.DrawableRes;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.AlertDialog.Builder;
+import androidx.constraintlayout.widget.ConstraintLayout;
 import androidx.core.content.ContextCompat;
 import androidx.core.content.FileProvider;
 import androidx.recyclerview.widget.DividerItemDecoration;
@@ -218,6 +220,8 @@ public class NearbyParentFragment extends CommonsDaggerSupportFragment
     private LatLng updatedLatLng;
     private boolean searchable;
 
+    private ConstraintLayout nearbyLegend;
+
     private GridLayoutManager gridLayoutManager;
     private List<BottomSheetItem> dataList;
     private BottomSheetAdapter bottomSheetAdapter;
@@ -302,6 +306,7 @@ public class NearbyParentFragment extends CommonsDaggerSupportFragment
         progressDialog.setCancelable(false);
         progressDialog.setMessage("Saving in progress...");
         setHasOptionsMenu(true);
+
         // Inflate the layout for this fragment
         return view;
 
@@ -362,6 +367,16 @@ public class NearbyParentFragment extends CommonsDaggerSupportFragment
         }
         locationPermissionsHelper = new LocationPermissionsHelper(getActivity(), locationManager,
             this);
+
+        // Set up the floating activity button to toggle the visibility of the legend
+        binding.fabLegend.setOnClickListener(v -> {
+            if (binding.nearbyLegendLayout.getRoot().getVisibility() == View.VISIBLE) {
+                binding.nearbyLegendLayout.getRoot().setVisibility(View.GONE);
+            } else {
+                binding.nearbyLegendLayout.getRoot().setVisibility(View.VISIBLE);
+            }
+        });
+
         presenter.attachView(this);
         isPermissionDenied = false;
         recenterToUserLocation = false;

app/src/main/res/layout/fragment_nearby_parent.xml

@@ -124,6 +124,33 @@
           app:srcCompat="@drawable/ic_my_location_black_24dp"
           app:useCompatPadding="true" />
 
+        <com.google.android.material.floatingactionbutton.FloatingActionButton
+          android:id="@+id/fab_legend"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_below="@id/fab_recenter"
+          android:layout_alignParentEnd="true"
+          android:layout_alignParentRight="true"
+          android:clickable="true"
+          android:visibility="visible"
+          app:backgroundTint="@color/main_background_light"
+          app:elevation="@dimen/dimen_6"
+          app:fabSize="normal"
+          app:layout_anchorGravity="top|right|end"
+          app:srcCompat="@drawable/ic_info_outline_24dp"
+          app:useCompatPadding="true" />
+
+        <include
+          android:id="@+id/nearby_legend_layout"
+          layout="@layout/nearby_legend"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_below="@id/rl_container_wlm_month_message"
+          android:visibility="gone"
+          android:layout_marginTop="30dp"
+          android:layout_marginStart="5dp"
+          />
+
       </RelativeLayout>
 
       <FrameLayout

app/src/main/res/layout/nearby_legend.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
+  android:layout_width="wrap_content"
+  android:layout_height="wrap_content"
+  android:background="#BFFFFFFF"
+  android:orientation="vertical">
+
+  <ImageView
+    android:id="@+id/imageRed"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginBottom="0dp"
+    app:layout_constraintBottom_toTopOf="@+id/imageGreen"
+    app:layout_constraintEnd_toEndOf="@+id/imageGreen"
+    app:layout_constraintStart_toStartOf="@+id/imageGreen"
+    app:srcCompat="@drawable/ic_custom_map_marker_red" />
+
+  <TextView
+    android:id="@+id/textRed"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="0dp"
+    android:text="@string/red_pin"
+    android:textColor="#F74D4D"
+    android:textSize="12sp"
+    app:layout_constraintBottom_toBottomOf="@+id/imageRed"
+    app:layout_constraintStart_toEndOf="@+id/imageRed"
+    app:layout_constraintTop_toTopOf="@+id/imageRed" />
+
+  <ImageView
+    android:id="@+id/imageGreen"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginBottom="0dp"
+    app:layout_constraintBottom_toTopOf="@+id/imageGrey"
+    app:layout_constraintEnd_toEndOf="@+id/imageGrey"
+    app:layout_constraintStart_toStartOf="@+id/imageGrey"
+    app:srcCompat="@drawable/ic_custom_map_marker_green" />
+
+  <TextView
+    android:id="@+id/textGreen"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="0dp"
+    android:text="@string/green_pin"
+    android:textColor="#1F7123"
+    android:textSize="12sp"
+    app:layout_constraintBottom_toBottomOf="@+id/imageGreen"
+    app:layout_constraintStart_toEndOf="@+id/imageGreen"
+    app:layout_constraintTop_toTopOf="@+id/imageGreen" />
+
+  <ImageView
+    android:id="@+id/imageGrey"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="0dp"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:srcCompat="@drawable/ic_custom_map_marker_grey" />
+
+  <TextView
+    android:id="@+id/textGrey"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/grey_pin"
+    android:textColor="#454547"
+    android:textSize="12sp"
+    app:layout_constraintBottom_toBottomOf="@+id/imageGrey"
+    app:layout_constraintStart_toEndOf="@+id/imageGrey"
+    app:layout_constraintTop_toTopOf="@+id/imageGrey" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/strings.xml

@@ -832,4 +832,7 @@ Upload your first media by tapping on the add button.</string>
   <string name="pending">Pending</string>
   <string name="failed">Failed</string>
   <string name="could_not_load_place_data">Could not load place data</string>
+  <string name="red_pin">This place has no picture yet, go take one!</string>
+  <string name="green_pin">This place has a picture already.</string>
+  <string name="grey_pin">Now checking whether this place has a picture.</string>
 </resources>