Android Code To Make Imageview Round Not Working

June 08, 2024 Post a Comment

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] J

Solution 1:

Why not using third party ?

Try this code

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

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

 public Bitmap getRoundedBitmap(Bitmap bitmap){
        BitmapcircleBitmap= Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        BitmapShadershader=newBitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        Paintpaint=newPaint();
        paint.setShader(shader);
        paint.setAntiAlias(true);
        Canvasc=newCanvas(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 !

Solution 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:

RoundedBitmapDrawabledrawable= 
       RoundedBitmapDrawableFactory.create(context.getResources(), bitmap)

drawable.setCircular(true);

Use this drawable in your ImageView.

Solution 3:

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"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_pressed="false"><shapeandroid:shape="oval"><solidandroid: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!

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.

finalImageViewimageView= (ImageView) findViewById(R.id.group_icon_jsoup);
    Picasso.with(YourActivity.this).load("http://i.imgur.com/DvpvklR.png")
            .resize(100, 100)
            .into(imageView, newCallback() {
                @OverridepublicvoidonSuccess() {
                    BitmapimageBitmap= ((BitmapDrawable) imageView.getDrawable()).getBitmap();
                    RoundedBitmapDrawableimageDrawable= RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);
                    imageDrawable.setCircular(true);
                    imageDrawable.setCornerRadius(Math.max(imageBitmap.getWidth(), imageBitmap.getHeight()) / 2.0f);
                    imageView.setImageDrawable(imageDrawable);
                }
                @OverridepublicvoidonError() {
                    imageView.setImageResource(R.drawable.amanda);
                }
            });

Solution 4:

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);
        }
        Bitmapmask= BitmapFactory.decodeResource(context.getResources(), shapeImage);

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

        Bitmapresult= Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
        CanvasmCanvas=newCanvas(result);

        Paintpaint=newPaint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(newPorterDuffXfermode(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.

Solution 5:

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



publicclassRoundedTransformationimplementsTransformation{


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

@Overridepublic 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;
}

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

}

iklangratisku7