Fresco: dotted/dash border around image

[vipulasri]

Is there a way to apply dotted/dash border around image (rounded image view, rounded corners) and setting padding between border and image view?

[oprisnik]

You can round the image and add a padding (fresco:roundingBorderPadding).
The dotted / dashed border can be done by setting a background (or overlay) drawable with the effect you want (fresco:backgroundImage or fresco:overlayImage).

All of the parameters also have Java setters for the GenericDraweeHierarchy

[vipulasri]

@oprisnik Padding between image and border not working with fresco:roundingBorderPadding. And why border drawn is inside the image not outside image, how to implement border outside image?

[oprisnik]

You can change the Showcase sample app as follows:
activity_drawee_simple.xml

  <com.facebook.drawee.view.SimpleDraweeView
      android:id="@+id/drawee_view"
      android:layout_width="@dimen/drawee_width_medium"
      android:layout_height="@dimen/drawee_height_medium"
      fresco:roundAsCircle="true"
      fresco:roundingBorderPadding="10dp"
      fresco:overlayImage="@drawable/outline"
      />

Add a new Drawable called outline.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
  <stroke
      android:width="4dp"
      android:dashWidth="4dp"
      android:dashGap="4dp"
      android:color="@color/accent"/>
</shape>

Looks like this:

[arpanbag001]

You can change the Showcase sample app as follows:
activity_drawee_simple.xml

  <com.facebook.drawee.view.SimpleDraweeView
      android:id="@+id/drawee_view"
      android:layout_width="@dimen/drawee_width_medium"
      android:layout_height="@dimen/drawee_height_medium"
      fresco:roundAsCircle="true"
      fresco:roundingBorderPadding="10dp"
      fresco:overlayImage="@drawable/outline"
      />

Add a new Drawable called outline.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
  <stroke
      android:width="4dp"
      android:dashWidth="4dp"
      android:dashGap="4dp"
      android:color="@color/accent"/>
</shape>

Looks like this:

How to dynamically change the number of dashes in the border? Also, is there any way to change color of few dashes dynamically, like what happens in "Stories" view of social media apps.

[oprisnik]

This is more a general Android question, so I think you should ask that on StackOverflow. I'd either go with a custom drawable or see how the inflated drawable works above and modify that.

[arpanbag001]

This is more a general Android question, so I think you should ask that on StackOverflow. I'd either go with a custom drawable or see how the inflated drawable works above and modify that.

I was asking whether Fresco is having any built in functionality to do the same.
Anyway, I got it. Thanks. :)

[oprisnik]

Oh I see. Yeah, unfortunately we do not have this built-in to the library itself since this is a very specific feature that depends on the given product and requirements. We also don't have anything similar in our sample apps as far as I recall unfortunately.