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

[BadgeDrawable] BadgeDrawable is cut off when attached to ShapeableImageView

Offen
#3,353 2 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

@imhappi arbeitet bereits daran.

Seit 19.4.2023.

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

87jzPVhuzxEERor

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

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.