Android: ImageView con esquinas redondeadas

Standard

Rounded corner ImageView

Qué tal, en el aporte de esta ocasión les comparto una manera de crear el efecto de ImageView con esquinas redondeadas (o imagen circular) en nuestras aplicaciones Android, esto únicamente mediante código.

La clase ejemplo que se encarga de la magia fue encontrada en la red y complementada para conseguir un mejor resultado en nuestra vista; a continuación les explico por qué.

Una vista o control ImageView se encarga de mostrar una imagen cualquiera, desde un ícono hasta una fotografía con resolución alta de pixeles. Ésta puede cargar imágenes desde diferentes fuentes (como los resources de nuestra aplicación o de proveedores de contenido), calcula las medidas de las imágenes y provee varias opciones de visualización y ajuste, entre otras cosas.

Por default, este control tiene figura rectangular, lo cual puede llegar a ser un inconveniente si el diseño de nuestra aplicación requiere mostrar imágenes circulares o con esquinas redondeadas en general. Una alternativa para solucionar esta cuestión, es redondear directamente las esquinas de nuestras imágenes para así no vernos en la necesidad de valernos de bibliotecas externas o controles custom que en ocasiones no es tan simple adaptar a nuestras necesidades. Después, sólo es necesario mostrar la imagen en nuestro ImageView sin alterar la vista.

Aquí la propuesta:

package com.hunabsys.mydemoapp.image;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;

public class ImageHelper {
    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels){
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), 
            bitmap.getHeight());
        final RectF rectF = new RectF(rect);

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, (float) pixels, (float) pixels, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }

    public static Bitmap cropBitmapToSquare(Bitmap bitmap) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int newWidth = (height > width) ? width : height;
        int newHeight = (height > width) ? height - (height - width) 
            : height;
        int cropW = (width - height) / 2;
        cropW = (cropW < 0) ? 0 : cropW;
        int cropH = (height - width) / 2;
        cropH = (cropH < 0) ? 0 : cropH;

        return Bitmap.createBitmap(
            bitmap, cropW, cropH, newWidth, newHeight);
    }
}

El método getRoundedCornerBitmap(), encargado de recibir como parámetro nuestra imagen en formato de mapa de bits y su tamaño en pixeles para  posteriormente redondear sus esquinas, es usado como un helper dentro de nuestra clase ImageHelper. El detalle está, en que, para que este método funcione correctamente mostrando nuestra imagen con forma circular y ésta no sea deformada al mostrarla en la vista, la imagen debe medir el mismo ancho y alto; es decir, debe tener forma cuadrada. Lo cual no siempre es tan simple.

Por esta razón, para asegurarnos de su correcto funcionamiento se añadió a nuestra clase otro helper, cropBitmapToSquare(). Éste recibe como parámetro una imagen de tamaño cualquiera, y recalcula sus dimensiones para generar como salida una imagen centrada (con respecto al mapa de bits recibido como entrada) y de forma cuadrada.

De esta manera, con estas líneas de código es posible conseguir que nuestro ImageView muestre imágenes de forma circular:

// Convierte nuestra imagen a formato mapa de bits.
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), 
     R.drawable.image);

// Llama al método encargado de cortar en forma cuadrada a la imagen.
Bitmap croppedImage = ImageHelper.cropBitmapToSquare(myBitmap);

// Llama al método encargado de redondear las esquinas de la imagen 
// previamente cortada. Recibe como parámetros el mapa de bits y el tamaño // de sus lados en pixeles.
Bitmap roundedCornersImage = ImageHelper.getRoundedCornerBitmap(
     croppedImage, 120);

// Asigna el mapa de bits resultante a la vista ImageView que lo mostrará.
imageView.setImageBitmap(roundedCornersImage);

Espero en algún caso les sea de ayuda este ejemplo como lo fue para mí. ¡Hasta luego!

 

Fuentes:

One thought on “Android: ImageView con esquinas redondeadas

  1. karontes

    Buenas a todos!!!
    Estoy empezando con Android y me dispongo a hacer una práctica del juego simon dice. Mi duda es como puedo poner las imágenes de cada uno de los botones de la forma semicircular que tiene, vamos tengo la imagen en png con la forma, pero al ponerle un evento a la imagen me detecta la imagen cuadrada y lo que quiero es que solo te detecte si tocas encima del color y no por las partes transparentes de la imagen. Gracias de antemano.

Leave a Reply

Your email address will not be published. Required fields are marked *