How to draw border to an imageview with Coil in Android?

Question

I am using 'Coil' to have circular imageview. I want to draw a circular border to this circular imageview. How to do it with using Coil?

This is where I load the image:

 binding.imageviewFaceDetectionSelfieCircle.load(R.drawable.ic_avatar) {
            transformations(CircleCropTransformation())
        }

This is where the image^s XML:

<ImageView
        android:id="@+id/imageview_face_detection_selfie_circle"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/imageview_face_detection_id_card"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="70dp"/>

Answer 1

There is no such option in Coil. To draw border you can use ShapableImageView from "com.google.android.material:material:1.2.0"

    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:strokeColor="@color/blue"
        app:strokeWidth="3dp" />

Answer 2

If you check the Coil's Pull Requests, you can see here that the user t-kurimura tried to implement the functionality that you want. See his commit and make your own CircleCropTransformation class. It's very simple and it works! I made it in my project!

Answer 3

It is the old question, but there is no particular answer. I will share my variant

• add the BorderedCircleCropTransformation class to your project https://gist.github.com/sergestanislavsky/52c76a5a0b61cf5f76e39724916c6f88

An example of using

....
if (isRoundedImage) {
    transformations(
       BorderedCircleCropTransformation(
       dpToPx(LocalContext.current, borderImageWidth), borderImageColor.toArgb())
    )
}
....
fun dpToPx(context: Context, dp: Int): Float {
    return dp * context.resources.displayMetrics.density
}
....

p.s. more variants are there https://stackoverflow.com/a/78075887/916826