Fresco: Change overlay dynamically

[djuranm]

I've been using SimpleDraweeView and it's param fresco:overlayImage successfully and now I would like to change that drawable in java RecyclerView.onBindViewHolder method. Any suggestions?

[yrom]

It seems there is no way to reset SimpleDraweeView's 'overlay' in java code. Have you tried to use setControllerOverlay(drawable) on its SettableDraweeHierarchy?

[djuranm]

thx @yrom for your reply. Yes, I have tried any reasonable and unreasonable approach but in vain

[yrom]

@djuranm
what i mean is setting overlay in code and remove 'fresco:overlayImage' in xml:

@Override
public void onBindViewHolder(ViewHolder holder, int i) {
    // 'image' in 'holder' is a SimpleDraweeView
    holder.image.setImageURI(...);      // set image first
    GenericDraweeHierarchy hierarchy = holder.image.getHierarchy();  // get SettableDraweeHierarchy
    RoundingParams roundingParams = hierarchy.getRoundingParams();
    RoundedColorDrawable roundedColorDrawable = new RoundedColorDrawable(Color.RED);  // construct an overlay drawable
    roundedColorDrawable.setRadii(roundingParams.getCornersRadii())
    roundedColorDrawable.setCircle(false);
    hierarchy.setControllerOverlay(roundedColorDrawable);  // set to hierarchy
    ...
}

these codes do work for me..

[kaedea]

DraweeHierarchy handlers all the layers of drawble in DraweeView.

[IanChilds]

That won't work, it is for the controller only. We don't currently permit changing the hierarchy overlay dynamically.

[plamenko]

No, do NOT use setControllerOverlay. This only to be used by controller.
At the moment we do not support overlay image to be changed. You can either build another hierarchy, or, If you are building your hierarchy programmatically, you can set SettableDrawable as overlay. SettableDrawable allows you to change the underlying drawable.

[sagartrehan]

@plamenko I have set "app:overlayImage" drawable on SimpleDraweeView in xml layout for adding selector ripple effect on top of SimpleDraweeView. Setting "overlayImage" attribute correctly showing ripple effect on image but hot spot is always showing from center. To solve this I need the overlayImage drawable that I set in xml resource but I didn't find any method to get overlayImage drawable programmatically.

If I prepare GenericDraweeHierarchy programmatically then I can prepare overlayImage drawable and set to it and later I can add touch listener for adding HotSpot.

SimpleDraweeView image = (SimpleDraweeView) findViewById(R.id.image);
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(mContext.getResources());
Drawable overlayImage = getDrawable(R.drawable.image_selector);
builder.setOverlay(overlayImage);

image.setHierarchy(builder.build());

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
view.setOnTouchListener(new View.OnTouchListener() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onTouch(View v, MotionEvent event) {
if (overlayImage != null) {
overlayImage.setHotspot(event.getX(), event.getY());
}
return false;
}
});
}

But I do not want to create GenericDraweeHierarchy programmatically as I personally do not like to create hierarchy programmatically. Please suggest any method to get overlayImage drawable that I had set in xml layout resource.

[plamenko]

Hi @sagartrehan. Accessing a drawable, and replacing it are two different things. This issue is not related to the problem you explained so let's keep track of hotspot issue in #912.

[baitouwei]

+1,need change overlay dynamically.Please fix it.

[marcosalis]

+1
I think it's a pretty common user scenario in RecyclerView and, in general, where there is a list of items managed through an adapter. Just an example: a list of users with their online status. At the moment one has to overlay another view to the SimpleDraweeView; it would be much easier if it could be possible to modify (or remove) the overlay image programmatically.

[ruifcardoso]

You can change the overlay image programmatically using:

GenericDraweeHierarchy hierarchy = simpleDraweeView.getHierarchy();
hierarchy.setOverlayImage(ContextCompat.getDrawable(context, R.drawable.ghost_overlay));

[oprisnik]

Yes, like @ruifcardoso mentioned you can just update the hierarchy accordingly.