[BadgeDrawable] Allow to set drawable as a background

[danaimset]

Is your feature request related to a problem? Please describe. There is no chance to add stroke to badge which is great to have in case BottomNavigationView.Item's icon color is the same as badge's color

Describe the solution you'd like Allow to customize background with drawable

Describe alternatives you've considered

• Allow to customize strokeWidth and strokeColor of internal ShapeDrawable

Additional context I wouldn't mind to contribute with PR if there will be final decision on solution/approach

• Allow drawable background
• Allow to customize strokeWidth/strokeColor

[danaimset]

Seems there is also missing XML attribute for BottomNavigationView: badgeStyle or badgeResource(xml) So there will be chance to customize badge in BottomNavigationView

[wcshi]

Hi @danaimset could you please explain why you want to "allow drawable background" on a BadgeDrawable, which is itself a drawable.

[danaimset]

Hi @danaimset could you please explain why you want to "allow drawable background" on a BadgeDrawable, which is itself a drawable.

Hi @wcshi ! It's mostly about badge customization in general. I was able to change color but it's kind of strange having BadgeDrawable extending ShapeDrawable and not being able to customize strokeWidth and strokeColor.

I was looking forward to customize badge as much ways it is possible. Having access to BadgeDrawable's canvas it should not be hard to draw another drawable as a background. But LayerDrawable probably would be even better.

For my concrete case: it should be colored badge with whatever colored stroke.

[danaimset]

[wcshi]

hi @danaimset the designers are open to the idea of supporting shape theming which is why BadgeDrawable inherits from MSD. Shape theming is currently not available because there is on-going user research and the designers have to provide good guidance based on the feedback. I think your use case is reasonable, just have to be careful to avoid occluding the badge text (if any), with the stroke. Are you planning to display a badge number?

[wcshi]

Could you show the badge in context? Where will it be displayed?

[danaimset]

I absolutely agree with you about badge text. I suppose that measurements should be resolved on BadgeDrawable side. In my case it is badge on BottomNavigationView's icon

[danaimset]

That's especially noticeable on devices with small width. Without stroke it looks ugly. Of course it looks better if badge has color different from icon but it is meaningless restriction from my point of view: do not allow badge and icon having the same color

[danaimset]

I tried to draw custom badge where I'd like to use drawable background. https://drive.google.com/file/d/1Hfw7eSmzw6bJWIyz505CtGG_6OyTj6N5/view?usp=sharing

[rubek-joshi]

Any updates regarding this? I'd also like to add a white stroke to the badge to get something like this:

[danaimset]

According to comment #1200 this issue is going to be closed. What about custom badges I've drawn in my previous comment? (where each is a combination of shapes actually) Am I understand correctly that there is only way to achieve this by drawing on MSD's canvas?

[wcshi]

@danaimset did you mean to link to a different issue? The issue #1200 is still open and there's no mention of this issue.

Right now custom badge shapes are not supported, we are waiting for design input.

[danaimset]

@danaimset did you mean to link to a different issue? The issue #1200 is still open and there's no mention of this issue.

Right now custom badge shapes are not supported, we are waiting for design input.

@wcshi Sorry for misleading, this issue was mentioned in the following PR: https://github.com/material-components/material-components-android/pull/1640 Am I understand correctly that currently there is no way to configure MSD to have detached shapes like in the image I've sent earlier (clouds, flower, sun)? I just want to stay up to date with custom shapes for badge drawable. Is there any other issue or thread so I could follow custom/complex shape in badge drawable just in case this issue is closed. Does it make sense to change the title of this issue if there will be no chance to have a custom drawable set as a badge background or create a new one if it does not exist?

[wcshi]

Hi @danaimset

What shapes MSD can support and badge drawables are two separate issues.

1. Right now, we are intentionally not opening support for customizing the shape of a badge drawable because our designers are doing usability studies on how to expand badges to support more use cases.

2. if a shape can be formed using ShapeappearanceModel (4 corners + 4 edges in a continous path) than MSD can support it so no disjointed shapes like your sun rays or flowers, but maybe cloud depending on how you create the path.

3. Does it make sense to change the title of this issue if there will be no chance to have a custom drawable set as a badge background or create a new one if it does not exist? Depends on design feedback on 1)

[oHuflying]

Google always makes some smug component that looks good but sucks, it's 2021 and still can't custom shape badges, like Navigation Library and Fragment Backstack is still unresolved, if I give this component a score, it's 0.

[KibiH]

Seriously? All I want to do is have some simple text in the badge saying "New". This has been in iOS for ages. I can't set a badge text except to put in a number and I can't set a drawable to show the text New - so pathetic

[akhbulatov]

It's been more than 3 years since this issue was created, and your designers are still thinking whether it's worth adding this feature or not? Isn't it too long?

[tbress89]

I also want to be able to add a stroke around the badge. Without the stroke, the badge looks really ugly.

[20ali20]

I am having similar issues. Also just a feedback, I dont think we need design feedback on a feature used by many in many companies with their own agendas and design team. Sometimes opinions are subjective and allowing for flexibility leads to helping a wider group of people. You could provide best practice like you always do but also offer alternatives for those needing to go a different route or at least the ability for us to have our own custom badge drawables.

[rubek-joshi]

@wcshi, I can't believe it's been 3 years and the status of this issue is still Awaiting Design Feedback. It's clear to me that this isn't even being looked at anymore and also that it won't be resolved anytime soon.

[20ali20]

@wcshi, I can't believe it's been 3 years and the status of this issue is still Awaiting Design Feedback. It's clear to me that this isn't even being looked at anymore and also that it won't be resolved anytime soon.

Crazy right? In jetpack Compose you have the option to use your own custom badge, in iOS you can set your own badge but on Android material with XML which is used the most you gotta be "awaiting design feedback" for a technical feature

[avianey]

I use this :

val badgeDrawable = BadgeDrawable.create(this)
findViewById<FloatingActionButton>(R.id.control_calibrate).apply {
    viewTreeObserver.addOnGlobalLayoutListener {
        val field = BadgeDrawable::class.java.getDeclaredField("shapeDrawable")
        field.isAccessible = true
        (field.get(badgeDrawable) as MaterialShapeDrawable)?.let {
            it.strokeWidth = 0 /* set width */
            it.strokeColor = ColorStateList.valueOf( /* set color */ )
        }
        badgeDrawable.number = 0
        badgeDrawable.maxCharacterCount = 1
        badgeDrawable.backgroundColor = resources.getColor(R.color.colorPrimary)
        badgeDrawable.badgeTextColor = resources.getColor(R.color.colorOnPrimary)
        BadgeUtils.attachBadgeDrawable(badgeDrawable, this)
    }
}