Coil: RoundedCornersTransformation is not working properly

[JcMinarro]

Describe the bug
Corners are not rounded on all items of my RecyclerView.
Some pictures are rounded but other ones not.

To Reproduce
I have a RecyclerView that I initialize with a GridLayoutManager with three columns.
For every items, it is inflating a view with a layout that will be squared by a constraint into the constraintLayout that I added. The layout is the following one:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/file_preview_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:clickable="true"
    android:focusable="true"
    >

  <ImageView
        android:id="@+id/fileImage"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="1dp"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

I am loading the picture when the onBindViewHolder adapter method is called. On it I load an url with the following code:

fileImage.load(url) { transformations(RoundedCornersTransformation(16)) }

Expected behavior
All corners should be rounded when they are shown on a RecyclerView

Logs/Screenshots
As you can see, only one picture is corners rounded. All items are inflating the same layout

Library version
7.0.0

Related Issue

96

[colinrtwhite]

This is because RoundedCornersTransformation only rounds the corners of the Bitmap without cropping to the correct aspect ratio. However, I agree that it would be better and more intuitive to crop to the size of the Target as part of this Transformation.

This will require a breaking change to the Transformation interface:

interface Transformation {

    fun key(): String

    suspend fun transform(pool: BitmapPool, input: Bitmap, size: Size): Bitmap
}

[OhhhThatVarun]

If you remove this android:scaleType="centerCrop" it will work fine. (If you don't want to keep it).

[JcMinarro]

@colinrtwhite Any workaround in the meantime?
I understand that it needs the size of the target (Or at least some size) to perform the roundedCorners transformation, but, why it is working for some random pictures?

@Raj-Varun I can't remove it because original pictures are not squared, but I need to show them as square :(

[OhhhThatVarun]

Try this replace this with your image view

 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

<androidx.appcompat.widget.AppCompatImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

[colinrtwhite]

@JcMinarro If your minSDK is 21+, you could crop the image's corners as part of the ImageView (here's an example). This will also be better for performance.

I'll update this thread when the fix is in 0.8.0-SNAPSHOT.

[jguerinet]

@colinrtwhite Did this make the cut for 0.8.0, or was it pushed back to a future version?

[colinrtwhite]

@jguerinet This didn't make it into 0.8.0, unfortunately.

I had a couple concerns with how to handle transformations that depend on the size of the target (like this one). If we crop the image based on the size of the target, we'll need to modify the cache key so it isn't served to a target with a different size. Rather than rush a breaking change, I pushed it back to a follow up release.

[jguerinet]

@colinrtwhite Completely get it, thanks for the update! The alternative you proposed 3 weeks ago works just as well and is not as resource heavy in any case. Thanks for the great work!

[mt131]

not work on coil 0.8.0

[3mph4515]

Maybe someone wrote his own Transformation implementation and ready to share?

[colinrtwhite]

This should now work as intended in master. To get access to this change right away, you can depend on the snapshot. Else, it'll be released on Coil 0.9.0 stable very soon.

[FrostRocket]

Updated to latest, 0.9.1, rounded transformation is now being applied to the ImageView itself. Verified 👍