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>

Answer 1

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.

Answer 2

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);
                }
            });

Answer 3

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 +")";
}

}

Answer 4

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.

Answer 5

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 !