ShapeableImageView has black overlay

Question

I'm using the new ShapeableImageView to make a circular image, but the overlay is showing up as black. How can I make it transparent? This is what it looks like:

And this is the code:

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/app_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/CircleImageView"
        app:srcCompat="@mipmap/ic_launcher_round" />

<style name="CircleImageView">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

ref this link: https://gist.github.com/gabrielemariotti/446c63ea2aed81aafc0bdec1488e27c9, if you still facing any issue, mention what version are you using. — Bolt UIX, Sep 23 '20 at 19:31
It turned out it's just a preview issue, if you run the app you shouldn't see the black background — Matteo Innocenti, Sep 28 '20 at 12:51
Somehow i still see this during fragment transitions. any clues how to get rid? — Nathany Attipoe, Feb 10 '21 at 02:41

score 30 · Accepted Answer · answered Oct 07 '20 at 06:05

30

Just like @Matteo Innnocenti mentioned at the comments, It is just a preview issue when you run the app you should not see the black background

For more people to see I post it as an answer

answered Oct 07 '20 at 06:05

ysfcyln

2,857
6
34
61

score 0 · Answer 2 · answered Jun 26 '22 at 10:07

Instead of setting the background colour directly, try to set it this way

// instead of this:
// iconImage.setBackgroundResource(item.colorResId)

// use this as workaround
val shapeDrawable = ShapeDrawable(RectShape()).apply {
        colorFilter = PorterDuffColorFilter(ContextCompat.getColor(iconImage.context, item.colorResId), PorterDuff.Mode.SRC_IN)
    }
iconImage.setBackgroundCompat(shapeDrawable)

score 0 · Answer 3 · answered Jul 30 '22 at 11:41

0

Try to add android:padding="1dp" or app:contentPadding="1dp" on the ShapeableImageView
and check the overlay.
It worked for me, based on
https://github.com/material-components/material-components-android/issues/1329

answered Jul 30 '22 at 11:41

darrk

51
4

score 0 · Answer 4 · answered Jun 07 '23 at 11:15

0

Removing android:hardwareAccelerated="false" from manifest solves the problem. See discussion here

answered Jun 07 '23 at 11:15

Julia B

35
5

ShapeableImageView has black overlay

4 Answers4