Android code to make imageView round not working

Question

I am trying to make my ImageView round. I have written the following code to make it appear round but somehow it is still showing square ImageView. [Using picasso to fetch image]

Java code:

ImageView iv = (ImageView) addLinkDialog.findViewById(R.id.group_icon_jsoup);
Picasso.with(getBaseContext()).load(GroupImageUrl).into(iv);
iv.setBackgroundResource(R.drawable.icon_img);

ImageView code:

<ImageView
    android:id="@+id/group_icon_jsoup"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:layout_gravity="center"
    android:layout_margin="8dp"
    android:background="@drawable/icon_img" />

@drawable/icon_img.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/circle"/>
</layer-list>

@drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
<solid android:color="@android:color/transparent" />

<stroke
    android:width="10dp"
    android:color="@android:color/white" />
</shape>

http://stackoverflow.com/questions/22105775/imageview-in-circular-through-xml — Ganesh Gudghe, Feb 07 '17 at 06:15
@GaneshPatil I have taken code from the same place. It isnt working. May be because I am setting image using picasso. — Srujan Barai, Feb 07 '17 at 06:17
try this one rounded image with picaso http://stackoverflow.com/questions/26112150/android-create-circular-image-with-picasso — Ganesh Gudghe, Feb 07 '17 at 06:19
refer this http://stackoverflow.com/questions/17655264/how-to-add-a-shadow-and-a-border-on-circular-imageview-android?rq=1 or another approach would be http://stackoverflow.com/questions/11932805/cropping-circular-area-from-bitmap-in-android/28096369#28096369 — Manohar, Feb 07 '17 at 06:21
Have enough answers pointing to third party libraries. Would want to know why the code I have posted in question isnt working, — Srujan Barai, Feb 07 '17 at 06:28

score 4 · Answer 1 · answered Feb 07 '17 at 06:18

Why not using third party ?

Try this code

Bitmap picture = BitmapFactory.decodeResource(getResources(), R.mipmap.add_image);

ImageView imageView = (ImageView) findViewById(R.id.imgProfilePicture);
imageView.setImageBitmap(getRoundedBitmap(picture));

 public Bitmap getRoundedBitmap(Bitmap bitmap){
        Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        Paint paint = new Paint();
        paint.setShader(shader);
        paint.setAntiAlias(true);
        Canvas c = new Canvas(circleBitmap);
        c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
        return circleBitmap;
    }

Your xml file

  <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imgProfilePicture"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="20dp"
        app:civ_border_width="3dp"
        app:civ_border_color="@color/light_gray" />

and add this in build.gradle

 compile 'de.hdodenhof:circleimageview:2.1.0'

Cirular ImageView Done !

I wanted to know what my code isnt working. Using a lib just to set imagview round, didnt seem good to me. — Srujan Barai, Feb 07 '17 at 06:21
Why can't you use a 3rd party library? When it comes to legal standard the usage availablity depends significantly on the license provided by the developer of the 3rd party library. — JoxTraex, Feb 07 '17 at 06:22

Abhi · Answer 2 · 2017-02-07T06:30:39.120

2

Do you want to use only code or you are ok with library too? If you are ok with library may I suggest using this library, helped me a lot. If you don't want to use library, you can use RoundedBitmapDrawable:

RoundedBitmapDrawable drawable = 
       RoundedBitmapDrawableFactory.create(context.getResources(), bitmap)

drawable.setCircular(true);

Use this drawable in your ImageView.

edited Feb 07 '17 at 06:30

answered Feb 07 '17 at 06:15

Abhi

2,115
2
18
29

1

Thanks for the reference. But I would prefer not to use external libraries just to make imageView round. – Srujan Barai Feb 07 '17 at 06:18
@SrujanBarai Ok, give me few minutes I'll update the answer. – Abhi Feb 07 '17 at 06:19
3

when the link is broken your answer has no value – Charuක Feb 07 '17 at 06:21

score 1 · Accepted Answer · edited May 23 '17 at 11:54

Major problem will be when you use Picasso to set image again to set to imageView view bounds not to the its background that you create.

If you programmatically set a one it will override your background!

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</selector>

You can set this as background of your view.Then try to use view.setBackgroundResource(R.drawable.icon_img); . you will notice the change!

You can go through Add a background image to shape in xml Android

Mask ImageView with round corner background

to check the various ways people tried out here!

But with Picasso you can do this directly with out other 3rd parties.

  final ImageView imageView = (ImageView) findViewById(R.id.group_icon_jsoup);
    Picasso.with(YourActivity.this).load("http://i.imgur.com/DvpvklR.png")
            .resize(100, 100)
            .into(imageView, new Callback() {
                @Override
                public void onSuccess() {
                    Bitmap imageBitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
                    RoundedBitmapDrawable imageDrawable = RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);
                    imageDrawable.setCircular(true);
                    imageDrawable.setCornerRadius(Math.max(imageBitmap.getWidth(), imageBitmap.getHeight()) / 2.0f);
                    imageView.setImageDrawable(imageDrawable);
                }
                @Override
                public void onError() {
                    imageView.setImageResource(R.drawable.amanda);
                }
            });

Not perfect though. It is giving me a weird non circular border which is visible if I put a dark colour in parent layout. But that seems like a problem of pixel calculation in picasso library. My image view wont take new images in a single activity lifecycle, so this would work for me as of now. — Srujan Barai, Feb 07 '17 at 07:31
@Srujan Barai you can get a perfect solution using paint or by masking the image and your issue might be because the resize value on my example — Charuක, Feb 07 '17 at 07:33

score 1 · Answer 4 · answered Feb 07 '17 at 07:40

Hello @Surjan here is the code which help to create a image in Any shape which you want only you need image of your choice shape with transparent and combination of any other color, following was the example :

protected Bitmap getPinnedImage(Bitmap original, int shapeImage) {
        if (original == null) {
            original = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_round_shape);
        }
        Bitmap mask = BitmapFactory.decodeResource(context.getResources(), shapeImage);

        original = Bitmap.createScaledBitmap(original, mask.getWidth(), mask.getHeight(), true);

        Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas mCanvas = new Canvas(result);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mCanvas.drawBitmap(original, 0, 0, null);
        mCanvas.drawBitmap(mask, 0, 0, paint);
        paint.setXfermode(null);
        return result;
    }

Here is the tow parameter first one is your original bitmap and second one is the your shape drawable, like following was the pin shape

now passing after this drawable you can get your image in pin shape no need to access any third party library.

I havent tried this I as already found a temporary solution to my problem. This seems to be a good solution but I havent worked with canvas much. Will use if I face issues with my current solution — Srujan Barai, Feb 07 '17 at 07:43
Then no problem, But if you when need in complex shape then you can use it, And Thanks for the votup. — Dhaval Solanki, Feb 07 '17 at 08:35

score 0 · Answer 5 · answered Feb 07 '17 at 06:51

Try this,

ImageView iv = (ImageView) addLinkDialog.findViewById(R.id.group_icon_jsoup);

Picasso.with(getBaseContext()).load(GroupImageUrl).transform(new RoundedTransformation(5,15, Color.parseColor("#27a3cb"))).fit().into(iv);



public class RoundedTransformation implements Transformation {


private int mBorderSize;
private int mCornerRadius = 0;
private int mColor;

public RoundedTransformation(int borderSize, int color) {
    this.mBorderSize = borderSize;
    this.mColor = color;
}

public RoundedTransformation(int borderSize, int cornerRadius, int color) {
    this.mBorderSize = borderSize;
    this.mCornerRadius = cornerRadius;
    this.mColor = color;
}

@Override
public Bitmap transform(Bitmap source) {
    int width = source.getWidth();
    int height = source.getHeight();

    Bitmap image = Bitmap.createBitmap(width, height, source.getConfig());
    Canvas canvas = new Canvas(image);
    canvas.drawARGB(0, 0, 0, 0);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Rect rect = new Rect(0, 0, width, height);


    if(this.mCornerRadius == 0) {
        canvas.drawRect(rect, paint);
    }
    else {
        canvas.drawRoundRect(new RectF(rect),this.mCornerRadius, this.mCornerRadius, paint);
    }

    paint.setXfermode(new PorterDuffXfermode((PorterDuff.Mode.SRC_IN)));
    canvas.drawBitmap(source, rect, rect, paint);

    Bitmap output;

    if(this.mBorderSize == 0) {
        output = image;
    }
    else {
        width = width + this.mBorderSize * 2;
        height = height + this.mBorderSize * 2;

        output = Bitmap.createBitmap(width, height, source.getConfig());
        canvas.setBitmap(output);
        canvas.drawARGB(0, 0, 0, 0);

        rect = new Rect(0, 0, width, height);

        paint.setXfermode(null);
        paint.setColor(this.mColor);
        paint.setStyle(Paint.Style.FILL);

        canvas.drawRoundRect(new RectF(rect), this.mCornerRadius, this.mCornerRadius, paint);

        canvas.drawBitmap(image, this.mBorderSize, this.mBorderSize, null);
    }

    if(source != output) source.recycle();

    return output;
}

@Override
public String key() {
    return "bitmapBorder(" +
            "borderSize=" + this.mBorderSize + ", " +
            "cornerRadius=" + this.mCornerRadius + ", " +
            "color=" + this.mColor +")";
}

}

Android code to make imageView round not working

5 Answers5

Linked