material-components / material-components/material-components-android
[BadgeDrawable] BadgeDrawable is cut off when attached to ShapeableImageView
@imhappi is already working on this.
Since Apr 19, 2023.
- Dominant language
- Java
- Stars
- 17.4k
- Forks
- 3.2k
- PR merge metrics
- No merged PRs in 30d
Description
**Description:**
BadgeDrawable is cut off when attached to ShapeableImageView. It is not cut off when attached to an ImageView, nor when attached to a ShapeableImageView inside of a FrameLayout. This issue was brought up in https://github.com/material-components/material-components-android/issues/2182, but the suggested workaround (set layout_margin on ShapeableImageView) does not work.
Initially I was applying the BadgeDrawable to an ImageView and that worked well. However, when I swapped it out for a ShapeableImageView, the badge was clipped.
**Expected behavior:**
I expected consistent behavior when attaching a BadgeDrawable to either a ShapeableImageView or an ImageView. In both cases, I did not expect the badge to be cut off. I expected that adding layout_margin to ShapeableImageView would fix the badge clipping, but it didn't.

**Source code:**
XML:
```xml
```
MainActivity.kt:
```kotlin
val imageView = findViewById(R.id.imageView)
val shapeableImageViewBroken = findViewById(R.id.shapedImageViewBroken)
val shapeableImageViewWithMargin = findViewById(R.id.shapedImageViewWithMargin)
imageView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
val badgeDrawable = BadgeDrawable.create(this@MainActivity)
badgeDrawable.isVisible = true
BadgeUtils.attachBadgeDrawable(badgeDrawable, imageView)
val badgeDrawableBroken = BadgeDrawable.create(this@MainActivity)
badgeDrawableBroken.isVisible = true
BadgeUtils.attachBadgeDrawable(badgeDrawableBroken, shapeableImageViewBroken)
val badgeDrawableBrokenWithMargin = BadgeDrawable.create(this@MainActivity)
badgeDrawableBrokenWithMargin.isVisible = true
BadgeUtils.attachBadgeDrawable(badgeDrawableBrokenWithMargin, shapeableImageViewWithMargin)
}
})
```
**Minimal sample app repro:**
[badge_drawable_issue_app.zip](https://github.com/material-components/material-components-android/files/11267373/badge_drawable_issue_app.zip)
**Android API version:** 33
**Material Library version:** material 1.5.0
**Device:** Pixel 6a
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.