material-components / material-components/material-components-android
[BadgeDrawable] BadgeDrawable is cut off when attached to ShapeableImageView
@imhappi arbeitet bereits daran.
Seit 19.4.2023.
- Vorherrschende Sprache
- Java
- Sterne
- 17.4k
- Forks
- 3.2k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
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:
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:importantForAccessibility="no"
app:srcCompat="@drawable/androidparty" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/shapedImageViewBroken"
android:layout_width="200dp"
android:layout_height="200dp"
android:importantForAccessibility="no"
app:srcCompat="@drawable/androidparty" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/shapedImageViewWithMargin"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="20dp"
android:importantForAccessibility="no"
app:srcCompat="@drawable/androidparty" />
MainActivity.kt:
val imageView = findViewById<ImageView>(R.id.imageView)
val shapeableImageViewBroken = findViewById<ShapeableImageView>(R.id.shapedImageViewBroken)
val shapeableImageViewWithMargin = findViewById<ShapeableImageView>(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
Android API version: 33
Material Library version: material 1.5.0
Device: Pixel 6a
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Bewertung
Dieses Issue wurde noch nicht bewertet.