Make Image View Rounded (not The Image)

Requirement is to: Req 1 : Fetch images from url R2: save them in cache R3: make ImageView rounded not the image So for R1 & R2 I found a library: http://loopj.com/android-smar

Solution 1:

so this is the minimalistic version:

classRoundImageViewextendsImageView {
    privatestaticfinalintRADIUS=32;
    private Paint mPaint;
    private Paint mSrcIn;
    private RectF mRect;

    publicRoundImageView(Context context) {
        super(context);
//        setBackgroundColor(0xffffffff);
        mSrcIn = newPaint();
        mSrcIn.setXfermode(newPorterDuffXfermode(Mode.SRC_IN));
        mPaint = newPaint(Paint.ANTI_ALIAS_FLAG);
        mRect = newRectF();
    }

    @OverridepublicvoidonDraw(Canvas canvas) {
        Drawabledr= getDrawable();
        if (dr != null) {
            mRect.set(dr.getBounds());
            getImageMatrix().mapRect(mRect);
            mRect.offset(getPaddingLeft(), getPaddingTop());

            intrtc= canvas.saveLayer(mRect, null, Canvas.ALL_SAVE_FLAG);
            // draw DST
            canvas.drawRoundRect(mRect, RADIUS, RADIUS, mPaint);

            canvas.saveLayer(mRect, mSrcIn, Canvas.ALL_SAVE_FLAG);
            // draw SRCsuper.onDraw(canvas);
            canvas.restoreToCount(rtc);
        }
    }
}

or use even shorter one when hardware acceleration is not used and you can use Canvas.clipPath:

classRoundImageViewClippedextendsImageView {
    privatestaticfinalintRADIUS=32;
    private RectF mRect;
    private Path mClip;

    publicRoundImageViewClipped(Context context) {
        super(context);
//        setBackgroundColor(0xffffffff);
        mRect = newRectF();
        mClip = newPath();
    }

    @OverridepublicvoidonDraw(Canvas canvas) {
        Drawabledr= getDrawable();
        if (dr != null) {
            mRect.set(dr.getBounds());
            getImageMatrix().mapRect(mRect);
            mRect.offset(getPaddingLeft(), getPaddingTop());
            mClip.reset();
            mClip.addRoundRect(mRect, RADIUS, RADIUS, Direction.CCW);

            canvas.clipPath(mClip);
            super.onDraw(canvas);
        }
    }
}

Solution 2:

I'm pretty sure you can't "make the ImageView round," since all Views are actually rectangular, so what you're going to have to do is fake it.

Use a method like this to cut a circle from the image:

public Bitmap getRoundedBitmap(Bitmap scaleBitmapImage) {
    inttargetRadius= scaleBitmapImage.getWidth();
    if(targetRadius > scaleBitmapImage.getHeight()) targetRadius = scaleBitmapImage.getHeight();

    BitmaptargetBitmap= Bitmap.createBitmap(targetRadius, targetRadius, Bitmap.Config.ARGB_8888);

    Canvascanvas=newCanvas(targetBitmap);
    Pathpath=newPath();
    path.addCircle(((float) scaleBitmapImage.getWidth() - 1) / 2, ((float) scaleBitmapImage.getHeight() - 1) / 2, (Math.min(((float) scaleBitmapImage.getWidth()), ((float) scaleBitmapImage.getHeight())) / 2), Path.Direction.CCW);

    canvas.clipPath(path);
    BitmapsourceBitmap= scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, newRect(0, 0, sourceBitmap.getWidth(), sourceBitmap.getHeight()), newRect(0, 0, scaleBitmapImage.getWidth(), scaleBitmapImage.getHeight()), null);

    return targetBitmap;
}

Since the clipped part is transparent, it will appear as if the actual View is a circle. Also make sure that the bounds of the View are squared (or that adjustViewBounds="true") else you may get visual distortions in terms of width or height.

Pretty sure that's as close to a "rounded View" as you can actually get.

Solution 3:

How about the solution give by Romain Guy to use a custom Drawable. You're ImageView will not be round and your source image will be untouched.

classStreamDrawableextendsDrawable {

    privatefinalfloat mCornerRadius;
    privatefinalRectFmRect=newRectF();
    privatefinal BitmapShader mBitmapShader;
    privatefinal Paint mPaint;
    privatefinalint mMargin;

    StreamDrawable(Bitmap bitmap, float cornerRadius, int margin) {
        mCornerRadius = cornerRadius;

        mBitmapShader = newBitmapShader(bitmap,
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mPaint = newPaint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);

        mMargin = margin;
    }

    @OverrideprotectedvoidonBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect.set(mMargin, mMargin, bounds.width() - mMargin, bounds.height() - mMargin);


    }

    @Overridepublicvoiddraw(Canvas canvas) {
        canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);
    }

    @OverridepublicintgetOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @OverridepublicvoidsetAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @OverridepublicvoidsetColorFilter(ColorFilter cf) {
        mPaint.setColorFilter(cf);
    }       
}

Solution 4:

You can add rounded corners in a android view with the GradientDrawable. So ,

GradientDrawablegd=newGradientDrawable();
gd.setColor(Color.TRANSPARENT);
gd.setCornerRadius(15f);
gd.setStroke(1f,Color.BLACK);
yourImageView.setBackground(gd);

Solution 5:

SmartImageView extends from ImageView .. so you just have to extend from SmartImageView

Here is a working solution (based on pskink code & smartImageView lib )

Create a new Class

publicclassRoundedCornersSmartImageViewextendsSmartImageView{

privateintRADIUS=0;
private RectF mRect;
private Path mClip;

publicRoundedCornersSmartImageView(Context context) {
    super(context);
    init();
}

publicRoundedCornersSmartImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

publicRoundedCornersSmartImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

@OverridepublicvoidonDraw(Canvas canvas) {
    Drawabledr= getDrawable();
    if (dr != null) {
        mRect.set(dr.getBounds());
        getImageMatrix().mapRect(mRect);
        mRect.offset(getPaddingLeft(), getPaddingTop());
        mClip.reset();
        mClip.addRoundRect(mRect, RADIUS, RADIUS, Path.Direction.CCW);

        canvas.clipPath(mClip);
        super.onDraw(canvas);
    }
}

publicvoidsetRadius(int radius){
    this.RADIUS = radius;
}

privatevoidinit(){
    mRect = newRectF();
    mClip = newPath();
}
}

USAGE

in your layout file your SmartimageView should look like this

<your.package.path.RoundedCornersSmartImageView
        android:id="@+id/list_image"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:src="@drawable/profile_anonyme_thumb"/>

..and init the view in your code this way

RoundedCornersSmartImageView thumb_image=(RoundedCornersSmartImageView) findViewById(R.id.list_image);

thumb_image.setRadius(4);
//SmartImageView methode 
thumb_image.setImageUrl(bla.MY_THUMB_URL));

Edit your radius for a round image ..