Placeholder not hidden on first load. Ugly wrong rounded corners of placeholder look through

[friederikewild]

Glide Version: 4.6.1

Integration libraries: okhttp3-integration (okhttp version: 3.9.1)

Device/Android Version: fails on Google Pixel, Emulator and other phones

Issue details / Repro steps / Use case background:

• I want to load an image and cut it to rounded corners

• During loading or if failing I want a placeholder (defined with the same rounded corners)

• In addition, I want a white border that has the same rounded corners

• Issue happens in the same way both in a list (following the adapter integration) and on a simple screen

• Expected: During loading and on-error I see the placeholder with rounded corners and with white border. On loading (no matter if first one or from cache) I see the picture with rounded corners and white border.

• Actual behavior: Only on the first successful load of the image I get ugly glitches in the corners in the color of my placeholder. This looks like 2 issues:

1. The placeholder is not hidden on loading the image
2. The corners of the placeholder get un-rounded/ignored on successful loading the image

• Even without defining the background image I get this glitch on first loading

Glide load line / GlideModule (if any) / list Adapter code (if any):

val radius = context.resources.getDimensionPixelSize(R.dimen.corner_radius)

GlideApp.with(context)
    .load(pictureUrl)
    .transform(RoundedCorners(radius))
    .placeholder(R.drawable.placeholder_thumbnail_square_primary)
    .error(R.drawable.placeholder_thumbnail_square_primary)
    .transition(DrawableTransitionOptions.withCrossFade()).into(imageView)

• My GlideModule is only setting up cookie handling with okhttp, so don't think this is related.

• Note: I also tried to use the RoundedCornersTransformation from "jp.wasabeef:glide-transformations:3.3.0" instead of RoundedCorners and this leads to the same behaviour. Which is why I believe it's related to the placeholder.

Layout XML (No difference using scaleType=fitCenter):

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:padding="2dp"
            android:scaleType="centerCrop"
            android:background="@drawable/bg_square_rounded_white" />

Define radius in dimens.xml:

<dimen name="corner_radius">8dp</dimen>

placeholder_thumbnail_square_primary.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/colorAccent" />
            <corners android:radius="@dimen/corner_radius" />
            <size
                android:width="24dp"
                android:height="24dp" />
        </shape>
    </item>
    <item
        android:gravity="center"
        android:drawable="@drawable/ic_profile_placeholder" />
</layer-list>

bg_square_rounded_white.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners android:radius="@dimen/corner_radius" />
    <size
        android:width="24dp"
        android:height="24dp" />
</shape>

Stack trace / LogCat:
None

3 Screenshots from the same image in different states:

1. The described glitch with the corners of the placeholder being visible
2. The same placeholder on itself (e.g. by starting app in flight mode)
3. Same image looking great when leaving the activity and returning back

[friederikewild]

On creating a demo project I found the answer to this issue - and was able to fix it without a change to Glide.

When defining my background and the placeholder I had used smaller sizes than needed in the layout to match the default vector size of 24dpx24dp.
However by doing so and using the corner radius, the radius was also zoomed and multiplied when set in a normal way.

By defining the placeholder and the background in the needed size I could get rid of this glitch on first loading. See this commit: friederikewild/demoGlideTransformations@2edf3b4

However, I'm not sure why the placeholder corner radius was adjusted on loading the image or why it was still visible after the image is loaded. But when using a correctly defined placeholder this isn't a big issue. I'll keep the issue open, just in case it is an easy fix to ensure the placeholder gets set to hide on loading.

[weidongjian]

I have the same problem in glide 4.7.1.
在4.7.1版本上也有同样的问题

[friederikewild]

@weidongjian Have you seen my demo project? I managed to fix it on my end, by tweaking the way I define the placeholders.

[weidongjian]

@friederikewild But it is still a bug for glide, it not remove placeholder after load image successful

[friederikewild]

@weidongjian That's correct. But at least with this trick, it is not an urgent bug to be fixed.

[stale]

This issue has been automatically marked as stale because it has not had activity in the last seven days. It will be closed if no further activity occurs within the next seven days. Thank you for your contributions.

[chongbo2013]

I have the same problem, please help me.
glide.asBitmap().load(mData.topic.icon.url) .apply(new RequestOptions().placeholder(R.drawable.placeholder_drawable_bg) .error(R.drawable.placeholder_drawable_bg).transform(new RoundedCornersTransformation(Commons.dip2px(getApplicationContext(),10), 0, RoundedCornersTransformation.CornerType.ALL))) .transition( new BitmapTransitionOptions().withCrossFade()) .into(iv_topic_avatar);

[friederikewild]

@chongbo2013 Have you checked out my linked demo project? I agree this is a bug on the glide lib, but at least the above link to my highlighted changes allow to work around this issue by preparing the placeholder in a suitable way. Hope it will help you too.

[chongbo2013]

@friederikewild The booth map does not load at the beginning and does not disappear after loading, withCrossFade

[chongbo2013]

@friederikewild do u have facebook ? can u help me. thank u.

[sjudd]

See http://bumptech.github.io/glide/doc/transitions.html#cross-fading-with-placeholders-and-transparent-images

[friederikewild]

@chongbo2013 Sorry, I'm in a very busy project phase myself. But have a look at my earlier comment with the changes on how I adjusted my placeholder definition to make it work by applying rounded corners to it and define it in the exact same size as the image it is used for.

If comparing the code doesn't help you, maybe edit your post and provide more information e.g. how the placeholder is defined.

[friederikewild]

@sjudd Thanks for the link. From what I understand there it seems that using DrawableTransitionOptions.withCrossFade() should prevent this described issue, but as you can see from my screenshots and the comments it still leads to issues - unless the placeholder is defined to be transparent at the rounded corners in the same way as the expected loaded image.

Or is this call something else then what DrawableCrossFadeFactory would do to the transition? Sorry, I haven't seen this one before in any example, so not sure how it would be used.

Also, the interesting observation I made and that I am showing on the initial screenshot is that somehow my placeholder's rounded corners got stretched to be less round when an image was loaded with glide to replace it. Just as a fallback on itself the different "rounding" was much less obvious. I was wondering if that might hint to another underlying issue.

[sjudd]

The link says that withCrossFade defaults to not fading out the image that's being replaced. You can enable the cross fade, but it doesn't always look great. TransitionDrawable isn't a perfect class unfortunately.

[friederikewild]

Thanks for the clarification @sjudd :) now I got it. So the issue I was initially observing is down to using withCrossFade with default behaviour and is kind of expected then as not looking ideally with rounded corners?

[stale]

This issue has been automatically marked as stale because it has not had activity in the last seven days. It will be closed if no further activity occurs within the next seven days. Thank you for your contributions.

[Ariorick]

Experiencing this problem on 4.7.1. Placeholder is vector drawable, might be related in some way. If the image is already cached, bug is not reproduced. Placeholder is not corrupted in any way, but it stays under loaded png image with transparency

Here's my code.
Glide.with(this.icon.getContext() .getApplicationContext()) .load(imagepath) .apply(new RequestOptions().placeholder(ContextCompat.getDrawable(this.icon.getContext(), R.drawable.placeholder)) .priority(Priority.IMMEDIATE)) .transition(DrawableTransitionOptions.withCrossFade()) .into(this.icon);
And yes, friederikewild, I've seen your post, but is's still a bug that needs to be fixed

[c0dehunter]

Chimming in. I too would be grateful to see this resolved.

[sjudd]

Locking this so the answer doesn't get hidden: http://bumptech.github.io/glide/doc/transitions.html#cross-fading-with-placeholders-and-transparent-images