Crear Circulos en el Canvas de Android

El canvas de Android nos permite crear imágenes apartir de formas, circulos, rectas, líneas, óvalos etc, en este articulo veremos como crear circulos en la vista de android.

El Canvas en Android es una herramienta poderosa que nos permite dibujar gráficos 2D personalizados directamente en la pantalla. Desde formas simples como círculos y rectángulos hasta trazados complejos, el límite es tu creatividad.

Lo primero que vamos a hacer es abrir el Android Studio y crear un proyecto nuevo, despues nos vamos a dirigir a la carpeta de codigo java y vamos a crear una nueva clase.

Crear la Clase de Dibujo

La clase se le va a poner un nombre en mi caso, ViewRedDot esta clase va a extender la clase view y tendrá un formato de la siguiente manera.

public class ViewRedDot extends View {

    public ViewRedDot (Context context){
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas){
    // Codigo aqui
    }
}

En la seccion donde dice “Codigo aqui” vamos a insertar todo el codigo que queramos, este codigo se va a dibujar en el layout principal de nuestra aplicacion o en el layout que elijamos.

Ahora para crear un circulo vamos a usar el siguiente codigo facil.

        Paint circle = new Paint();
        circle.setColor(Color.RED); // color del circulo
        canvas.drawCircle(canvas.getWidth()/2, canvas.getHeight()/2, canvas.getWidth()/3, circle);
 // Dibujar el circulo

Los parametros para dibujar el circulo son: Posicion X, Posicion Y , Radio y Color/Paint.

canvas.getWidth()/2 obtiene la medida del canvas y lo divide entre 2 para posicionarse en medio del canvas posicion X.

canvas.getHeight()/2 obtiene la medida del canvas y lo divide entre 2 para posicionarse en medio del canvas posicion Y.

canvas.getWidth()/3 equivale a poner el radio del circulo en un tercio del ancho del canvas,

Paint/Color.RED es el color de dibujo del circulo, pueden ser diferentes algunos ejemplo: BLUE, RED, CYAN, WHITE, YELLOW, MAGENTA… tambien se pueden usar la funcion rgb, etc.

Asignar el Dibujo al Layout

Para asignar el dibijo que creamos y se muestre en la vista principal de la aplicacion vamos a hacer lo siguiente.

En nuestra MainActivity vamos a localizar la siguiente linea, que dirige la vista a un layout.xml

setContentView(R.layout.activity_main)

Y lo vamos a cambiar para que se muestre nuestra nueva vista.

En Kotlin

        setContentView( ViewRedDot(this));

En Java

        setContentView(new ViewRedDot(this));

Y Listo ahora ejecutamos y podemos ver el resultado.

Ahora ya puedes basarte en este código y crear dibujos, por ejemplo, posicionando diferentes circulos de colores para crear una imagen o hacer lo que mas te guste.

Consejos de Rendimiento

1. No instancies objetos dentro de onDraw: El método onDraw se ejecuta muchas veces por segundo (cada vez que la pantalla se refresca). Crear objetos como Paint dentro de este método puede causar problemas de memoria y lentitud (lag). Siempre inicialízalos en el constructor o en un método de configuración.
2. AntiAlias: Activa siempre paint.setAntiAlias(true) para que las formas circulares no se vean “pixeladas” en los bordes.
3. Colores Dinámicos: Puedes usar Color.rgb(r, g, b) o Color.parseColor("#FF0000") si necesitas tonos más específicos para tus diseños.

Te puede interesar: Flash Max – Plataforma para vender cursos en linea LMS