Fresco: Strange issue in using placeholderImage in xml on SimpleDraweeView

[frodberserk]

I am using this code in my xml:

   <com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:padding="16dp"
    fresco:placeholderImage="@drawable/_emergency_contact"
    fresco:roundAsCircle="true" />

Drawable _emergency_contact.png: http://i.imgur.com/8tzBJF6.png

Rendered image: http://i.imgur.com/yLrpWlQ.png

Some lines are coming on the sides of the image. Looks like some bug.

[massimocarli]

Could you please provide us more information about the problem? Does it appear on different type of device, emulator or it always happen to you? I've just created a sample application to test the component with the picture you sent us and I cannot reproduce the problem. I've tested it with a Samsung S5 (Lollipop) and Emulator with Kitkat.

[frodberserk]

Actually the image link was just a screenshot of the image. The actual image is: http://i.imgur.com/ygE3BZZ.png
Please check this one.

I am getting this behaviour in my nexus 5 with lollipop version 5.1.1.

[massimocarli]

Also with this image I cannot reproduce the problem. Are there other components into the same layout? Are you managing the SimpleDraweeView also from code?

[massimocarli]

Another questions: are there different resolutions for the same image? Into which qualification folder are you using it?

[massimocarli]

OK, got it. I've put the image into the /res/drawable-xhdpi and I got the problem you mentioned. The problem is even worse if we put the image into the /res/drawable-xxhdpi.
To fix your problem you could try to use a placeholderImageScaleType like in this case:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:padding="16dp"
    fresco:placeholderImage="@drawable/_emergency_contact"
    fresco:placeholderImageScaleType="fitCenter"
    fresco:roundAsCircle="true"/>

[frodberserk]

Yes, my nexus uses xxhdpi. The problem is in placeholderImage setting. If I set the same drawable as uri, it works fine.

[frodberserk]

Will try the placeholderImageScaleType. Thanks for quick help. Also, hoping to see this fixed in upcoming versions. Thanks.

[balazsbalazs]

I know this is strange but this is working as intended.

This is mentioned in the documentation at rounding: http://frescolib.org/docs/rounded-corners-and-circles.html

"Due to a limitation of Android's BitmapShader, if the image doesn't fully cover the view, instead of drawing nothing, edges are repeated. One workaround is to use a different scale type (e.g. centerCrop) that ensures that the whole view is covered."

This is what "edges are repeated" means. If the view is bigger than the placeholder image the edges will repeat. We couldn't find a better way to solve this (the other solution is to repeat the whole image) and we should publish a blog post about how rounding works. If anyone has a better idea we're open to it :)

There are two workarounds that you can do:

1. Use OVERLAY_COLOR mode. This works perfectly if your background is a solid color. This doesn't have any limitation and the performance is also good.
2. If you can't use OVERLAY_COLOR then add 1px invisible border to your image (that way the invisible border is the one that gets repeated).

[plamenko]

Or you can just add 1px transparent border to your image and then transparent pixels are going to be repeated (i.e. it will look correct). And I mean the image file (png) has to be saved with this transparent 1px border.