ShapeableImageView has black overlay

user_9654570 0
Viewed 4568

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:

enter image description here

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>
kotlin android-xml android
3 Answers

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

user_56950910

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)
user_38094450
user_35484790
Related