material-components / material-components/material-components-android

[BadgeDrawable] BadgeDrawable is cut off when attached to ShapeableImageView

Open
#3,353 2 comments 0 reactions 1 assignee View on GitHub

@imhappi is already working on this.

Since Apr 19, 2023.

bug Widget: Badge
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.

![87jzPVhuzxEERor](https://user-images.githubusercontent.com/1929716/232935232-031205ae-bf41-4447-abee-6d210d392e16.png)

**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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.