How to use the ShapeableImageView.

README.MD

The Material Components Library introduced with the 1.2.0-alpha03 the new ShapeableImageView.

In your layout you can use:

 <com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/image_view"
      app:srcCompat="@drawable/..." />

Then in your code apply the ShapeAppearanceModel to define your custom corners:

  @ExperimentalImageView
  private void setup() {

    ShapeableImageView imageView = findViewById(R.id.image_view);

    float radius = getResources().getDimension(R.dimen.default_corner_radius);
    imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel()
        .toBuilder()
        .setTopRightCorner(CornerFamily.ROUNDED,radius)
        .build());

  }

Also you can use the shapeAppearanceOverlay attribute in your layout to define the shape with a style.
For example to achieve a circular image:

 <com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/image_view"
      app:shapeAppearanceOverlay="@style/circleImageView"
      app:srcCompat="@drawable/..." />

with:

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

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>
And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

I got same problem ,remove android:hardwareAccelerated="false" from manifest.xml and it should works

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>
And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

I got same problem ,remove android:hardwareAccelerated="false" from manifest.xml and it should works

Okays after digging around for several days, this seemed to work. Seems much like a hack, but again I guess android dev is full of hacks and workarounds. Could you explain why is this happening? because just to prevent the issue I have to turn on hardware acceleration(default behaviour) which comes at a cost of my app consuming more ram and battery..can we do something better?

I am still facing the same problem as faced by @uc-sja
I also remove hardwaeAccelerated attribute from manifest but i still facing the same error

+1 for the black overlay issue.

+1 for the black overlay issue. I couldn't remove the black background

Has anyone solved this error yet? I also got the same error when trying to take a screenshot

+1 for the black overlay issue. I couldn't remove the black background

i found a not very good workaround and that is to set alpha of ImageView to 0.99

How can i set an image from the internet?

How can i set an image from the internet?

Use Glide, it also allows handling corners

Got the same problem, removing android:hardwareAccelerated="false" from manifest solves the problem