CODEWITHSUNDEEP
androidimageviewborder-imagecircleimagecoil
Muhittin Kaya
Muhittin Kaya

Reputation: 71

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

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

Upvotes: 0

Views: 2788

Answers (3)

Sergei S
Sergei S

Reputation: 3077

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

  • add the BorderedCircleCropTransformation class to your project click me

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

Upvotes: 1

fesave
fesave

Reputation: 191

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!

Upvotes: 0

i30mb1
i30mb1

Reputation: 4786

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

Upvotes: 4

Related Questions