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>
This commit is contained in:
Hanna Truong 2024-10-22 23:27:40 +11:00 committed by GitHub
parent 7b0b604834
commit ba7348f83f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 119 additions and 0 deletions

View file

@ -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

View file

@ -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>