Skip to content

Commit 2362f4b

Browse files
imhappiraajkumars
imhappi
authored and
raajkumars
committedJun 26, 2023
[Badge][NavigationRail] Add new attribute for vertical offset when font is large
PiperOrigin-RevId: 542366571
·
1.13.0-alpha121.10.0-alpha05
1 parent 29d8742 commit 2362f4b

File tree

7 files changed

+94
-21
lines changed

7 files changed

+94
-21
lines changed
 

‎docs/components/BadgeDrawable.md

+16-15
Original file line numberDiff line numberDiff line change
@@ -90,21 +90,22 @@ center, use `setHorizontalOffset(int)` or `setVerticalOffset(int)`
9090

9191
### `BadgeDrawable` Attributes
9292

93-
| Feature | Relevant attributes |
94-
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
95-
| Color | `app:backgroundColor` <br> `app:badgeTextColor` |
96-
| Width | `app:badgeWidth` <br> `app:badgeWithTextWidth` |
97-
| Height | `app:badgeHeight` <br> `app:badgeWithTextHeight` |
98-
| Shape | `app:badgeShapeAppearance` <br> `app:badgeShapeAppearanceOverlay` <br> `app:badgeWithTextShapeAppearance` <br> `app:badgeWithTextShapeAppearanceOverlay` |
99-
| Label | `app:badgeText` (for text) <br> `app:number` (for numbers) |
100-
| Label Length | `app:maxCharacterCount` (for all text) <br> `app:maxNumber` (for numbers only) |
101-
| Label Text Color | `app:badgeTextColor` |
102-
| Label Text Appearance | `app:badgeTextAppearance` |
103-
| Badge Gravity | `app:badgeGravity` |
104-
| Offset Alignment | `app:offsetAlignmentMode` |
105-
| Horizontal Padding | `app:badgeWidePadding` |
106-
| Vertical Padding | `app:badgeVerticalPadding` |
107-
| Auto Adjust | `app:autoAdjustToWithinGrandparentBounds` |
93+
| Feature | Relevant attributes |
94+
|----------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------|
95+
| Color | `app:backgroundColor` <br> `app:badgeTextColor` |
96+
| Width | `app:badgeWidth` <br> `app:badgeWithTextWidth` |
97+
| Height | `app:badgeHeight` <br> `app:badgeWithTextHeight` |
98+
| Shape | `app:badgeShapeAppearance` <br> `app:badgeShapeAppearanceOverlay` <br> `app:badgeWithTextShapeAppearance` <br> `app:badgeWithTextShapeAppearanceOverlay` |
99+
| Label | `app:badgeText` (for text) <br> `app:number` (for numbers) |
100+
| Label Length | `app:maxCharacterCount` (for all text) <br> `app:maxNumber` (for numbers only) |
101+
| Label Text Color | `app:badgeTextColor` |
102+
| Label Text Appearance | `app:badgeTextAppearance` |
103+
| Badge Gravity | `app:badgeGravity` |
104+
| Offset Alignment | `app:offsetAlignmentMode` |
105+
| Horizontal Padding | `app:badgeWidePadding` |
106+
| Vertical Padding | `app:badgeVerticalPadding` |
107+
| Large Font Vertical Offset| `app:largeFontVerticalOffsetAdjustment` |
108+
| Auto Adjust | `app:autoAdjustToWithinGrandparentBounds` |
108109

109110
**Note:** If both `app:badgeText` and `app:number` are specified, the badge label will be `app:badgeText`.
110111

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

+44-4
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@
4747
import androidx.annotation.StyleRes;
4848
import androidx.annotation.XmlRes;
4949
import androidx.core.view.ViewCompat;
50+
import com.google.android.material.animation.AnimationUtils;
5051
import com.google.android.material.internal.TextDrawableHelper;
5152
import com.google.android.material.internal.TextDrawableHelper.TextDrawableDelegate;
5253
import com.google.android.material.internal.ThemeEnforcement;
54+
import com.google.android.material.resources.MaterialResources;
5355
import com.google.android.material.resources.TextAppearance;
5456
import com.google.android.material.shape.MaterialShapeDrawable;
5557
import com.google.android.material.shape.ShapeAppearanceModel;
@@ -187,6 +189,9 @@ public class BadgeDrawable extends Drawable implements TextDrawableDelegate {
187189
/** A value to indicate that badge content should not be truncated. */
188190
public static final int BADGE_CONTENT_NOT_TRUNCATED = -2;
189191

192+
/** The font scale threshold to changing the vertical offset of the badge. **/
193+
private static final float FONT_SCALE_THRESHOLD = .3F;
194+
190195
@NonNull private final WeakReference<Context> contextRef;
191196
@NonNull private final MaterialShapeDrawable shapeDrawable;
192197
@NonNull private final TextDrawableHelper textDrawableHelper;
@@ -1009,6 +1014,29 @@ public int getVerticalOffsetWithText() {
10091014
return state.getVerticalOffsetWithText();
10101015
}
10111016

1017+
/**
1018+
* Sets how much (in pixels) to vertically move this badge away the center of its anchor when this
1019+
* badge has text and the font scale is at max size. This is in conjunction with the vertical
1020+
* offset with text.
1021+
*
1022+
* @param px how much to move the badge's vertical offset away from the center by when the font is
1023+
* large.
1024+
*/
1025+
public void setLargeFontVerticalOffsetAdjustment(@Px int px) {
1026+
state.setLargeFontVerticalOffsetAdjustment(px);
1027+
updateCenterAndBounds();
1028+
}
1029+
1030+
/**
1031+
* Returns how much (in pixels) this badge is being vertically moved away the center of its
1032+
* anchor when the badge has text and the font scale is at max. Note that this is not the total
1033+
* vertical offset.
1034+
*/
1035+
@Px
1036+
public int getLargeFontVerticalOffsetAdjustment() {
1037+
return state.getLargeFontVerticalOffsetAdjustment();
1038+
}
1039+
10121040
/**
10131041
* Sets how much (in pixels) more (in addition to {@code savedState.verticalOffset}) to vertically
10141042
* move this badge towards the center of its anchor. Currently used to adjust the placement of
@@ -1165,10 +1193,22 @@ private void updateCenterAndBounds() {
11651193
}
11661194

11671195
private int getTotalVerticalOffsetForState() {
1168-
int vOffset =
1169-
hasBadgeContent()
1170-
? state.getVerticalOffsetWithText()
1171-
: state.getVerticalOffsetWithoutText();
1196+
int vOffset = state.getVerticalOffsetWithoutText();
1197+
if (hasBadgeContent()) {
1198+
vOffset = state.getVerticalOffsetWithText();
1199+
Context context = contextRef.get();
1200+
if (context != null) {
1201+
float progress =
1202+
AnimationUtils.lerp(0F, 1F,
1203+
FONT_SCALE_THRESHOLD, 1F, MaterialResources.getFontScale(context) - 1F);
1204+
vOffset =
1205+
AnimationUtils.lerp(
1206+
vOffset, vOffset - state.getLargeFontVerticalOffsetAdjustment(), progress);
1207+
}
1208+
}
1209+
1210+
1211+
11721212
// If the offset alignment mode is at the edge of the anchor, we want to move the badge
11731213
// so that its origin is at the edge.
11741214
if (state.offsetAlignmentMode == OFFSET_ALIGNMENT_MODE_EDGE) {

‎lib/java/com/google/android/material/badge/BadgeState.java

+22-1
Original file line numberDiff line numberDiff line change
@@ -264,9 +264,15 @@ public final class BadgeState {
264264
currentState.verticalOffsetWithText =
265265
storedState.verticalOffsetWithText == null
266266
? a.getDimensionPixelOffset(
267-
R.styleable.Badge_verticalOffsetWithText, currentState.verticalOffsetWithoutText)
267+
R.styleable.Badge_verticalOffsetWithText, currentState.verticalOffsetWithoutText)
268268
: storedState.verticalOffsetWithText;
269269

270+
currentState.largeFontVerticalOffsetAdjustment =
271+
storedState.largeFontVerticalOffsetAdjustment == null
272+
? a.getDimensionPixelOffset(
273+
R.styleable.Badge_largeFontVerticalOffsetAdjustment, 0)
274+
: storedState.largeFontVerticalOffsetAdjustment;
275+
270276
currentState.additionalHorizontalOffset =
271277
storedState.additionalHorizontalOffset == null ? 0 : storedState.additionalHorizontalOffset;
272278

@@ -521,6 +527,16 @@ void setVerticalOffsetWithText(@Dimension(unit = Dimension.PX) int offset) {
521527
currentState.verticalOffsetWithText = offset;
522528
}
523529

530+
@Dimension(unit = Dimension.PX)
531+
int getLargeFontVerticalOffsetAdjustment() {
532+
return currentState.largeFontVerticalOffsetAdjustment;
533+
}
534+
535+
void setLargeFontVerticalOffsetAdjustment(@Dimension(unit = Dimension.PX) int offsetAdjustment) {
536+
overridingState.largeFontVerticalOffsetAdjustment = offsetAdjustment;
537+
currentState.largeFontVerticalOffsetAdjustment = offsetAdjustment;
538+
}
539+
524540
@Dimension(unit = Dimension.PX)
525541
int getAdditionalHorizontalOffset() {
526542
return currentState.additionalHorizontalOffset;
@@ -662,6 +678,9 @@ public static final class State implements Parcelable {
662678
@Dimension(unit = Dimension.PX)
663679
private Integer additionalVerticalOffset;
664680

681+
@Dimension(unit = Dimension.PX)
682+
private Integer largeFontVerticalOffsetAdjustment;
683+
665684
private Boolean autoAdjustToWithinGrandparentBounds;
666685

667686
public State() {}
@@ -690,6 +709,7 @@ public State() {}
690709
verticalOffsetWithoutText = (Integer) in.readSerializable();
691710
horizontalOffsetWithText = (Integer) in.readSerializable();
692711
verticalOffsetWithText = (Integer) in.readSerializable();
712+
largeFontVerticalOffsetAdjustment = (Integer) in.readSerializable();
693713
additionalHorizontalOffset = (Integer) in.readSerializable();
694714
additionalVerticalOffset = (Integer) in.readSerializable();
695715
isVisible = (Boolean) in.readSerializable();
@@ -744,6 +764,7 @@ public void writeToParcel(@NonNull Parcel dest, int flags) {
744764
dest.writeSerializable(verticalOffsetWithoutText);
745765
dest.writeSerializable(horizontalOffsetWithText);
746766
dest.writeSerializable(verticalOffsetWithText);
767+
dest.writeSerializable(largeFontVerticalOffsetAdjustment);
747768
dest.writeSerializable(additionalHorizontalOffset);
748769
dest.writeSerializable(additionalVerticalOffset);
749770
dest.writeSerializable(isVisible);

‎lib/java/com/google/android/material/badge/res-public/values/public.xml

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<public name="badgeVerticalPadding" type="attr"/>
2929
<public name="horizontalOffset" type="attr"/>
3030
<public name="verticalOffset" type="attr"/>
31+
<public name="largeFontVerticalOffsetAdjustment" type="attr"/>
3132
<public name="offsetAlignmentMode" type="attr"/>
3233
<public name="badgeWidth" type="attr"/>
3334
<public name="badgeWithTextWidth" type="attr"/>

‎lib/java/com/google/android/material/badge/res/values/attrs.xml

+5
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@
9292
badge has text. If this is not defined, it will default to
9393
verticalOffset's value. -->
9494
<attr name="verticalOffsetWithText" format="dimension"/>
95+
<!-- How much to move the verticalOffsetWithText away from the center by
96+
when the badge has text and the font is large. When the font is large,
97+
we may want to shift the badge away from the center for more readability. This
98+
attribute determines how much to shift the normal vertical offset by. -->
99+
<attr name="largeFontVerticalOffsetAdjustment" format="dimension"/>
95100
<!-- Automatically move the badge so it is within the anchor view's
96101
grandparent's bounds. -->
97102
<attr name="autoAdjustToWithinGrandparentBounds" format="boolean"/>

‎lib/java/com/google/android/material/badge/res/values/dimens.xml

+1
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,6 @@
4242

4343
<dimen name="m3_badge_offset">6dp</dimen>
4444
<dimen name="m3_badge_with_text_offset">12dp</dimen>
45+
<dimen name="m3_large_text_vertical_offset_adjustment">4dp</dimen>
4546
<dimen name="m3_badge_with_text_vertical_padding">2dp</dimen>
4647
</resources>

‎lib/java/com/google/android/material/navigationrail/res/values/styles.xml

+5-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,11 @@
9393
</style>
9494

9595
<style name="ThemeOverlay.Material3.NavigationRailView" parent="">
96-
<item name="badgeStyle">@style/Widget.Material3.Badge.AdjustToBounds</item>
96+
<item name="badgeStyle">@style/Widget.Material3.NavigationRailView.Badge</item>
97+
</style>
98+
99+
<style name="Widget.Material3.NavigationRailView.Badge" parent="Widget.Material3.Badge.AdjustToBounds">
100+
<item name="largeFontVerticalOffsetAdjustment">@dimen/m3_large_text_vertical_offset_adjustment</item>
97101
</style>
98102

99103
</resources>

0 commit comments

Comments
 (0)
Please sign in to comment.