Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How should I give images rounded corners in Android?

I would like to change an image I loaded to have round corners.

Any hints, tutorials, best practices you know of?

like image 836
iamkoa Avatar asked Nov 10 '09 02:11

iamkoa


2 Answers

For a more controlled method draw a rounded rectangle and mask it onto your image using the porter-duff Xfer mode of the paint.

First setup the Xfer paint and the rounded bitmap:

Bitmap myCoolBitmap = ... ; // <-- Your bitmap you want rounded     int w = myCoolBitmap.getWidth(), h = myCoolBitmap.getHeight();  // We have to make sure our rounded corners have an alpha channel in most cases Bitmap rounder = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(rounder);      // We're going to apply this paint eventually using a porter-duff xfer mode. // This will allow us to only overwrite certain pixels. RED is arbitrary. This // could be any color that was fully opaque (alpha = 255) Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG); xferPaint.setColor(Color.RED);  // We're just reusing xferPaint to paint a normal looking rounded box, the 20.f // is the amount we're rounding by. canvas.drawRoundRect(new RectF(0,0,w,h), 20.0f, 20.0f, xferPaint);       // Now we apply the 'magic sauce' to the paint   xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 

Now apply this bitmap ontop of your image:

Bitmap result = Bitmap.createBitmap(myCoolBitmap.getWidth(), myCoolBitmap.getHeight() ,Bitmap.Config.ARGB_8888); Canvas resultCanvas = new Canvas(result) resultCanvas.drawBitmap(myCoolBitmap, 0, 0, null); resultCanvas.drawBitmap(rounder, 0, 0, xferPaint); 

Bitmap with rounded corners now resides in result.

like image 84
Ralphleon Avatar answered Sep 17 '22 22:09

Ralphleon


Why not use clipPath?

protected void onDraw(Canvas canvas) {     Path clipPath = new Path();     float radius = 10.0f;     float padding = radius / 2;     int w = this.getWidth();     int h = this.getHeight();     clipPath.addRoundRect(new RectF(padding, padding, w - padding, h - padding), radius, radius, Path.Direction.CW);     canvas.clipPath(clipPath);     super.onDraw(canvas); } 
like image 41
Jerry Avatar answered Sep 18 '22 22:09

Jerry