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"/>

score 4 · Answer 1 · answered Nov 30 '20 at 07:39

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" />

score 0 · Answer 2 · answered Apr 29 '21 at 14:45

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!

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

2 Answers2