Update tooltip to behave better when content is at edge of screen.

app/src/main/java/org/thoughtcrime/securesms/components/TooltipPopup.java

@@ -18,10 +18,12 @@ import androidx.annotation.Px;
 import androidx.annotation.StringRes;
 import androidx.core.content.ContextCompat;
 
+import com.google.android.material.shape.MaterialShapeDrawable;
+import com.google.android.material.shape.ShapeAppearanceModel;
+
 import org.signal.core.util.DimensionUnit;
 import org.thoughtcrime.securesms.R;
 import org.thoughtcrime.securesms.mms.GlideApp;
-import org.thoughtcrime.securesms.util.ViewUtil;
 
 /**
  * Class for creating simple tooltips to show throughout the app. Utilizes a popup window so you
@@ -42,6 +44,8 @@ public class TooltipPopup extends PopupWindow {
   private final int position;
   private final int startMargin;
 
+  private final MaterialShapeDrawable shapeableBubbleBackground = new MaterialShapeDrawable();
+
   public static Builder forTarget(@NonNull View anchor) {
     return new Builder(anchor);
   }
@@ -85,9 +89,11 @@ public class TooltipPopup extends PopupWindow {
     if (backgroundTint == 0) {
       bubble.getBackground().setColorFilter(ContextCompat.getColor(anchor.getContext(), R.color.tooltip_default_color), PorterDuff.Mode.MULTIPLY);
       arrow.setColorFilter(ContextCompat.getColor(anchor.getContext(), R.color.tooltip_default_color), PorterDuff.Mode.SRC_IN);
+      shapeableBubbleBackground.setTint(ContextCompat.getColor(anchor.getContext(), R.color.tooltip_default_color));
     } else {
       bubble.getBackground().setColorFilter(backgroundTint, PorterDuff.Mode.MULTIPLY);
       arrow.setColorFilter(backgroundTint, PorterDuff.Mode.SRC_IN);
+      shapeableBubbleBackground.setTint(backgroundTint);
     }
 
     if (iconGlideModel != null) {
@@ -161,6 +167,26 @@ public class TooltipPopup extends PopupWindow {
         xoffset -= startMargin;
     }
 
+    View bubble = getContentView().findViewById(R.id.tooltip_bubble);
+    ShapeAppearanceModel.Builder  shapeAppearanceModel  = ShapeAppearanceModel.builder()
+                                                                              .setAllCornerSizes(DimensionUnit.DP.toPixels(18));
+
+    // If the arrow is within the last 20dp of the right hand side, use RIGHT and set corner to 9dp
+    onLayout(() -> {
+      if (arrow.getX() > getContentView().getWidth() / 2f) {
+        arrow.setImageResource(R.drawable.ic_tooltip_arrow_up_right);
+      }
+
+      float arrowEnd = arrow.getX() + arrow.getRight();
+      if (arrowEnd > getContentView().getRight() - DimensionUnit.DP.toPixels(20)) {
+        shapeableBubbleBackground.setShapeAppearanceModel(shapeAppearanceModel.setTopRightCornerSize(DimensionUnit.DP.toPixels(9f)).build());
+        bubble.setBackground(shapeableBubbleBackground);
+      } else if (arrowEnd < DimensionUnit.DP.toPixels(20)) {
+        shapeableBubbleBackground.setShapeAppearanceModel(shapeAppearanceModel.setTopLeftCornerSize(DimensionUnit.DP.toPixels(9f)).build());
+        bubble.setBackground(shapeableBubbleBackground);
+      }
+    });
+
     showAsDropDown(anchor, xoffset, yoffset);
   }
 

app/src/main/res/drawable/ic_tooltip_arrow_up.xml

@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="20dp"
-    android:height="12dp"
-    android:viewportWidth="20"
-    android:viewportHeight="12">
-  <path
-      android:pathData="M10,3L19,12H1L10,3Z"
-      android:fillColor="#000000"/>
-</vector>

app/src/main/res/drawable/ic_tooltip_arrow_up_left.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M4.231,13.095C3.437,13.818 2.643,14.54 1.975,15.374L1.939,15.419C0.725,16.953 0,18.892 0,21L0,24H24V12H23.928L14.5,3L5.795,11.603C5.299,12.123 4.765,12.609 4.231,13.095Z"
+      android:fillColor="#000000"/>
+</vector>

app/src/main/res/drawable/ic_tooltip_arrow_up_right.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19.769,13.095C20.563,13.818 21.357,14.54 22.025,15.374L22.061,15.419C23.275,16.953 24,18.892 24,21L24,24H0V12H0.072L9.5,3L18.205,11.603C18.701,12.123 19.235,12.609 19.769,13.095Z"
+      android:fillColor="#000000"/>
+</vector>

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

@@ -15,7 +15,7 @@
         android:layout_height="20dp"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        android:visibility="invisible"
+        android:visibility="gone"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:srcCompat="@drawable/ic_tooltip_arrow_left"
@@ -24,14 +24,14 @@
 
     <ImageView
         android:id="@+id/tooltip_arrow_top"
-        android:layout_width="20dp"
+        android:layout_width="24dp"
-        android:layout_height="12dp"
+        android:layout_height="24dp"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
         android:visibility="invisible"
         app:layout_constraintStart_toStartOf="@id/tooltip_bubble"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/ic_tooltip_arrow_up"
+        app:srcCompat="@drawable/ic_tooltip_arrow_up_left"
         app:tint="@color/signal_colorPrimaryContainer"
         tools:visibility="visible" />
 
@@ -39,15 +39,19 @@
         android:id="@+id/tooltip_bubble"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_marginTop="12dp"
         android:background="@drawable/tooltip_background"
         android:clipChildren="false"
         android:clipToPadding="false"
         android:gravity="center_vertical"
         android:orientation="horizontal"
         android:padding="16dp"
+        app:layout_constraintEnd_toStartOf="@id/tooltip_arrow_end"
         app:layout_constraintStart_toEndOf="@id/tooltip_arrow_start"
-        app:layout_constraintTop_toBottomOf="@id/tooltip_arrow_top"
+        app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintWidth_max="320dp"
+        app:layout_goneMarginEnd="8dp"
+        app:layout_goneMarginStart="8dp"
         tools:backgroundTint="@color/signal_colorPrimaryContainer">
 
         <ImageView
@@ -75,7 +79,7 @@
         android:layout_height="12dp"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        android:visibility="invisible"
+        android:visibility="gone"
         app:layout_constraintStart_toStartOf="@id/tooltip_bubble"
         app:layout_constraintTop_toBottomOf="@id/tooltip_bubble"
         app:srcCompat="@drawable/ic_tooltip_arrow_down"
@@ -88,8 +92,8 @@
         android:layout_height="20dp"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        android:visibility="invisible"
+        android:visibility="gone"
-        app:layout_constraintStart_toEndOf="@id/tooltip_bubble"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:srcCompat="@drawable/ic_tooltip_arrow_right"
         app:tint="@color/signal_colorPrimaryContainer"