[Badge] Badge cleanup/fixes:

- Allow single digit badges to be non-circular if the label text is too big horizontally.
- Change maxCharacterCount to truncate both strings and numbers, and add new attribute maxNumber to truncate only numbers
- Updated maxCharacterCount so that if it doesn't exist, it does not truncate instead of defaulting to a value

Resolves #3321

GIT_ORIGIN_REV_ID=a8f5866eef5ffd4d949b8c6d7f1451b563536a6e
Co-authored-by: imhappi
PiperOrigin-RevId: 523453145

Author: pubiqq

docs/components/BadgeDrawable.md

@@ -91,13 +91,13 @@ center, use `setHorizontalOffset(int)` or `setVerticalOffset(int)`
 ### `BadgeDrawable` Attributes
 
 | Feature               | Relevant attributes                                                                                                                                      |
-|-----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Color                 | `app:backgroundColor` <br> `app:badgeTextColor`                                                                                                                                     |
-| Width                 | `app:badgeWidth` <br> `app:badgeWithTextWidth`                                                                                                                                 |
-| Height                | `app:badgeHeight` <br> `app:badgeWithTextHeight`                                                                                                                                |
-| Shape                 | `app:badgeShapeAppearance` <br> `app:badgeShapeAppearanceOverlay` <br> `app:badgeWithTextShapeAppearance` <br> `app:badgeWithTextShapeAppearanceOverlay`                                                                                                                |
-| Label                 | `app:badgeText` (for text) <br> `app:number` (for numbers)                                                                                                                                                 |
-| Label Length          | `app:maxCharacterCount`                                                                                                                                  |
+|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Color                 | `app:backgroundColor` <br> `app:badgeTextColor`                                                                                                                                      |
+| Width                 | `app:badgeWidth` <br> `app:badgeWithTextWidth`                                                                                                           |
+| Height                | `app:badgeHeight` <br> `app:badgeWithTextHeight`                                                                                                         |
+| Shape                 | `app:badgeShapeAppearance` <br> `app:badgeShapeAppearanceOverlay` <br> `app:badgeWithTextShapeAppearance` <br> `app:badgeWithTextShapeAppearanceOverlay`                                                                                                                 |
+| Label                 | `app:badgeText` (for text) <br> `app:number` (for numbers)                                                                                                                                                  |
+| Label Length          | `app:maxCharacterCount` (for all text) <br> `app:maxNumber` (for numbers only)                                                                                                                                                     |
 | Label Text Color      | `app:badgeTextColor`                                                                                                                                     |
 | Label Text Appearance | `app:badgeTextAppearance`                                                                                                                                |
 | Badge Gravity         | `app:badgeGravity`                                                                                                                                       |

lib/java/com/google/android/material/badge/BadgeDrawable.java

@@ -125,10 +125,10 @@ public class BadgeDrawable extends Drawable implements TextDrawableDelegate {
 
   /** Position the badge can be set to. */
   @IntDef({
-    TOP_END,
-    TOP_START,
-    BOTTOM_END,
-    BOTTOM_START,
+      TOP_END,
+      TOP_START,
+      BOTTOM_END,
+      BOTTOM_START,
   })
   @Retention(RetentionPolicy.SOURCE)
   public @interface BadgeGravity {}
@@ -145,18 +145,21 @@ public class BadgeDrawable extends Drawable implements TextDrawableDelegate {
   /** The badge is positioned along the bottom and start edges of its anchor view */
   public static final int BOTTOM_START = Gravity.BOTTOM | Gravity.START;
 
-  /** Maximum value of number that can be displayed in a circular badge. */
-  private static final int MAX_CIRCULAR_BADGE_NUMBER_COUNT = 9;
-
   @StyleRes private static final int DEFAULT_STYLE = R.style.Widget_MaterialComponents_Badge;
   @AttrRes private static final int DEFAULT_THEME_ATTR = R.attr.badgeStyle;
 
   /**
    * If the badge number exceeds the maximum allowed number, append this suffix to the max badge
-   * number and display is as the badge text instead.
+   * number and display it as the badge text instead.
    */
   static final String DEFAULT_EXCEED_MAX_BADGE_NUMBER_SUFFIX = "+";
 
+  /**
+   * If the badge string exceeds the maximum allowed number of characters, append this suffix to the
+   * truncated badge text and display it as the badge text instead.
+   */
+  static final String DEFAULT_EXCEED_MAX_BADGE_TEXT_SUFFIX = "…";
+
   /**
    * The badge offset begins at the edge of the anchor.
    */
@@ -181,6 +184,9 @@ public class BadgeDrawable extends Drawable implements TextDrawableDelegate {
   /** A value to indicate that a badge radius has not been specified. */
   static final int BADGE_RADIUS_NOT_SPECIFIED = -1;
 
+  /** A value to indicate that badge content should not be truncated. */
+  public static final int BADGE_CONTENT_NOT_TRUNCATED = -2;
+
   @NonNull private final WeakReference<Context> contextRef;
   @NonNull private final MaterialShapeDrawable shapeDrawable;
   @NonNull private final TextDrawableHelper textDrawableHelper;
@@ -257,7 +263,7 @@ private void restoreState() {
     onBadgeShapeAppearanceUpdated();
     onBadgeTextAppearanceUpdated();
 
-    onMaxCharacterCountUpdated();
+    onMaxBadgeLengthUpdated();
 
     onBadgeContentUpdated();
     onAlphaUpdated();
@@ -527,14 +533,20 @@ public void setNumber(int number) {
     number = Math.max(0, number);
     if (this.state.getNumber() != number) {
       state.setNumber(number);
-      onBadgeContentUpdated();
+      onNumberUpdated();
     }
   }
 
-  /** Resets any badge number so that a numberless badge will be displayed. */
+  /** Clears the badge's number. */
   public void clearNumber() {
-    if (hasNumber()) {
-      state.clearNumber();
+    state.clearNumber();
+    onNumberUpdated();
+  }
+
+  private void onNumberUpdated() {
+    // The text has priority over the number so when the number changes, the badge is updated
+    // only if there is no text.
+    if (!hasText()) {
       onBadgeContentUpdated();
     }
   }
@@ -556,17 +568,17 @@ public String getText() {
   }
 
   /**
-   * Sets the badge's text.
+   * Sets the badge's text. The specified text will be displayed, unless its length exceeds {@code
+   * maxCharacterCount} in which case a truncated version will be shown.
    *
    * @see #getText()
    * @attr ref com.google.android.material.R.styleable#Badge_badgeText
    */
   public void setText(@Nullable String text) {
-    if (TextUtils.equals(state.getText(), text)) {
-      return;
+    if (!TextUtils.equals(state.getText(), text)) {
+      state.setText(text);
+      onTextUpdated();
     }
-    state.setText(text);
-    onBadgeContentUpdated();
   }
 
   /**
@@ -575,15 +587,13 @@ public void setText(@Nullable String text) {
   public void clearText() {
     if (state.hasText()) {
       state.clearText();
-      onBadgeContentUpdated();
+      onTextUpdated();
     }
   }
 
-  private void onBadgeContentUpdated() {
-    textDrawableHelper.setTextSizeDirty(true);
-    onBadgeShapeAppearanceUpdated();
-    updateCenterAndBounds();
-    invalidateSelf();
+  private void onTextUpdated() {
+    // The text has priority over the number so any text change updates the badge content.
+    onBadgeContentUpdated();
   }
 
   /**
@@ -605,11 +615,34 @@ public int getMaxCharacterCount() {
   public void setMaxCharacterCount(int maxCharacterCount) {
     if (this.state.getMaxCharacterCount() != maxCharacterCount) {
       this.state.setMaxCharacterCount(maxCharacterCount);
-      onMaxCharacterCountUpdated();
+      onMaxBadgeLengthUpdated();
     }
   }
 
-  private void onMaxCharacterCountUpdated() {
+  /**
+   * Returns this badge's max number. If maxCharacterCount is set, it will override this number.
+   *
+   * @see #setMaxNumber(int)
+   * @attr ref com.google.android.material.R.styleable#Badge_maxNumber
+   */
+  public int getMaxNumber() {
+    return state.getMaxNumber();
+  }
+
+  /**
+   * Sets this badge's max number. If maxCharacterCount is set, it will override this number.
+   *
+   * @param maxNumber This badge's max number.
+   * @attr ref com.google.android.material.R.styleable#Badge_maxNumber
+   */
+  public void setMaxNumber(int maxNumber) {
+    if (this.state.getMaxNumber() != maxNumber) {
+      this.state.setMaxNumber(maxNumber);
+      onMaxBadgeLengthUpdated();
+    }
+  }
+
+  private void onMaxBadgeLengthUpdated() {
     updateMaxBadgeNumber();
     textDrawableHelper.setTextSizeDirty(true);
     updateCenterAndBounds();
@@ -691,7 +724,7 @@ public void draw(@NonNull Canvas canvas) {
     }
     shapeDrawable.draw(canvas);
     if (hasBadgeContent()) {
-      drawText(canvas);
+      drawBadgeContent(canvas);
     }
   }
 
@@ -763,7 +796,7 @@ private String getNumberContentDescription() {
       if (context == null) {
         return null;
       }
-      if (getNumber() <= maxBadgeNumber) {
+      if (maxBadgeNumber == BADGE_CONTENT_NOT_TRUNCATED || getNumber() <= maxBadgeNumber) {
         return context
             .getResources()
             .getQuantityString(
@@ -776,6 +809,7 @@ private String getNumberContentDescription() {
     return null;
   }
 
+  @Nullable
   private CharSequence getTextContentDescription() {
     final CharSequence contentDescription = state.getContentDescriptionForText();
     if (contentDescription != null) {
@@ -1083,10 +1117,10 @@ private void onBadgeShapeAppearanceUpdated() {
     shapeDrawable.setShapeAppearanceModel(
         ShapeAppearanceModel.builder(
                 context,
-                state.hasNumber()
+                hasBadgeContent()
                     ? state.getBadgeWithTextShapeAppearanceResId()
                     : state.getBadgeShapeAppearanceResId(),
-                state.hasNumber()
+                hasBadgeContent()
                     ? state.getBadgeWithTextShapeAppearanceOverlayResId()
                     : state.getBadgeShapeAppearanceOverlayResId())
             .build());
@@ -1154,20 +1188,28 @@ private int getTotalHorizontalOffsetForState() {
   }
 
   private void calculateCenterAndBounds(@NonNull Rect anchorRect, @NonNull View anchorView) {
-    cornerRadius = !hasBadgeContent() ? state.badgeRadius : state.badgeWithTextRadius;
+    cornerRadius = hasBadgeContent() ? state.badgeWithTextRadius : state.badgeRadius;
     if (cornerRadius != BADGE_RADIUS_NOT_SPECIFIED) {
-      halfBadgeHeight = cornerRadius;
       halfBadgeWidth = cornerRadius;
+      halfBadgeHeight = cornerRadius;
     } else {
-      halfBadgeHeight =
-          Math.round(!hasBadgeContent() ? state.badgeHeight / 2 : state.badgeWithTextHeight / 2);
       halfBadgeWidth =
-          Math.round(!hasBadgeContent() ? state.badgeWidth / 2 : state.badgeWithTextWidth / 2);
+          Math.round(hasBadgeContent() ? state.badgeWithTextWidth / 2 : state.badgeWidth / 2);
+      halfBadgeHeight =
+          Math.round(hasBadgeContent() ? state.badgeWithTextHeight / 2 : state.badgeHeight / 2);
     }
-    String badgeContent = getBadgeContent();
+
     // If the badge has a number, we want to make sure that the badge is at least tall/wide
     // enough to encompass the text with padding.
     if (hasBadgeContent()) {
+      String badgeContent = getBadgeContent();
+
+      halfBadgeWidth =
+          Math.max(
+              halfBadgeWidth,
+              textDrawableHelper.getTextWidth(badgeContent) / 2f
+                  + state.getBadgeHorizontalPadding());
+
       halfBadgeHeight =
           Math.max(
               halfBadgeHeight,
@@ -1178,17 +1220,6 @@ private void calculateCenterAndBounds(@NonNull Rect anchorRect, @NonNull View an
       halfBadgeWidth = Math.max(halfBadgeWidth, halfBadgeHeight);
     }
 
-    // If the badge has a number and it exceeds the max circular badge count, or the badge
-    // has text then the width of the badge should encapsulate the whole text.
-    if ((getNumber() > MAX_CIRCULAR_BADGE_NUMBER_COUNT)
-        || (hasText() && !getText().isEmpty())) {
-      halfBadgeWidth =
-          Math.max(
-              halfBadgeWidth,
-              textDrawableHelper.getTextWidth(badgeContent) / 2f
-                  + state.getBadgeHorizontalPadding());
-    }
-
     int totalVerticalOffset = getTotalVerticalOffsetForState();
 
     switch (state.getBadgeGravity()) {
@@ -1328,26 +1359,28 @@ private float getRightCutoff(View anchorParent, float anchorViewOffset) {
     return rightCutOff;
   }
 
-  private void drawText(Canvas canvas) {
-    Rect textBounds = new Rect();
+  private void drawBadgeContent(Canvas canvas) {
     String badgeContent = getBadgeContent();
-    textDrawableHelper
-        .getTextPaint()
-        .getTextBounds(badgeContent, 0, badgeContent.length(), textBounds);
-
-    // The text is centered horizontally using Paint.Align.Center. We calculate the correct
-    // y-coordinate ourselves using textbounds.exactCenterY, but this can look askew at low
-    // screen densities due to canvas.drawText rounding the coordinates to the nearest integer.
-    // To mitigate this, we round the y-coordinate following these rules:
-    // If the badge.bottom is <= 0, the text is drawn above its original origin (0,0) so
-    // we round down the y-coordinate since we want to keep it above its new origin.
-    // If the badge.bottom is positive, we round up for the opposite reason.
-    float exactCenterY = badgeCenterY - textBounds.exactCenterY();
-    canvas.drawText(
-        badgeContent,
-        badgeCenterX,
-        textBounds.bottom <= 0 ? (int) exactCenterY : Math.round(exactCenterY),
-        textDrawableHelper.getTextPaint());
+    if (badgeContent != null) {
+      Rect textBounds = new Rect();
+      textDrawableHelper
+          .getTextPaint()
+          .getTextBounds(badgeContent, 0, badgeContent.length(), textBounds);
+
+      // The text is centered horizontally using Paint.Align.Center. We calculate the correct
+      // y-coordinate ourselves using textbounds.exactCenterY, but this can look askew at low
+      // screen densities due to canvas.drawText rounding the coordinates to the nearest integer.
+      // To mitigate this, we round the y-coordinate following these rules:
+      // If the badge.bottom is <= 0, the text is drawn above its original origin (0,0) so
+      // we round down the y-coordinate since we want to keep it above its new origin.
+      // If the badge.bottom is positive, we round up for the opposite reason.
+      float exactCenterY = badgeCenterY - textBounds.exactCenterY();
+      canvas.drawText(
+          badgeContent,
+          badgeCenterX,
+          textBounds.bottom <= 0 ? (int) exactCenterY : Math.round(exactCenterY),
+          textDrawableHelper.getTextPaint());
+    }
   }
 
   private boolean hasBadgeContent() {
@@ -1367,13 +1400,32 @@ private String getBadgeContent() {
 
   @Nullable
   private String getTextBadgeText() {
-    return getText();
+    String text = getText();
+    final int maxCharacterCount = getMaxCharacterCount();
+    if (maxCharacterCount == BADGE_CONTENT_NOT_TRUNCATED) {
+      return text;
+    }
+
+    if (text != null && text.length() > maxCharacterCount) {
+      Context context = contextRef.get();
+      if (context == null) {
+        return "";
+      }
+
+      text = text.substring(0, maxCharacterCount - 1);
+      return String.format(
+          context.getString(R.string.m3_exceed_max_badge_text_suffix),
+          text,
+          DEFAULT_EXCEED_MAX_BADGE_TEXT_SUFFIX);
+    } else {
+      return text;
+    }
   }
 
   @NonNull
   private String getNumberBadgeText() {
     // If number exceeds max count, show badgeMaxCount+ instead of the number.
-    if (getNumber() <= maxBadgeNumber) {
+    if (maxBadgeNumber == BADGE_CONTENT_NOT_TRUNCATED || getNumber() <= maxBadgeNumber) {
       return NumberFormat.getInstance(state.getNumberLocale()).format(getNumber());
     } else {
       Context context = contextRef.get();
@@ -1389,7 +1441,21 @@ private String getNumberBadgeText() {
     }
   }
 
+  private void onBadgeContentUpdated() {
+    textDrawableHelper.setTextSizeDirty(true);
+    onBadgeShapeAppearanceUpdated();
+    updateCenterAndBounds();
+    invalidateSelf();
+  }
+
   private void updateMaxBadgeNumber() {
-    maxBadgeNumber = (int) Math.pow(10.0d, (double) getMaxCharacterCount() - 1) - 1;
+    if (getMaxCharacterCount() != BADGE_CONTENT_NOT_TRUNCATED) {
+      // If there exists a max character count, we set the maximum number a badge can have as the
+      // largest number that has maxCharCount - 1 digits, which accounts for the `+` as a character.
+      maxBadgeNumber = (int) Math.pow(10.0d, (double) getMaxCharacterCount() - 1) - 1;
+    } else {
+      maxBadgeNumber = getMaxNumber();
+    }
   }
 }
+