Add support for applying transformation placeholder/error drawables

[Stonos]

Is your feature request related to a problem? Please describe. Suppose an ImageView showing the user's avatar. The user's avatar is loaded with a placeholder and has the CircleCropTransformation transformation applied to it. The placeholder will not be round which may cause the app to not look right on places where the avatar is expected to always be a circle.

Describe the solution you'd like It should be possible to apply tranformations to the placeholder/error drawable as well. This could either be something like transformationsPlaceholder(...) or enablePlaceholderTransformations(true).

Another option would be to provide an overload on placeholder that accepts a RequestDisposable as an argument (similar to how Glide does it). This would also solve #27.

[alanleedev]

I'm running into the same problem, trying to set a placeholder image that is circle cropped. I'm getting a square placeholder image then the circle cropped image that is loaded. Is this issue still not resolved?

[UPDATE] Learned that Glide may not support this as well. For a simple workaround, created circle cropped placeholder image which for my purposes is probably better.

[mario]

@colinrtwhite do you want this functionality?

[colinrtwhite]

I'd like to add this eventually as part of supporting chaining requests (similar to this issue https://github.com/coil-kt/coil/issues/27). I haven't settled on an API yet, though.

[gowthamgts]

any updates on chaining requests? would love to have it.

[jaswinder01]

Hi, any update on this enhancement, or If anyone can help how we can transform the error placeholder.

[Daphne-CoffeeIT]

Any updates?

[yektasarioglu]

This enhancement would be great. For those who look for a basic workaround see below;

sampleImageView.load(imageUrl) {
    target(
        onSuccess = {
            sampleImageView.load(imageUrl) {
                crossfade(true)
                transformations(RoundedCornersTransformation(30f))
            }
        },
        onError = {
            handleError(it)
        }
    )
}

I know, it looks ugly as hell 🤮

[appdev]

Hi, any update on this enhancement, or If anyone can help how we can transform the error placeholder.

[android-1995]

@colinrtwhite Is this enhancement planned? I really need it

[OxygenCobalt]

Seconding here that this I also really need this. I use rounded corners on my AppWidget images and using the RoundedCornersTransformation with coil is the only feasible way I can send a rounded error drawable to the widget.

[Qdafengzi]

so long time never update, lose hope

[appdev]

I solved this problem use Gilde 😈

[Sanaebadi97]

fun ImageView.loadImage(url: String?) {
    load(url) {
        transformations(RoundedCornersTransformation(context.getDp(R.dimen.radius_image))).placeholder(
            R.drawable.profile_avatar_logo
        ).error(R.drawable.profile_avatar_logo)
    }

}

fun ImageView.loadCircleImage(url: String?) {
    load(url) {
        transformations(CircleCropTransformation()).placeholder(R.drawable.profile_avatar_logo)
            .error(R.drawable.profile_avatar_logo)
    }
}

fun ImageView.loadImage(id: Int) {
    load(id) {
        transformations(RoundedCornersTransformation(context.getDp(R.dimen.radius_image))).placeholder(
            R.drawable.profile_avatar_logo
        ).error(R.drawable.profile_avatar_logo)
    }
}

fun ImageView.loadCircleImage(id: Int) {
    load(id) {
        transformations(CircleCropTransformation()).placeholder(R.drawable.profile_avatar_logo)
            .error(R.drawable.profile_avatar_logo)
    }
}

[iskaldvind]

I'm having the same issue. Also I've used CircleImageView from an external library to get round images, but Coil don't change image from placeholder to downloaded one, so I tried to use basic ImageViews and it seems there topic-related issue with them too. Almost three years without progress?

[smzh369]

Currently I think using oval shape is the best choice:

<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp" android:color="#ffffffff" />
    <solid android:color="#ff7be0dd" />
</shape>

fun ImageView.loadCircleImage(image: Any?) = load(image) {
    crossfade(true)
    transformations(CircleCropTransformation())
    placeholder(R.drawable.round_7be0dd_stroke_white)
    error(R.drawable.round_ff8bff_stroke_white)
}