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>

Answer 1

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