material-components-android icon indicating copy to clipboard operation
material-components-android copied to clipboard

Published 20 hours ago • verified publisher icon material-components

[BadgeDrawable] BadgeDrawable appears clipped when used with a Toolbar

Open karllindmark opened this issue 3 years ago • 4 comments

Description: I've been trying to use a BadgeDrawable on a MenuItem in our Toolbar, but it can't really get it to work as expected. It appears as if the value gets visually clipped due to exceeding the menu item view bounds, and I think it's due to the positioning of the badge being too far right.

number = 99, too far to the right: image

number = 300, actual visible clipping going on here: image

Expected behavior: image

Source code: https://github.com/karllindmark/MaterialBadgeDrawableInToolbar (more precisely in MainActivity.kt)

Android API version: Tested on 23, 29 and 30 - all of them display the badge incorrectly

Material Library version: 1.4.0-rc01

Device: Emulator

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

karllindmark avatar Jun 11 '21 20:06 karllindmark

The problem is visible in the catalog app if you hide the following two menu items in cat_topappbar_menu.xml:

image

That renders the menu item as follows (after 100 taps):

image

karllindmark avatar Jun 11 '21 21:06 karllindmark

what's new about this?

nienienienie avatar Jul 06 '22 15:07 nienienienie

Our designers are having a redesign of badges. Will raise this to them during the redesign.

drchen avatar Jul 06 '22 15:07 drchen

Definitely a good design issue to consider. In the meantime, you could set BadgeDrawable.setBadgeGravity to a different location if you need a workaround.

hunterstich avatar Jul 06 '22 20:07 hunterstich

Was this forgotten? Unfortunately still happens for me.

Tgo1014 avatar Nov 24 '22 10:11 Tgo1014

Hi, it's not forgotten.

We have the new design and plan to work on this in the next Material version (1.9).

drchen avatar Nov 28 '22 16:11 drchen

Unfortunately the new design will still have this issue; there's no way around this issue without increasing padding on the menu items or moving the badge gravity to not be at 'END'. As Hunter mentioned, a workaround would be moving the badge to a different location using the gravity, or simply using a small badge.

The guidelines do say "Use a small badge when spaces are tightly constrained, such as top app bars." https://m3.material.io/components/badges/guidelines#92c9d4f0-e787-48ad-a9ad-d1830d4bffc1

imhappi avatar Jan 25 '23 21:01 imhappi