Para uno de los proyectos de Possible Worldwide, era necesario mostrar imágenes que se bajaban de un servidor, con las esquinas redondeadas. La primera implementación constaba de bajar la imagen, y “recortar los bordes” antes de guardar la imagen en el almacenamiento del teléfono.
El método simplemente recortaba la imagen generando un nuevo Bitmap:
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, final float roundPx) { if (bitmap == null) { throw new IllegalArgumentException("Bitmap to round corners can not be null"); } Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); final RectF rectF = new RectF(rect); final int color = 0xff424242; final Paint paint = new Paint(); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawRoundRect(rectF, roundPx, roundPx, paint); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(bitmap, rect, rect, paint); return output; }
Pero ciertas imágenes tenia ciertos problemas causando recortes execivos, además de estar alojando dos veces la misma imagen en el heap. Aun cuando se puede mandar a “reciclar” el bitmap viejo, es un gasto innecesario de memoria.
Luego, investigando un poco más, me encontre esta solución en StackOverflow. Básicamente es crear una clase que herede de ImageView y sobreescribir el método onDraw, y utilizando un clipPath, “ocultar” las esquinas con un rectangulo redondeado.
public class RoundedImageView extends ImageView { public RoundedImageView(Context context) { super(context); } public RoundedImageView(Context context, AttributeSet attrs) { super(context, attrs); } public RoundedImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void onDraw(Canvas canvas) { Path clipPath = new Path(); int w = this.getWidth(); int h = this.getHeight(); clipPath.addRoundRect(new RectF(0, 0, w, h), 10.0f, 10.0f, Path.Direction.CW); canvas.clipPath(clipPath); super.onDraw(canvas); } }
Ésta implementación es muy sencilla, pero se podría modificar para que acepte un parámetro desde el Layout (XML) para definir la cantidad de redondeo
De esta manera, no es necesario procesar la imagen, reduciendo el uso de heap nativo y mostrando la imagen más rapidamente.