Circular Imageview in android

Question

I want circular ImageView in my app. I found some code but this is only round the corner image not to circle. Here is my code. Also check the image.

   public class CircularImageView extends android.support.v7.widget.AppCompatImageView {

public CircularImageView(Context context) {
    super(context);
}

public CircularImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();

    Bitmap roundBitmap = getRoundBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getRoundBitmap(Bitmap bmp, int radius) {
    Bitmap sBmp;

    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
        float factor = smallest / radius;
        sBmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
    } else {
        sBmp = bmp;
    }

    Bitmap output = Bitmap.createBitmap(radius, radius,
            Bitmap.Config.ARGB_8888);


    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, radius, radius);

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(radius / 2 + 0.7f,
            radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(sBmp, rect, rect, paint);

    return output;
}

 }

And Here is xml file

 <com.example.CircularImageView
          android:layout_width="70dp"
          android:layout_height="70dp"
          app:srcCompt="@drawable/dummy />

I read many answers on stackoverflow but nothing found according to my requirements. I don't want to use any library I want to create my own code.
I'm new in android can you please let me know want I'm missing in my code.

"I found some code but this is only round image not to circle" -- please explain the difference. You might consider uploading an image somewhere and linking to it from your "question". "nothing found according to my requirements" -- please explain, **in detail**, what your "requirements" are. — CommonsWare, Apr 12 '17 at 19:40
@CommonsWare please check I update my question. Round means it only round corners — Fiverr Projects, Apr 12 '17 at 19:49
Well, when I search `android imageview rounded corners` on Google, I find a variety of solutions. Clearly, you must have made a similar search. When you tried [these answers](http://stackoverflow.com/q/20743859/115145) and [this blog post](http://www.viralandroid.com/2015/11/how-to-make-imageview-image-rounded-corner-in-android.html) and so forth, what problems did you encounter? — CommonsWare, Apr 12 '17 at 20:03

score 3 · Answer 1 · edited Mar 19 '18 at 04:20

A simple way to create RoundedImageView using ImageView and CardView

Check this example: https://github.com/SergeySharipov/RoundedImageView

Add the following dependency to your app module's build.gradle file:

 dependencies {
        implementation 'com.android.support:cardview-v7:27.1.0'
 }

Add the code to your layout and change "YOUR_PICTURE":

<android.support.v7.widget.CardView
        android:id="@+id/card_view_for_image"
        android:layout_margin="2dp"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:cardCornerRadius="100dp">

        <ImageView
            android:id="@+id/rounded_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/YOUR_PICTURE" />

</android.support.v7.widget.CardView>

Ferdous Ahamed · Accepted Answer · 2017-04-12T20:38:19.777

Try to extend CircularImageView from ImageView instead of android.support.v7.widget.AppCompatImageView.

CircularImageView.java

package com.ferdous.stackoverflowanswer;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class CircularImageView extends ImageView {

    public CircularImageView(Context context) {
        super(context);
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap roundBitmap = getRoundBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getRoundBitmap(Bitmap bmp, int radius) {
        Bitmap sBmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sBmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
        } else {
            sBmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Bitmap.Config.ARGB_8888);


        Canvas canvas = new Canvas(output);

        final String color = "#BAB399";
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor(color));
        canvas.drawCircle(radius / 2 + 0.7f, radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sBmp, rect, rect, paint);

        return output;
    }

}

In your XML, try using attribute android:src instead of app:srcCompt:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <com.ferdous.stackoverflowanswer.CircularImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/dummy"
        android:background="#ff0000"/>

</LinearLayout>

OUTPUT:

Hope this will help~

@FiverrProjects I have updated my answer. See the attached image for output of my code. Hope it will help — Ferdous Ahamed, Apr 12 '17 at 20:39
@FiverrProjects If my answer seems useful then please give an up vote. Thanks in advance :) — Ferdous Ahamed, Apr 17 '17 at 20:26

score 1 · Answer 3 · edited Nov 27 '18 at 12:41

1

You can use fresco lib for circular image.
You will need just add attribute fresco:roundAsCircle="true" in the xml layout as per the documentation.
Also this library is useful for asynchronous image loading from the web.

edited Nov 27 '18 at 12:41

Agilanbu

2,747
2
28
33

answered Apr 12 '17 at 19:46

Sergio

27,326
8
128
149

I do not want to use any Lib – Fiverr Projects Apr 12 '17 at 19:50

score 0 · Answer 4 · answered Apr 12 '17 at 22:37

Use Piccasso is a library really popular

In your gradle

compile 'com.makeramen:roundedimageview:2.2.1'
compile 'com.squareup.picasso:picasso:2.5.2'

In your code:

Transformation transformation = new RoundedTransformationBuilder()
            .cornerRadiusDp(40)
            .oval(false)
            .build();

    Picasso.with(getApplicationContext())
            .load(//Your url image or bitmap)
            .fit()
            .transform(transformation)
            .into(//Your imageview);

score 0 · Answer 5 · answered Feb 07 '22 at 12:18

I use material libraries shapeable image view.

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/ShapeAppearance.App.Image.Circle"
    />

Put this code below to styles.xml

<style name="ShapeAppearance.App.Image.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
    <item name="android:background">@color/transparent</item>
</style>

For kotlin developers I suggest coil library it has various animations and crop functions :

imageView.load("https://www.example.com/image.jpg") {
   crossfade(true)
   placeholder(R.drawable.image)
   transformations(CircleCropTransformation())
}

score 0 · Answer 6 · answered Jun 08 '22 at 12:06

//add dependencies

implementation 'de.hdodenhof:circleimageview:3.1.0'

//Image Link https://unsplash.com/photos/2LowviVHZ-E

//xml code

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/circleview1"
    android:layout_width="92dp"
    android:layout_height="92dp"
    android:layout_marginTop="60.0dp"
    android:src="@drawable/unslpash"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Circular Imageview in android

6 Answers6

Linked

Related