Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RoundedCornersTransformation is not working properly #126

Closed
JcMinarro opened this issue Sep 25, 2019 · 12 comments · Fixed by #209
Closed

RoundedCornersTransformation is not working properly #126

JcMinarro opened this issue Sep 25, 2019 · 12 comments · Fixed by #209
Labels
bug Something isn't working
Milestone

Comments

@JcMinarro
Copy link

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
photo_2019-09-25_10-30-31

Library version
7.0.0

Related Issue
#96

@JcMinarro JcMinarro added the bug Something isn't working label Sep 25, 2019
@colinrtwhite
Copy link
Member

colinrtwhite commented Sep 26, 2019

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
Copy link

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

@JcMinarro
Copy link
Author

@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
Copy link

OhhhThatVarun commented Oct 1, 2019

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
Copy link
Member

@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
Copy link

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

@colinrtwhite
Copy link
Member

@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
Copy link

@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
Copy link

mt131 commented Nov 1, 2019

not work on coil 0.8.0

@3mph4515
Copy link

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

@colinrtwhite
Copy link
Member

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.

@0xMatthewGroves
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants