Strange issue in using placeholderImage in xml on SimpleDraweeView

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.

[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.